diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d55fb2d Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index 76d1386..f3e0205 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ CSS skin - +
@@ -73,8 +73,61 @@

Extra-Large Button

It should eventually look like this:

+
+

Animated button

+ +
+ + + +
+

Navigation

+
+ + +
+
+
+ +

input field:

+ +
+ + + + + + +
+ +
+ + \ No newline at end of file diff --git a/skin.css b/skin.css index 1632a5c..191de0a 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,97 @@ -.highlight { - background-color: #ddd; -} - -button.btn { - border-radius: 3px; - border-style: solid; - border-width: 1px; - font-weight: normal; - line-height: 1.15; - text-align: center; - vertical-align: middle; -} \ No newline at end of file +.highlight { + background-color: #ddd; +} + +.btn { + color: #2B59C3; + background-color: transparent; + border-radius: 4px; + width: 170px; + line-height: 2.5; + font-size: 18px; + font-weight: lighter; + border-style: solid; + border-width: 1px; + text-align: center; + vertical-align: middle; +} + +.btn--primary { + color: white; + background-color: #2B59C3; +} + +.btn--secondary { + background-color: whitesmoke; + color: #696969; + border-color: darkgrey; +} + +.btn--large { + width: 260px; + font-size: 20px; + font-weight: 300; + line-height: 2.7; +} + +.btn--extra-large { + width: 350px; + font-weight: 300; + line-height: 2.8; + font-size: 23px; +} + +.btn--animated:active { + background-color: #FFEECF; + box-shadow: 0 5px #666; + transform: translateY(4px); +} + +.main { + width: 100%; +} + +ul { + margin: 0px; + padding: 0px; + list-style: none; +} + +ul li { + float: left; + background-color: black; + height: 40px; + width: 200px; + text-align: center; + line-height: 40px; + font-size: 20px; + margin-right: 2px; +} + +ul li a { + text-decoration: none; + color: white; + display: block; +} + +ul li a:hover { + background-color: green; +} + +ul li ul li { + display: none; +} + +ul li:hover ul li { + display: block; +} + +input { + background-color: #FBCAEF; + padding: 12px 20px; + margin: 8px 0; + width: 20%; + border: 1px solid #555; + font-size: 14px; + display: block; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..3bc7463 --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.highlight{background-color:#ddd}.btn{color:#2B59C3;background-color:transparent;border-radius:4px;width:170px;line-height:2.5;font-size:18px;font-weight:lighter;border-style:solid;border-width:1px;text-align:center;vertical-align:middle}.btn--primary{color:white;background-color:#2B59C3}.btn--secondary{background-color:whitesmoke;color:#696969;border-color:darkgrey}.btn--large{width:260px;font-size:20px;font-weight:300;line-height:2.7}.btn--extra-large{width:350px;font-weight:300;line-height:2.8;font-size:23px}.btn--animated:active{background-color:#FFEECF;box-shadow:0 5px #666;transform:translateY(4px)}.main{width:100%}ul{margin:0px;padding:0px;list-style:none}ul li{float:left;background-color:black;height:40px;width:200px;text-align:center;line-height:40px;font-size:20px;margin-right:2px}ul li a{text-decoration:none;color:white;display:block}ul li a:hover{background-color:green}ul li ul li{display:none}ul li:hover ul li{display:block}input{background-color:#FBCAEF;padding:12px 20px;margin:8px 0;width:20%;border:1px solid #555;font-size:14px;display:block} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..8eb445b --- /dev/null +++ b/skin.scss @@ -0,0 +1,143 @@ +.highlight { + background-color: #ddd; +} +//...............the main button with mixin.................... +$color:#2B59C3; +$radius:4px; +$width:170px; +$line-height:2.5; +$font-size:18px; +$font-weight:lighter; + +@mixin btn ( $color, $background-color, $radius, $width, $line-height,$font-size, $font-weight) { + color:$color; + background-color: $background-color; + border-radius:$radius; + width:$width; + line-height: $line-height; + font-size: $font-size; + font-weight:$font-weight; +} + + +.btn { + @include btn($color,transparent, $radius,$width,$line-height,$font-size,$font-weight); + + border-style: solid; + border-width: 1px; + + text-align:center; + vertical-align:middle; + +//..............primary button (modifier).............. + +&--primary{ +color:white; +background-color:$color; + +} +//..............secondary button (modifier).............. + +&--secondary{ + background-color:whitesmoke; + color: #696969; + border-color: darkgrey; + +} +//..............large button (modifier)..................... + +&--large{ + width:260px; + font-size: 20px; + font-weight:300; + line-height: 2.7; +} + +//................extra large button (modifier)............... + +&--extra-large{ + width:350px; + font-weight:300; + line-height: 2.8; + font-size: 23px; + +} + +//.................active button + +&--animated:active{ + background-color: #FFEECF; + box-shadow: 0 5px #666; + transform: translateY(4px); + + +} + +} +//................Navigation...................... +.main{ + width:100%; + +} + +ul{ + margin:0px; + padding: 0px; + list-style: none; +} + +ul li{ + float: left; + background-color:black; + height: 40px; + width: 200px; + text-align: center; + line-height: 40px; + font-size: 20px; + margin-right:2px; +} + +ul li a{ + text-decoration: none; + color:white; + display:block; +} + +ul li a:hover{ + background-color: green; +} + +ul li ul li{ + display:none; +} + +ul li:hover ul li{ + display: block; +} +//...............input.................. + + +$padding:12px 20px; +$width:20%; +$margin: 8px 0; +$border: 1px solid #555; +$background-color:#FBCAEF; +$font-size:14px; + + +@mixin input ( $background-color, $width,$padding, $margin,$border,$font-size) { + + background-color: $background-color; + padding: $padding; + margin:$margin; + width:$width; + border:$border; + font-size:$font-size; + +} +input { + @include input( $background-color, $width,$padding, $margin,$border,$font-size); + +display:block; +} +