danbarber/julep
1
0
Fork 0
mirror of https://github.com/danbee/julep synced 2025-03-04 08:59:10 +00:00
Code Issues Releases Wiki Activity

Add tabbar, buttons and lists. Fix loader image.

Browse Source
This commit is contained in:
Dan Barber 2013-02-11 17:15:28 +00:00
parent d2d735cd17
commit 277a211646
7 changed files with 102 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_julep.scss
View File

@ -6,3 +6,6 @@
@import "includes/loader";
@import "includes/header";
@import "includes/tabbar";
@import "includes/list";
@import "includes/buttons";

BIN
images/loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

28
includes/_buttons.scss Normal file
View File

@ -0,0 +1,28 @@
.button {
border-radius: 0.3em;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4));
padding: 0.3em 0.7em 0.4em;
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
&:active {
padding: 0.4em 0.7em 0.3em;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
}
}
@mixin button($color) {
border: {
style: solid;
width: 1px;
color: darken($color, 10%) darken($color, 25%) darken($color, 40%);
};
background: $color;
@include linear-gradient(lighten($color, 10%), darken($color, 10%));
@extend .button;
&:hover, &:focus {
@include linear-gradient(lighten($color, 15%), darken($color, 5%));
}
&:active {
@include linear-gradient($color, darken($color, 10%));
}
}

2
includes/_header.scss
View File

@ -16,6 +16,6 @@
@mixin header($color) {
background: $color;
border-bottom: 1px solid darken($color, 15%);
@include linear-gradient(lighten($color, 40%), darken($color, 5%));
@include linear-gradient(lighten($color, 30%), darken($color, 5%));
@extend .header;
}

23
includes/_list.scss Normal file
View File

@ -0,0 +1,23 @@
.list {
list-style: none;
padding: 0;
li {
a {
background: #ffffff; /* Old browsers */
@include linear-gradient(white, #f1f1f1);
text-shadow: 0 2px 2px white;
border: {
style: solid;
width: 1px 0;
color: #ffffff white #cccccc;
}
display: block;
padding: 0.7em 1em;
text-decoration: none;
}
}
}
@mixin list() {
@extend .list;
}

3
includes/_loader.scss
View File

@ -5,7 +5,8 @@
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
background: black url(../images/loader.gif) center center no-repeat;
background: black url(julep/images/loader.gif) center center no-repeat;
background-size: 36px;
border-radius: 26px;
opacity: 0.7;
display: none;

45
includes/_tabbar.scss Normal file
View File

@ -0,0 +1,45 @@
.tabbar {
position: fixed;
bottom: 0;
width: 100%;
background: #111;
text-align: center;
height: 3.5em;
padding-top: 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));
li {
display: inline-block;
width: 49.2%;
height: 3.0em;
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 {
@extend .tabbar;
}