diff --git a/index.html b/index.html index 76d1386..f5f4519 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,98 @@ - - CSS skin - - - - -
-
-

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.

-

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:

- -
+ + CSS skin + + + -

Primary Button

-

Use the btn--primary hierarchy modifier to create a primary button.

-

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

-
-

It currently looks like this:

- -
-
-

It should eventually look like this:

- -
+ +
+
+

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.

-

Secondary Button

-

Use the btn--secondary hierarchy modifier to create a secondary button.

-

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

-
-

It currently looks like this:

- -
-
-

It should eventually look like this:

- -
+

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:

+ +
-

Large Button

-

Use the btn--large size modifier to create a large button.

-

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

-
-

It currently looks like this:

- -
-
-

It should eventually look like this:

- -
+

Primary Button

+

Use the + btn--primary hierarchy modifier to create a primary button.

+

This means that you will use both + btn and + btn--primary classes.

+
+

It currently looks like this:

+ +
+
+

It should eventually look like this:

+ +
-

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:

- -
-
-

It should eventually look like this:

- -
+

Secondary Button

+

Use the + btn--secondary hierarchy modifier to create a secondary button.

+

This means that you will use both + btn and + btn--secondary classes.

+
+

It currently looks like this:

+ +
+
+

It should eventually look like this:

+ +
+ +

Large Button

+

Use the + btn--large size modifier to create a large button.

+

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

+
+

It currently looks like this:

+ +
+
+

It should eventually look like this:

+ +
+ +

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:

+ +
+
+

It should eventually look like this:

+ +
+ +
+
+ -
-
- \ No newline at end of file diff --git a/skin.css b/skin.css index 1632a5c..26eabaa 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,65 @@ -.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 +.demo .btn { + font-size: 1rem; + padding: 1rem; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: #fff; + color: #288ad6; + width: 11rem; +} + +.demo .btn--primary { + font-size: 1rem; + padding: 1rem; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: #015494; + color: #fff; + width: 11rem; +} + +.demo .btn--secondary { + font-size: 1rem; + padding: 1rem; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: #f8f5f5; + color: #7a7a7a; + width: 11rem; + border-color: #575555; +} + +.demo .btn--large { + font-size: 1.4rem; + padding: 1.3rem; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: #fff; + color: #288ad6; + width: 17rem; +} + +.demo .btn--extra-large { + font-size: 1.6rem; + padding: 1.5rem; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: #fff; + color: #288ad6; + width: 22rem; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..9766f96 --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.demo .btn{font-size:1rem;padding:1rem;border-radius:5px;border-style:solid;border-width:1px;font-weight:normal;line-height:1.15;background:#fff;color:#288ad6;width:11rem}.demo .btn--primary{font-size:1rem;padding:1rem;border-radius:5px;border-style:solid;border-width:1px;font-weight:normal;line-height:1.15;background:#015494;color:#fff;width:11rem}.demo .btn--secondary{font-size:1rem;padding:1rem;border-radius:5px;border-style:solid;border-width:1px;font-weight:normal;line-height:1.15;background:#f8f5f5;color:#7a7a7a;width:11rem;border-color:#575555}.demo .btn--large{font-size:1.4rem;padding:1.3rem;border-radius:5px;border-style:solid;border-width:1px;font-weight:normal;line-height:1.15;background:#fff;color:#288ad6;width:17rem}.demo .btn--extra-large{font-size:1.6rem;padding:1.5rem;border-radius:5px;border-style:solid;border-width:1px;font-weight:normal;line-height:1.15;background:#fff;color:#288ad6;width:22rem} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..a7d7d0e --- /dev/null +++ b/skin.scss @@ -0,0 +1,47 @@ +@mixin btn__style( + $bck-color, + $txt-color, + $btn-width, + $btn-padding, + $btn-font-size +) { + font-size: $btn-font-size; + padding: $btn-padding; + border-radius: 5px; + border-style: solid; + border-width: 1px; + font-weight: normal; + line-height: 1.15; + background: $bck-color; + color: $txt-color; + width: $btn-width; +} + +.demo { + .btn { + @include btn__style(#fff, #288ad6, 11rem, 1rem, 1rem); + } + + .btn--primary { + @include btn__style(#015494, #fff, 11rem, 1rem, 1rem); + } + + .btn--secondary { + @include btn__style( + rgb(248, 245, 245), + rgb(122, 122, 122), + 11rem, + 1rem, + 1rem + ); + border-color: rgb(87, 85, 85); + } + + .btn--large { + @include btn__style(#fff, #288ad6, 17rem, 1.3rem, 1.4rem); + } + + .btn--extra-large { + @include btn__style(#fff, #288ad6, 22rem, 1.5rem, 1.6rem); + } +}