Skip to content

Instantly share code, notes, and snippets.

@jpdevries
Last active December 20, 2015 20:38
Show Gist options
  • Save jpdevries/16aa30688636fd1c2f4e to your computer and use it in GitHub Desktop.
Save jpdevries/16aa30688636fd1c2f4e to your computer and use it in GitHub Desktop.
/* layout variables */
/* start layout */
/* properties */
#quickbar-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#quickbar-wrapper {
height: 4px;
overflow: visible;
}
#quickbar-wrapper .quickbar {
width: 100%;
height: 40px;
position: fixed;
top: -40px;
left: 0;
z-index: 10000;
text-align: left;
}
#quickbar-wrapper .quickbar:hover {
top: 0;
}
#quickbar-wrapper .quickbar ul {
margin: 0;
padding: 9px;
width: 100%;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-o-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#quickbar-wrapper .quickbar ul li {
white-space: nowrap;
display: inline-block;
padding: 4px 8px 1px 8px;
height: 24px;
margin-right: 4px;
}
#quickbar-wrapper .quickbar ul li.help {
float: right;
}
.touch #quickbar-wrapper .quickbar {
top: 0;
}
@media only screen and (max-width: 480px) {
.quickbar {
top: 0;
}
}
/* end layout */
/* start style */
/* properties */
#quickbar-wrapper .quickbar {
border-bottom: 4px solid #464646;
background: #1e1e1e;
background: rgba(30, 30, 30, 0.96);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-transition: all 160ms ease-in;
-moz-transition: all 160ms ease-in;
-o-transition: all 160ms ease-in;
transition: all 160ms ease-in;
}
#quickbar-wrapper .quickbar:hover {
-webkit-transition: all 240ms ease-in;
-moz-transition: all 240ms ease-in;
-o-transition: all 240ms ease-in;
transition: all 240ms ease-in;
}
#quickbar-wrapper .quickbar ul {
color: #5ac4e8;
}
#quickbar-wrapper .quickbar ul li {
text-shadow: none;
border-top: 1px solid #5a5a5a;
border-bottom: 1px solid black;
font-size: 12px;
border-radius: 4px;
opacity: 0.99;
font-weight: normal;
background-color: #5D8A36;
cursor: pointer;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-o-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#quickbar-wrapper .quickbar ul li a {
color: inherit;
text-decoration: none;
letter-spacing: 0;
}
#quickbar-wrapper .quickbar ul li a:visited {
color: inherit;
text-decoration: none;
}
#quickbar-wrapper {
font-family: "Lucida Console", Monaco, monospace;
}
#quickbar-wrapper {
text-transform: lowercase;
}
/* add a gradient and a rollover effect */
#quickbar-wrapper .quickbar ul li {
-webkit-transition: all 240ms ease-out;
-moz-transition: all 240ms ease-out;
-o-transition: all 240ms ease-out;
transition: all 240ms ease-out;
background: #484848;
/*@include gradient( background-image, linear-gradient(180deg, $buttonGradientFrom, $buttonGradientTo ) );*/
}
#quickbar-wrapper .quickbar ul li:hover {
/*color: $white;*/
opacity: 0.86;
}
/* end style */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment