A Pen by Katy DeCorah.

Dribbble--Mini-Dark-Settings-Window.markdown

Dribbble//Mini Dark Settings Window

http://dribbble.com/shots/779059-Mini-Dark-Settings-Window

A Pen by Katy DeCorah on CodePen.

License.

index.haml

%div.container
  %div.header
    %a.icon-remove-sign
  %div.inner
    %div.btn-group
      %a.icon-cog.btn
      %a.icon-signal.btn.active
      %a.icon-map-marker.btn
      %a.icon-volume-up.btn
    %a.btn
      %i.icon-signal
      BT Openzone
      %i.icon-caret-down
    %a.btn Network Preferences…

script.js

// http://dribbble.com/shots/779059-Mini-Dark-Settings-Window

style.scss

@import "compass";
.clearfix {
  zoom:1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto);

* {
  @include box-sizing(border-box);
}
html {
  width:100%;
  height:100%;
}
body {
  @include background-image(linear-gradient(top,#2D5376,#ADC5BE));
  width:100%;
  height:100%;
  @include display-box; 
  @include box-align(center);
  @include box-pack(center);
  font-family:"Roboto";
  line-height:1;
}
.container {
  max-width:15em;
}

.header {
  border-radius:0.5em 0.5em 0 0;
  @include background-image(linear-gradient(top,#494949 0%,#494949 1%, #3a3a3a 1%, #212121  50%,#1b1b1b 100%));
  border:0.1em solid black;
  a {
    color:#595959;
    font-size:1.2em;
    padding:0.4em 0.5em;
    display:block;
    @include text-shadow(0 0.1em 0.1em #0f0f0f);
  }
}

.inner {
  border-radius:0 0 0.5em 0.5em;
  @include background-image(linear-gradient(top,#383838 0%,#383838 1%, #2b2b2b 1%, #2a2a2a 100%));
  border:0.1em solid black;
  border-top:0;
  padding:1em 1em 0.5em;
}

.btn-group {
  @extend .clearfix;
  .btn {
    float:left;
    width:25%;
    font-size:1.25em;
    padding:0.5em 0;
    text-align:center;
    border-radius:0;
    border-right:0;
    &:first-child{
      border-radius:0.2em 0 0 0.2em;
    }
    &:last-child {
      border-right:1px solid black;
      border-radius:0 0.2em 0.2em 0;
    }
    
  }
}

.btn {
  @include background-image(linear-gradient(top,#4f4f4f 0%, #3a3a3a 1%, #1d1d1d 100%));
  background-repeat: repeat-x;
  display:block;
  margin:0 0 0.65em;
  border-radius:0.25em;
  border:1px solid black;
  padding:0.7em 1em;
  color:#cbcbcb;
  @include text-shadow(0 0.1em 0.1em #111111);
  @include box-shadow(inset 0 0.1em 0.1em #333333);
  &:hover {
    background-position: 0 -1em;
    background-color:#1d1d1d;
    @include transition(background-position .1s linear);
  }
  &.active {
    @include background-image(linear-gradient(top,#212121 0%, #303030 50%, #373737 100%));
    @include box-shadow(inset 0 0.1em 0.1em #333333);
    @include text-shadow(0 0.1em 0.1em #212121);
    &:hover {background-position:0;}
  }
  i{
    &:first-child {
      margin-right:0.5em;
    }
    &:last-child {
      float:right;
    }
  }
  
}
a {
  text-decoration:none;
  cursor:pointer;
}