diff --git a/index.html b/index.html index 76d1386..0bc620c 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,127 @@ - - 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:

+ +
+ +
+ +
+
+ + +
+
+ +
+
    +
  • Hola
    • +
  • Hi
    • +
  • Bonjour
    • +
  • Dzień Dobry!
    • +
+ +
    +
  • Uno
    • +
  • One
    • +
  • Un
    • +
  • jeden
    • +
+
+ +
+ -
-
- \ No newline at end of file diff --git a/skin.css b/skin.css index 1632a5c..ab3689e 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,86 @@ -.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 +.btn { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; +} + +.btn--primary { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; + background-color: #0554ba; + color: white; +} + +.btn--secondary { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; + background-color: #f7f6f5; + color: #5c5f68; +} + +.btn--large { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; + padding-left: 100px; + padding-right: 100px; + font-size: 1.2rem; +} + +.btn--extra-large { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; + padding-left: 140px; + padding-right: 140px; + font-size: 1.6rem; +} + +input { + border-radius: 4px; + min-height: 40px; + font-size: 1rem; + text-align: center; + border: 1px solid lightgrey; + display: block; + margin-bottom: 10px; + min-width: 300px; +} + +select { + border-radius: 4px; + font-size: 0.8rem; + text-align: center; + border: 1px solid transparent; + -webkit-appearance: menulist-button; + width: 100%; + max-width: 300px; + text-align: center; + height: 30px; + background-color: #f7f4f4; + box-shadow: 1px 1px 2px rgba(5, 84, 186, 0.3); +} + +.list--unordered-row { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.list--unordered-column { + display: flex; + flex-direction: column; + justify-content: space-around; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..e3ff452 --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.btn{border-radius:4px;font-size:1rem;padding:15px 65px;color:#0554ba;background-color:white}.btn--primary{border-radius:4px;font-size:1rem;padding:15px 65px;color:#0554ba;background-color:white;background-color:#0554ba;color:white}.btn--secondary{border-radius:4px;font-size:1rem;padding:15px 65px;color:#0554ba;background-color:white;background-color:#f7f6f5;color:#5c5f68}.btn--large{border-radius:4px;font-size:1rem;padding:15px 65px;color:#0554ba;background-color:white;padding-left:100px;padding-right:100px;font-size:1.2rem}.btn--extra-large{border-radius:4px;font-size:1rem;padding:15px 65px;color:#0554ba;background-color:white;padding-left:140px;padding-right:140px;font-size:1.6rem}input{border-radius:4px;min-height:40px;font-size:1rem;text-align:center;border:1px solid lightgrey;display:block;margin-bottom:10px;min-width:300px}select{border-radius:4px;font-size:0.8rem;text-align:center;border:1px solid transparent;-webkit-appearance:menulist-button;width:100%;max-width:300px;text-align:center;height:30px;background-color:#f7f4f4;box-shadow:1px 1px 2px rgba(5,84,186,0.3)}.list--unordered-row{display:flex;flex-direction:row;justify-content:space-around}.list--unordered-column{display:flex;flex-direction:column;justify-content:space-around} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..3d01d44 --- /dev/null +++ b/skin.scss @@ -0,0 +1,88 @@ +// Base button style +@mixin baseButton { + border-radius: 4px; + font-size: 1rem; + padding: 15px 65px; + color: #0554ba; + background-color: white; +} + +.btn { + @include baseButton; +} + +.btn--primary { + @include baseButton; + background-color: #0554ba; + color: white; +} + +.btn--secondary { + @include baseButton; + background-color: #f7f6f5; + color: #5c5f68; +} + +.btn--large { + @include baseButton; + padding-left: 100px; + padding-right: 100px; + font-size: 1.2rem; +} + +.btn--extra-large { + @include baseButton; + padding-left: 140px; + padding-right: 140px; + font-size: 1.6rem; +} + +//styles for a from input and dropdown select and a couple of more elements, +//ul horizontally and ul vertically + +@mixin inputComp { + border-radius: 4px; + min-height: 40px; + font-size: 1rem; + text-align: center; + border: 1px solid lightgrey; + display: block; + margin-bottom: 10px; + min-width: 300px; +} + +input { + @include inputComp; +} + +@mixin selectComp { + border-radius: 4px; + font-size: 0.8rem; + text-align: center; + border: 1px solid transparent; + -webkit-appearance: menulist-button; + width: 100%; + max-width: 300px; + text-align: center; + height: 30px; + background-color: #f7f4f4; + box-shadow: 1px 1px 2px rgba($color: #0554ba, $alpha: 0.3); +} + +select { + @include selectComp; +} + +@mixin listUnordered($flex-direction) { + display: flex; + flex-direction: $flex-direction; + justify-content: space-around; +} + +.list--unordered-row { + @include listUnordered(row); +} + +.list--unordered-column { + @include listUnordered(column); +}