mirror of
https://github.com/danbee/julep
synced 2025-03-04 08:59:10 +00:00
55 lines
1.2 KiB
SCSS
55 lines
1.2 KiB
SCSS
.tabbar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: #111;
|
|
text-align: center;
|
|
height: 3.5em;
|
|
padding: 0.15em 0.2em;
|
|
border-top: 1px solid #222;
|
|
@include linear-gradient(#444, #333);
|
|
@include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2));
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
li {
|
|
float: left;
|
|
padding: 0.1em;
|
|
height: 100%;
|
|
&:first-child a {
|
|
margin-left: 0;
|
|
}
|
|
a {
|
|
border-radius: 0.3em;
|
|
font-size: 0.7em;
|
|
height: 100%;
|
|
padding: 0.5em 0.4em 0.3em;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
display: block;
|
|
position: relative;
|
|
top: -0.1em;
|
|
&.selected {
|
|
top: 0;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
border: 1px solid black;
|
|
color: white;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3);
|
|
@include linear-gradient(#222, #333);
|
|
@include box-shadow(0 1px 1px rgba(255, 255, 255, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
|
|
}
|
|
&:before {
|
|
display: block;
|
|
font-size: 1.7em;
|
|
margin: 0.1em 0 0.2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin tabbar($buttons) {
|
|
@extend .tabbar;
|
|
li {
|
|
width: (100% / $buttons);
|
|
}
|
|
}
|