ok
Mini Shell
/* Reset
----------------------------------- */
@import url("normalize.css")
/* Fonts
----------------------------------- */
$font = 'MontserratRegular'
$fontBold = 'MontserratBold'
$stack = $font, Helvetica, Arial, sans-serif
$stackBold = $fontBold, Helvetica, Arial, sans-serif
@font-face
font-family $font
src url('./montserrat-regular.eot')
src url('./montserrat-regular.eot?#iefix') format('embedded-opentype'),
url('./montserrat-regular.woff') format('woff'),
url('./montserrat-regular.ttf') format('truetype'),
url('./montserrat-regular.svg#' + $font + '') format('svg')
font-style normal
font-weight normal
@font-face
font-family $fontBold
src url('./montserrat-bold.eot')
src url('./montserrat-bold.eot?#iefix') format('embedded-opentype'),
url('./montserrat-bold.woff') format('woff'),
url('./montserrat-bold.ttf') format('truetype'),
url('./montserrat-bold.svg#' + $fontBold + '') format('svg')
font-style normal
font-weight bold
/* Demo
----------------------------------- */
html
body
height 100%
body
font 14px/20px $stack
color #222
background #ebe7df url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAFZCAIAAAA96mnzAAACKklEQVR4Xn2VUW7kMAxD+QLf/1x7gv71LNwdKTLhZFtggMCwSVEUPdb3159/v0uSrM8HtGRZuoQk1R69J12o9ixJWvSnVyfLdbNw0XAXWe1fIL8BoqmNGiV/cHc9Gq4NXxLKHhteRyLpA28cl0SLdx0BckSWL4gkPlIVTg1nN9Ys3iyWI5AGDA5xOXB5BJaWmOw6KSLeU6+0P50QshQyEL2im/YMIL60dTSZ3RXenlkiJpMj8XPMAl1FtjMRW19NxzOE5VGWPVGrc7aSJgz1Y9ku57mpYSwn1h0ivFOXxoCKMCXiahbbZNIZR+tkphllPsomipCwb4GMkXTmPfVg40Jt2y4RQM/PqX5JTM4iiTN8Zz1XvbIAEEvoEW+3nxTLL3lB7t7J3WwyI7g5OVxKIeFEH4FIGLC9I+XqvSd4AxJM5O6WTPr54RAxLG44FVrEuz+kFdXyLiuX6kLPVLZL2ISlcHNlBIKm5rR8nEi9wJeA6Y8JZlJOyDiin0K5ag+AXHtALBicXasjIUu9h0STBbCMU+89gMnu/J05MU1QWqdbPMRPIZIzDgsi8Olg5t7wHhUg/pv5RUzO+BHDmczHkAfZWxlSYgNI5Ig5XRoc66dW9L45eHDkbkqCO7RLG5cna/HD7YhZnfINkFo8iNyj5kx6pFrxNGRlfhV2e1Zt5DnGU8T7Tud1ivi8jU8/3Zy88pkn6+zdXiJ7AVSFBZA3VcwDfXtt5UUHS38B35hQVuJip4MAAAAASUVORK5CYII=") repeat-x
*background-image url(ie/header-line.png)
a
color #222
text-decoration none
border-bottom 1px solid #bbb
&:hover
color #000
a
.self
-webkit-transition color .1s
-moz-transition color .1s
-ms-transition color .1s
-o-transition color .1s
transition color .1s
.self
color #333
border-bottom 1px dotted #aaa
cursor pointer
&:hover
color #000
strong
font-family $stackBold
font-weight 700
p
margin 0 0 8px
label
cursor pointer
h1
h2
h3
h4
margin 0
font bold 20px/60px $stackBold
h2
height 60px
text-align center
text-transform uppercase
h4
font-size 18px
line-height 24px
ul
margin 0
padding 0
list-style none
table
width 100%
margin-bottom 21px
th
td
padding 11px 20px 12px
vertical-align top
font-weight normal
text-align left
border-bottom 2px solid #E7E5E0
thead &
background lighten(#E7E5E0, 50%)
th
white-space nowrap
td
width 100%
.focus
outline 1px dotted rgba(0,0,0,.5) !important
.clear
position relative
*zoom 1
&:before
&:after
content ''
display table
clear both
.layout
width 930px
margin 0 auto
padding 0 15px
.header
padding 115px 0 73px
color #fff
text-align center
h1
strong
letter-spacing -1px
text-transform uppercase
h1
padding-bottom 23px
font-size 22px
line-height 28px
h3
position relative
padding 35px 0 17px
font-size 120px
line-height 140px
letter-spacing -5px
&:before
content ''
display inline-block
width 72px
height 64px
margin-right 32px
vertical-align middle
background url(icheck.png)
&:after
content ''
position absolute
top 0
left 50%
width 100px
margin-left -50px
border-top 3px solid #fff
strong
font 24px/30px $stack
a
color #fff
border-bottom-color #fff
.features
position relative
font-size 16px
color #555
background #fff
.self
color #555
border-bottom-color #bbb
&:hover
color #222
.arrows
top 0
&:hover .arrows .bottom
left 0
h2
color #fff
background #2489c5
ul
padding 44px 60px 36px
li
padding 0 0 9px 36px
background url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABI0lEQVR4XpXSP0vDUBjF4ZtLkIr4EYzduogdXJTWWV2FLMVNoQrdAhlUUFAEcejo1q13svgFBAUdxA/g30kcdQoIIlL9DWcKuZEeeOCl99w3gTSI49h4MoFb/KCJz6KShS/rOh/TbEZZECLBiSQIR1nQQgAnAVr/LZjEnIq76OJbutjRGR26isUB3pDhBikucWoUzVdI1cl05zBk2MI5jvCKIfL5QluzxTS20bY6WENdl0ujTl13Ni3DABtwWEFp1HG6M7Aq9NHBGRbgy7w6HfTzX6GHCyyXPV2dnu9/MIUX+PIMOkRsbq7hHkZmxciDOrZoQRUVPCGCw504RDobR7VoQQ0f2Mejls1IRb/t4R10CcLc6/2igSVcw8gqFnEMOnSVPxQqQaPw2y7fAAAAAElFTkSuQmCC") 0 1px no-repeat
*background-image url(ie/icon-star.png)
&.offset
margin-top 20px
.mark
padding 0 2px
color lighten(#555, 20%)
background lighten(#d7d4cc, 40%)
.skin-polaris &
background darken(#2C323C, 20%)
.skin-futurico &
background darken(#2E3035, 20%)
.social
height 60px
margin-bottom 60px
padding 0 60px
font-size 16px
color #555
background lighten(#EBE7DF, 50%)
a
color #777
border-bottom-color #ccc
&:hover
color #444
.left
float left
padding-top 19px
li
float left
padding-right 30px
a
position relative
.right
float right
padding-top 20px
li
float right
padding-left 10px
&.local
padding-top 19px
li
padding-left 30px
font-size 14px
.demo-holder
margin-bottom 97px
.demo-title
padding-bottom 36px
font-size 26px
letter-spacing -1px
.demo
position relative
&:hover .arrows .top
&:hover .arrows .bottom
left 0
.demo-list
position relative
margin-right 360px
padding 33px 57px 17px
color #555
background #fff
border 3px solid #ddd8ce
ul
float right
white-space nowrap
&:first-child
float left
li
position relative
padding 0 0 18px 42px
input
position absolute
top 4px
left 0
.icheckbox_square-blue
.iradio_square-blue
position absolute
top -1px
left 0
span
color #bbb
.demo-methods
padding 21px 360px 0 0
.mark
background darken(#e7e5e0, 10%)
dt
position relative
padding 17px 150px 18px 0
font 16px/24px $stack
color #444
border-bottom 3px solid #ddd8ce
.self
cursor pointer
&:hover
color #222
.code
position absolute
right 0
bottom 18px
color #777
.self:hover
color #444
dd
position relative
display none
margin 0
background #fff
border 3px solid #ddd8ce
border-top none
&:before
content ''
position absolute
top -13px
left 0
width 0
height 0
border 5px solid transparent
border-bottom-color #ddd8ce
border-left-color #ddd8ce
.markup
margin 0
color #888
background lighten(#ebe7df, 50%)
border none
.comment
color #aaa
.demo-callbacks
position absolute
top 0
right 0
bottom 0
width 300px
color #aaa
background #232323
border 3px solid #ddd8ce
h2
color #fff
background #6a5a8c
ul
position absolute
top 60px
width 100%
bottom 0
overflow auto
li
margin-top -1px
padding 13px 20px 15px
border-top 1px solid #2e2e2e
span
color #888
.skins
position relative
*zoom 1
h2
position absolute
top -38px
right 0
left 0
font-size 24px
text-align center
.arrows
position absolute
top 3px
left -60px
width 60px
overflow hidden
.top
.bottom
position relative
left 60px
width 60px
height 60px
cursor pointer
-webkit-transition left .3s, background-color .2s
-moz-transition left .3s, background-color .2s
-ms-transition left .3s, background-color .2s
-o-transition left .3s, background-color .2s
transition left .3s, background-color .2s
.top
background lighten(#5a9aa8, 25%) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAdklEQVR4Xo3MuwmFQBiE0b0FmAuutnRBsAARLMTYRzvWItiEYLq/s6CYyMwGXzTDcWbG8mhEf/ZjQIV2ZCigjiASMAVJIAVKAQ4FKWBDJVoYpAB/7z8GRaAQgBNQG8dZA28f0BmHBgUCKGh9hhpNKH8BWY8GlF2OH3hCC1zmdAAAAABJRU5ErkJggg==") 50% no-repeat
*background-image url(ie/arrow-top.png)
&:hover
background-color lighten(#5a9aa8, 10%)
.bottom
background lighten(#dba571, 20%) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAf0lEQVR4Xo3MzQmEQBCE0TGAvQuOpiQIBiCCgXj2J52NRTAJwev0Vh+WOgjlNHyHguYFM/M6tKLSd2YTmtHHR48S8jtQzAB2430d2bgJvQLsdqRCZwZUPAFLaPjrjYAUMKLgwBtUK4CIhi4BEFGQBohISANEJKQBIqqIFtSqvx/0bXhCCUrgiAAAAABJRU5ErkJggg==") 50% no-repeat
*background-image url(ie/arrow-bottom.png)
&:hover
background-color #dba571
@media screen and (max-width:1049px)
.arrows
.fork-me
display none
.skin
position relative
margin-bottom 40px
&:hover .arrows .top
&:hover .arrows .bottom
left 0
h3
position relative
z-index 20
float left
height 60px
padding 0 57px
line-height 58px
background #fff
border 3px solid #ddd8ce
border-bottom none
&:before
content ''
position absolute
top 100%
left 0
width 100%
height 2px
margin-top -1px
background #fff
&.skin-polaris h3
color lighten(#7a828b, 60%)
background #2c323c
&:before
background #2c323c
&.skin-futurico h3
color lighten(#888, 50%)
background #2e3035
&:before
background #2e3035
dl
z-index 10
width 100%
margin 0
dt
position relative
top -53px
right -3px
float right
height 47px
margin-right -3px
padding 0 57px
line-height 47px
border 3px solid #ddd8ce
cursor pointer
&:hover
background #f0ede7
border-bottom 3px solid #ddd8ce
&.selected
height 50px
background #fff
border-bottom none
cursor default
&:before
content ''
position absolute
top 100%
left 0
width 100%
height 2px
margin-top -1px
background #fff
&.skin-polaris dt
color lighten(#7a828b, 60%)
background lighten(#30363f, 30%)
&:hover
background lighten(#30363f, 15%)
&.selected
background #2c323c
&:before
background #2c323c
&.skin-futurico dt
color lighten(#888, 50%)
background lighten(#2e3035, 30%)
&:hover
background lighten(#2e3035, 15%)
&.selected
background #2e3035
&:before
background #2e3035
dd
position relative
display none
float left
width 100%
margin -3px -100% 0 0
overflow hidden
color #444
background #fff
border 3px solid #ddd8ce
&.selected
display block
a
color #444
&:hover
color #111
&.skin-polaris dd
color #7a828b
background #2c323c
a
color #7a828b
border-bottom-color lighten(#2c323c, 20%)
&:hover
color lighten(#7a828b, 30%)
&.skin-futurico dd
color #888
background #2e3035
a
color #888
border-bottom-color lighten(#2e3035, 20%)
&:hover
color #aaa
.skin-section
float left
padding 42px 0 31px 57px
line-height 18px
h4
padding-bottom 18px
.skin-polaris &
color lighten(#7a828b, 20%)
.skin-futurico &
color lighten(#888, 20%)
.list
float left
padding-right 60px
li
position relative
padding-bottom 15px
.skin-minimal & .list li
padding-left 38px
.skin-square & .list li
padding-left 42px
.skin-flat & .list li
.skin-line & label
padding-left 40px
.skin-line & h4
padding-bottom 24px
.skin-line & .list
padding-right 40px
li
padding-bottom 10px
.skin-polaris & .list li
padding-left 37px
.skin-futurico & .list li
padding-left 36px
.icheckbox_minimal
.icheckbox_minimal-red
.icheckbox_minimal-green
.icheckbox_minimal-blue
.icheckbox_minimal-aero
.icheckbox_minimal-grey
.icheckbox_minimal-orange
.icheckbox_minimal-yellow
.icheckbox_minimal-pink
.icheckbox_minimal-purple
.iradio_minimal
.iradio_minimal-red
.iradio_minimal-green
.iradio_minimal-blue
.iradio_minimal-aero
.iradio_minimal-grey
.iradio_minimal-orange
.iradio_minimal-yellow
.iradio_minimal-pink
.iradio_minimal-purple
position absolute
top 1px
left 0
.skin input[type=checkbox]
.skin input[type=radio]
position absolute
top 2px
left 0
.icheckbox_square
.icheckbox_square-red
.icheckbox_square-green
.icheckbox_square-blue
.icheckbox_square-aero
.icheckbox_square-grey
.icheckbox_square-orange
.icheckbox_square-yellow
.icheckbox_square-pink
.icheckbox_square-purple
.iradio_square
.iradio_square-red
.iradio_square-green
.iradio_square-blue
.iradio_square-aero
.iradio_square-grey
.iradio_square-orange
.iradio_square-yellow
.iradio_square-pink
.iradio_square-purple
position absolute
top -1px
left 0
.icheckbox_flat
.icheckbox_flat-red
.icheckbox_flat-green
.icheckbox_flat-blue
.icheckbox_flat-aero
.icheckbox_flat-grey
.icheckbox_flat-orange
.icheckbox_flat-yellow
.icheckbox_flat-pink
.icheckbox_flat-purple
.iradio_flat
.iradio_flat-red
.iradio_flat-green
.iradio_flat-blue
.iradio_flat-aero
.iradio_flat-grey
.iradio_flat-orange
.iradio_flat-yellow
.iradio_flat-pink
.iradio_flat-purple
position absolute
top 0
left 0
.icheckbox_polaris
.iradio_polaris
position absolute
top -4px
left -6px
.icheckbox_futurico
.iradio_futurico
position absolute
top 2px
left 0
.skin-states
float right
padding-right 57px
padding-left 0
.state
cursor default !important
.list
padding-right 0
.skin-minimal & .list li
padding-left 71px
.skin-square & .list li
padding-left 79px
.skin-flat & .list li
padding-left 75px
.skin-line & .list
padding-right 0
.skin-polaris & .list li
padding-left 69px
.skin-futurico & .list li
padding-left 67px
.iradio_minimal
.iradio_minimal-red
.iradio_minimal-green
.iradio_minimal-blue
.iradio_minimal-aero
.iradio_minimal-grey
.iradio_minimal-orange
.iradio_minimal-yellow
.iradio_minimal-pink
.iradio_minimal-purple
left 33px
.iradio_square
.iradio_square-red
.iradio_square-green
.iradio_square-blue
.iradio_square-aero
.iradio_square-grey
.iradio_square-orange
.iradio_square-yellow
.iradio_square-pink
.iradio_square-purple
left 37px
.iradio_flat
.iradio_flat-red
.iradio_flat-green
.iradio_flat-blue
.iradio_flat-aero
.iradio_flat-grey
.iradio_flat-orange
.iradio_flat-yellow
.iradio_flat-pink
.iradio_flat-purple
left 35px
.iradio_polaris
left 26px
.iradio_futurico
left 31px
.colors
clear both
padding 24px 0 9px
.skin-line &
padding-top 28px
strong
float left
line-height 20px
margin-right 20px
li
position relative
float left
width 16px
height 16px
margin 2px 1px 0 0
background #000
cursor pointer
filter unquote('alpha(opacity=50)')
opacity .5
-webkit-transition opacity .2s
-moz-transition opacity .2s
-ms-transition opacity .2s
-o-transition opacity .2s
transition opacity .2s
&:hover
filter unquote('alpha(opacity=100)')
opacity 1
&.active
height 20px
margin-top 0
filter unquote('alpha(opacity=75)')
opacity .75
&.red
background #d54e21
&.green
background #78a300
&.blue
background #0e76a8
&.aero
background #9cc2cb
&.grey
background #73716e
&.orange
background #f70
&.yellow
background #fc0
&.pink
background #ff66b5
&.purple
background #6a5a8c
.skin-square &.red
background #e56c69
.skin-square &.green
background #1b7e5a
.skin-square &.blue
background #2489c5
.skin-square &.aero
background #9cc2cb
.skin-square &.grey
background #73716e
.skin-square &.yellow
background #fc3
.skin-square &.pink
background #a77a94
.skin-square &.purple
background #6a5a8c
.skin-square &.orange
background #f70
.skin-flat &.red
background #ec7063
.skin-flat &.green
background #1abc9c
.skin-flat &.blue
background #3498db
.skin-flat &.grey
background #95a5a6
.skin-flat &.orange
background #f39c12
.skin-flat &.yellow
background #f1c40f
.skin-flat &.pink
background #af7ac5
.skin-flat &.purple
background #8677a7
.skin-line &.yellow
background #FFC414
.skins-info
padding 13px 0 57px
font-size 16px
line-height 22px
text-align center
p
margin-bottom 17px
.skin-pre
padding 43px 60px 0
.skin-usage
padding 19px 60px 8px
list-style decimal outside
li
margin-bottom 23px
.schemes
margin-bottom -3px
padding 13px 0 0 20px
color #888
ul
float left
padding-right 60px
li
margin 0
padding-bottom 3px
.usage
position relative
margin-bottom 80px
background #fff
a
border-bottom-color #ddd
.self
border-bottom-color #bbb
.arrows
top 0
&:hover .arrows .top
&:hover .arrows .bottom
left 0
h2
color #fff
background #1f7f5c
h4
margin 26px 0 10px
&.indeterminate
margin-top 28px
p
margin-bottom 5px
&.offset
margin-top 10px
&.callbacks-info
margin-bottom 19px
&.methods-info
margin-bottom 10px
&.methods-callback
margin-top 10px
&.issue-tracker
margin-top 31px
.markup
margin 9px 0 16px
.usage-inner
font-size 15px
line-height 23px
padding 41px 60px 39px
.markup
margin 10px 0 18px
padding 8px 0 9px 17px
font 14px/20px $stack
color lighten(#555, 20%)
background lighten(#d7d4cc, 40%)
border-left 3px solid darken(#ebeae5, 10%)
.comment
color lighten(#555, 40%)
.self
color #555
&:hover
color #333
.skin-polaris &
background darken(#2C323C, 20%)
border-left-color darken(#2C323C, 30%)
.skin-futurico &
background darken(#2E3035, 20%)
border-left-color darken(#2E3035, 30%)
.skin-polaris &
.skin-futurico &
.comment
color #555
.browsers
margin-bottom 74px
h2
margin-bottom 29px
font-size 24px
.browsers-inner
padding 0 60px
font-size 15px
line-height 23px
p
margin-bottom 15px
.benefits
position relative
margin-bottom 59px
color #888
background #232323
.arrows
top 0
&:hover .arrows .top
&:hover .arrows .bottom
left 0
h2
color #fff
background #6a5b8c
a
color #888
border-bottom-color #444
&:hover
color #aaa
.mark
color #777
background lighten(#232323, 10%)
.benefits-inner
padding 41px 60px 29px
font-size 15px
line-height 23px
p
margin-bottom 15px
ul
margin -10px 0 15px
.download
height 63px
text-align center
a
display block
height 60px
font-size 18px
line-height 58px
color #fff
border-bottom 0 solid darken(#E76B66, 10%)
background #E76B66
-webkit-transition border-bottom .2s
-moz-transition border-bottom .2s
-ms-transition border-bottom .2s
-o-transition border-bottom .2s
transition border-bottom .2s
&:before
content ''
display inline-block
width 26px
height 26px
margin-right 12px
background url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACYUlEQVR4Xr3VPWhTURjH4VOt0ES7ZRJbEJpsNsaimx9E0GpRCdgU/NhsRAdNBYcK0RirQcSkIIK2cRBRiragVayDhqBDLVWatFvsIKK2UMEp4KBcf8N/KNdwvcHWAw8c/rzvebk5yU2dZVnmf6wVNdb70Ca+5Rrkx0e8E/ZkyzCoAyuxBZu17/jXQV34jjwCytowjUk90Ywyo5q8errcDoriPgpoRhEj6MQrGHmpbARF1RbUG3Uz6Bae4iBacQNNSKEPRi4pa1JNq3pGcds+qNrXu4B1CKKCWtZqlPAZO/72RDGsRdKWh5ATIdOSpHpjbu6ojBfYBiPdOIQeHJMeZd0wsh1jKDsNakEc97AHo8o3IYCz2I1nGMYuZQHVGPXs1RlxtNgH+TCFtBpvIqua40ghqkGdOIp27VOqMcigX8PTKIKzWXwZDDbAQhDG5o6yx2iAkQY80T4HYxOEpbP/uCOnN+wq1Nlq6x3qrWp3NIcKJvAWV+FVzU804i6uwyNZZY34BaOeyzpjQmfOLR70DSGcwyxOIa7mAZzHQ+QxLHllCdUYnMYZzOqsjeBsPbp8QFZ7Lw7gCt4jhGu4qCEGa5SVVWPUM4Yjbn5HfrTjNYzk8AAZ5CSjbBBG3qjXr0CqX+YAviJpy6cQg9NKIoJBN6+gIGbwA16kMY5eeGDEo2xcNV71TCPo5qM7iX14hJIueB4XkICRhLJ51ZTUsx8n3AwawmGE8QUhRDR4J4yElUUQUm1YvUPOfxPO4khj66KL70W/m+Z6uF3P0YdJBRVlZqkHlbEezQo+YWHJB8mC1Lx+Ayeq7nRIoewwAAAAAElFTkSuQmCC")
*background-image url(ie/icon-options.png)
vertical-align middle
&:hover
border-bottom-width 3px
.license
color #444
text-align center
padding 30px 0 75px
.footer
padding-top 28px
height 60px
color #666
background #e2dfd8
ul
float left
li
float left
padding 2px 10px 0 0
&.local li
padding 0 30px 0 0
.code
float right
a
color #444
&:hover
color #222
.footer-inner
width 930px
margin 0 auto
overflow hidden
.fork-me
position fixed
*position absolute
top 0
right 0
width 40px
height 40px
overflow hidden
text-indent 100%
white-space nowrap
background #28545b url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVR4XqVSgQmEMAyszw/gCI7wK7iBblBHcISfxG6gG/gjuIGO0A3ygaYQCCG2HhweF+6aShsAcDcBJBpuvlwFagqGJwUf5EL6kgV2eEe2yIgc9QI73CMPs8AOywI7nHDSzCxYxcnJ6+hrFnQkJrb2nGclP3Fj+vf0IUV1AgCZHiS86lOObxD4qqSD5mtXmAq1e2fB3vqXact3f/JmXumJlVq1AAAAAElFTkSuQmCC") 50% no-repeat
*background-image url(ie/icon-fork.png)
&:hover
background-color #1f7f5c
.skin dt
.fork-me
-webkit-transition background-color .2s
-moz-transition background-color .2s
-ms-transition background-color .2s
-o-transition background-color .2s
transition background-color .2s
Zerion Mini Shell 1.0