diff --git a/index.html b/index.html index 76d1386..997b93f 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ CSS skin - +
@@ -12,14 +12,40 @@

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.

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

It currently looks like this:

- +

It should eventually look like this:

@@ -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 1632a5c..0422e70 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,155 @@ -.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; +} + +.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 new file mode 100644 index 0000000..0be4993 --- /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}.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 new file mode 100644 index 0000000..c35145e --- /dev/null +++ b/skin.scss @@ -0,0 +1,115 @@ +.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); +} + +.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); +} + +