From 636c866d85a8a9be3718a0823a4adc253e2ef3ca Mon Sep 17 00:00:00 2001 From: Steve Date: Fri, 20 Apr 2018 14:15:02 +0100 Subject: [PATCH 1/2] Steve changed the buttons style, finished the homework and submitted for review. --- index.html | 4 +-- skin.css | 84 ++++++++++++++++++++++++++++++++++++++++++++-------- skin.min.css | 1 + skin.scss | 50 +++++++++++++++++++++++++++++++ 4 files changed, 124 insertions(+), 15 deletions(-) create mode 100644 skin.min.css create mode 100644 skin.scss diff --git a/index.html b/index.html index 76d1386..4f2fb58 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ CSS skin - +
@@ -19,7 +19,7 @@

Default Button

On hover, the text in the button should not be underlined.

It currently looks like this:

- +

It should eventually look like this:

diff --git a/skin.css b/skin.css index 1632a5c..8807323 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,71 @@ -.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 +.button { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.button:hover { + cursor: default; +} + +.button--default { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.button--default:hover { + cursor: default; +} + +.btn--primary { + color: #ffffff; + background-color: #224C8B; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.btn--primary:hover { + cursor: default; +} + +.btn--secondary { + color: #B8B8B8; + background-color: #fbfbfb; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.btn--secondary:hover { + cursor: default; +} + +.btn--large { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; + width: 270px; + padding: 25px; +} + +.btn--large:hover { + cursor: default; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..c13aa6a --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.button{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button:hover{cursor:default}.button--default{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button--default:hover{cursor:default}.btn--primary{color:#fff;background-color:#224C8B;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--primary:hover{cursor:default}.btn--secondary{color:#B8B8B8;background-color:#fbfbfb;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--secondary:hover{cursor:default}.btn--large{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray;width:270px;padding:25px}.btn--large:hover{cursor:default} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..5168b31 --- /dev/null +++ b/skin.scss @@ -0,0 +1,50 @@ +$bright-orange: #ffcc66; +$orange: #d58512; +$red: #cc0000; +$white: #ffffff; +$thickness: 4px; +$background-color: #333; +$blue: #224C8B; +$lightgray: rgb(251, 251, 251); +$gray: #B8B8B8; +$width-large: 270px; +$padding-large:25px; + +@mixin btn ($color, $background-color, $border-color) { + color: $color; + background-color: $background-color; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; + &:hover{ + cursor: default; + } + +} +%width-large { + width: $width-large; + + } +%padding-large { + padding: $padding-large; +} + +.button { + @include btn($blue, $white, $gray); +} +.button--default { + @include btn($blue, $white, $gray) +} +.btn--primary { + @include btn($white, $blue, $blue) +} +.btn--secondary { + @include btn($gray,$lightgray, $gray) +} +.btn--large { + @include btn($blue, $white, $gray); + width: $width-large; + padding: $padding-large; +} From f2c48637f7de1c5cd1eb272d47aa0497c0325e45 Mon Sep 17 00:00:00 2001 From: Steve Date: Fri, 20 Apr 2018 14:46:35 +0100 Subject: [PATCH 2/2] Steve amend the homework and done the last extra large button for review. --- skin.css | 8 ++++++++ skin.min.css | 2 +- skin.scss | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/skin.css b/skin.css index 8807323..99d2449 100644 --- a/skin.css +++ b/skin.css @@ -1,3 +1,7 @@ +.btn--extra-large { + width: 351px; +} + .button { color: #224C8B; background-color: #ffffff; @@ -69,3 +73,7 @@ .btn--large:hover { cursor: default; } + +.btn--extra-large { + padding: 25px; +} diff --git a/skin.min.css b/skin.min.css index c13aa6a..66fd4d4 100644 --- a/skin.min.css +++ b/skin.min.css @@ -1 +1 @@ -.button{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button:hover{cursor:default}.button--default{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button--default:hover{cursor:default}.btn--primary{color:#fff;background-color:#224C8B;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--primary:hover{cursor:default}.btn--secondary{color:#B8B8B8;background-color:#fbfbfb;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--secondary:hover{cursor:default}.btn--large{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray;width:270px;padding:25px}.btn--large:hover{cursor:default} +.btn--extra-large{width:351px}.button{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button:hover{cursor:default}.button--default{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button--default:hover{cursor:default}.btn--primary{color:#fff;background-color:#224C8B;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--primary:hover{cursor:default}.btn--secondary{color:#B8B8B8;background-color:#fbfbfb;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--secondary:hover{cursor:default}.btn--large{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray;width:270px;padding:25px}.btn--large:hover{cursor:default}.btn--extra-large{padding:25px} diff --git a/skin.scss b/skin.scss index 5168b31..dfa1f83 100644 --- a/skin.scss +++ b/skin.scss @@ -8,6 +8,7 @@ $blue: #224C8B; $lightgray: rgb(251, 251, 251); $gray: #B8B8B8; $width-large: 270px; +$width-extra-large: $width-large * 1.30; $padding-large:25px; @mixin btn ($color, $background-color, $border-color) { @@ -30,6 +31,9 @@ $padding-large:25px; %padding-large { padding: $padding-large; } +%width-extra-large { + width: $width-extra-large; +} .button { @include btn($blue, $white, $gray); @@ -48,3 +52,7 @@ $padding-large:25px; width: $width-large; padding: $padding-large; } +.btn--extra-large { + @extend %width-extra-large; + padding: $padding-large; +}