From f72918bbfe87b66f48f7bea513edb89f66360d91 Mon Sep 17 00:00:00 2001 From: brook Date: Wed, 18 Apr 2018 11:39:30 +0100 Subject: [PATCH 1/2] modified css file into sass --- index.html | 4 ++-- skin.css | 61 +++++++++++++++++++++++++++++++++++++++++----------- skin.min.css | 1 + skin.scss | 37 +++++++++++++++++++++++++++++++ 4 files changed, 88 insertions(+), 15 deletions(-) create mode 100644 skin.min.css create mode 100644 skin.scss diff --git a/index.html b/index.html index 76d1386..59f7c02 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..6e390e7 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,48 @@ -.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: #565656; +} + +button.btn--default { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--primary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #0025F5; + color: #fff; + border-radius: 3px; + font-size: 20px; +} + +button.btn--secondary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--large { + padding: 16px 100px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--extra-large { + padding: 22px 150px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..a093019 --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.highlight{background-color:#565656}button.btn--default{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--primary{padding:16px 62px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px}button.btn--secondary{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--large{padding:16px 100px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--extra-large{padding:22px 150px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..5ad2bd5 --- /dev/null +++ b/skin.scss @@ -0,0 +1,37 @@ +.highlight { + background-color: #565656; +} + + +$bright-blue: #0025F5; +$white: #fff; +$grey: #cbcbcb; + +@mixin btn($color, $background-color,$padding) { + padding: $padding; + border: 1px solid $grey ; + background:$background-color; + color:$color; + border-radius: 3px; + font-size: 20px; + +} + + +button.btn--default { + @include btn($bright-blue,$white,16px 62px) ; +} + +button.btn--primary { +@include btn($white,$bright-blue,16px 62px); +} +button.btn--secondary { +@include btn($bright-blue,$white,16px 62px); +} +button.btn--large { +@include btn($bright-blue,$white,16px 100px); +} +button.btn--extra-large { +@include btn($bright-blue,$white,22px 150px); +} + From c64aa7c8433faada476fb3f25a3c95a3dfabc7fb Mon Sep 17 00:00:00 2001 From: brook Date: Thu, 19 Apr 2018 09:54:51 +0100 Subject: [PATCH 2/2] form and select added --- index.html | 65 +++++++++++++++++++++++++++++-- skin.css | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++ skin.min.css | 2 +- skin.scss | 78 +++++++++++++++++++++++++++++++++++++ 4 files changed, 248 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 59f7c02..997b93f 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,33 @@

CSS Components

Button

A button is most typically used to trigger a custom JavaScript action (e.g. fetch new results, open a dialog or expand a menu).

-

A button may also be used, without JavaScript, to submit or reset a form.

+

A button may + + Bikes for Refugees | Scotland + + + + + + + + + + + als + + Bikes for Refugees | Scotland + + + + + + + + + + + o be used, without JavaScript, to submit or reset a form.

Default Button

Use the btn class on a button element to create the default button.

@@ -66,15 +92,48 @@

Extra-Large Button

Use the btn--extra-large size modifier to create an extra large button.

This means that you will use both btn and btn--extra-large classes.

-

It currently looks like this:

+ <
    +
  • Info
    • +
  • more
    • +

    It currently looks like this:

It should eventually look like this:

+
+
+ Firstname: + +
+ + + +
+
+
+ + +
- + + \ No newline at end of file diff --git a/skin.css b/skin.css index 6e390e7..0422e70 100644 --- a/skin.css +++ b/skin.css @@ -46,3 +46,110 @@ button.btn--extra-large { border-radius: 3px; font-size: 20px; } + +.highlight { + background-color: #565656; +} + +button.btn--default { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +.highlight { + background-color: #565656; +} + +button.btn--default { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--primary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #0025F5; + color: #fff; + border-radius: 3px; + font-size: 20px; +} + +button.btn--secondary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--large { + padding: 16px 100px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--extra-large { + padding: 22px 150px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--primary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #0025F5; + color: #fff; + border-radius: 3px; + font-size: 20px; +} + +button.btn--secondary { + padding: 16px 62px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--large { + padding: 16px 100px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--extra-large { + padding: 22px 150px; + border: 1px solid #cbcbcb; + background: #fff; + color: #0025F5; + border-radius: 3px; + font-size: 20px; +} + +button.btn--full-width { + padding: 6px 100px; + border: 1px solid #cbcbcb; + background: #0025F5; + color: #fff; + border-radius: 3px; + font-size: 20px; +} diff --git a/skin.min.css b/skin.min.css index a093019..0be4993 100644 --- a/skin.min.css +++ b/skin.min.css @@ -1 +1 @@ -.highlight{background-color:#565656}button.btn--default{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--primary{padding:16px 62px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px}button.btn--secondary{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--large{padding:16px 100px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--extra-large{padding:22px 150px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px} +.highlight{background-color:#565656}button.btn--default{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--primary{padding:16px 62px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px}button.btn--secondary{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--large{padding:16px 100px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--extra-large{padding:22px 150px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}.highlight{background-color:#565656}button.btn--default{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}.highlight{background-color:#565656}button.btn--default{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--primary{padding:16px 62px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px}button.btn--secondary{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--large{padding:16px 100px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--extra-large{padding:22px 150px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--primary{padding:16px 62px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px}button.btn--secondary{padding:16px 62px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--large{padding:16px 100px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--extra-large{padding:22px 150px;border:1px solid #cbcbcb;background:#fff;color:#0025F5;border-radius:3px;font-size:20px}button.btn--full-width{padding:6px 100px;border:1px solid #cbcbcb;background:#0025F5;color:#fff;border-radius:3px;font-size:20px} diff --git a/skin.scss b/skin.scss index 5ad2bd5..c35145e 100644 --- a/skin.scss +++ b/skin.scss @@ -35,3 +35,81 @@ button.btn--extra-large { @include btn($bright-blue,$white,22px 150px); } +.highlight { + background-color: #565656; +} + + +$bright-blue: #0025F5; +$white: #fff; +$grey: #cbcbcb; + +@mixin btn($color, $background-color,$padding) { + padding: $padding; + border: 1px solid $grey ; + background:$background-color; + color:$color; + border-radius: 3px; + font-size: 20px; + +} + + +button.btn--default { + @include btn($bright-blue,$white,16px 62px) ; +}.highlight { + background-color: #565656; +} + + +$bright-blue: #0025F5; +$white: #fff; +$grey: #cbcbcb; + +@mixin btn($color, $background-color,$padding) { + padding: $padding; + border: 1px solid $grey ; + background:$background-color; + color:$color; + border-radius: 3px; + font-size: 20px; + +} + + +button.btn--default { + @include btn($bright-blue,$white,16px 62px) ; +} + +button.btn--primary { +@include btn($white,$bright-blue,16px 62px); +} +button.btn--secondary { +@include btn($bright-blue,$white,16px 62px); +} +button.btn--large { +@include btn($bright-blue,$white,16px 100px); +} +button.btn--extra-large { +@include btn($bright-blue,$white,22px 150px); +} + + + +button.btn--primary { +@include btn($white,$bright-blue,16px 62px); +} +button.btn--secondary { +@include btn($bright-blue,$white,16px 62px); +} +button.btn--large { +@include btn($bright-blue,$white,16px 100px); +} +button.btn--extra-large { +@include btn($bright-blue,$white,22px 150px); +} +button.btn--full-width { +@include btn($white,$bright-blue,6px 100px); +} + +