From 79edd968363eda4c188605efd6b49794e3d96e91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Fri, 9 Jul 2021 19:24:02 +0200 Subject: [PATCH] adding --- dist/index.html | 54 ++-- dist/plain-ui.css | 477 +++++++++++++++++++++--------- src/scss/_functions.scss | 10 +- src/scss/_helpers.scss | 0 src/scss/_mixins.scss | 12 + src/scss/_variables.scss | 70 ++--- src/scss/components/_badge.scss | 7 +- src/scss/components/_bar.scss | 8 +- src/scss/components/_button.scss | 3 + src/scss/components/_content.scss | 4 +- src/scss/components/_media.scss | 49 ++- src/scss/components/_table.scss | 14 +- src/scss/components/_tabs.scss | 8 +- src/scss/core/_normalize.scss | 11 +- src/scss/helpers/_colors.scss | 2 +- src/scss/helpers/_core.scss | 112 ++----- src/scss/helpers/_sizing.scss | 2 + src/scss/helpers/_spacing.scss | 18 +- src/scss/helpers/_typography.scss | 92 ++++++ src/scss/plain-ui.scss | 4 +- 20 files changed, 604 insertions(+), 353 deletions(-) create mode 100644 src/scss/_helpers.scss create mode 100644 src/scss/helpers/_typography.scss diff --git a/dist/index.html b/dist/index.html index cebb326..e6ce802 100644 --- a/dist/index.html +++ b/dist/index.html @@ -28,12 +28,11 @@
-

- Plain UI is a simple UI Framework. It uses strong Utility Classes and has a few Components. + Plain UI is a simple UI Framework. It uses strong Utility Classes and has a few Components.

Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. @@ -42,13 +41,28 @@ The Basic Idea was a quick

+
+ + + + + + +
+
+
-

Heading

+

Heading

+

Heading 1

Heading 2

Heading 3

@@ -57,32 +71,14 @@
Heading 6
+
+ +
-

- Plain UI is a simple UI Framework. It uses strong Utility Classes and has a few Components. -

-

- Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. -

-

- The Basic Idea was a quick -

- -
- - - - - - -
+

Components

+
-

Components

Buttons

-
- -
-
- -
*
* - * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui * */ .bar { display: flex; min-height: 2.8em; - background-color: #585858; - color: var(--white); + background-color: var(--primary); + color: var(--text-secondary); } .bar .icon { font-size: 1.5rem; @@ -4048,19 +4105,23 @@ svg.field-choice__checked { * */ .border, .badge { - border: 1px solid #585858 !important; + border: 1px solid var(--primary); } -.border-round, .badge { +.border-round { border-radius: 2px; } -.borderless { - border: 0 !important; +.border-0 { + border: 0; } -.radiusless { - border-radius: 0 !important; +.radius-0 { + border-radius: 0; +} + +.round { + border-radius: 50%; } /** @@ -4108,93 +4169,44 @@ svg.field-choice__checked { z-index: 10; } -/** - * - * - */ -.round { - border-radius: 50%; -} - -/** - * typography - * - * - */ -.left { - text-align: left !important; -} - -.right { - text-align: right !important; +.z-index-11 { + z-index: 11; } -.center { - text-align: center !important; +.z-index-12 { + z-index: 12; } -.justify { - text-align: justify !important; +.z-index-13 { + z-index: 13; } -.uppercase { - text-transform: uppercase !important; +.z-index-14 { + z-index: 14; } -.lowercase { - text-transform: lowercase !important; +.z-index-15 { + z-index: 15; } -.crossed { - text-decoration: line-through !important; +.z-index-16 { + z-index: 16; } -.underline { - text-decoration: underline !important; +.z-index-17 { + z-index: 17; } -.capitalize { - text-transform: capitalize !important; +.z-index-18 { + z-index: 18; } -.italic { - font-style: italic !important; -} - -.light { - font-weight: lighter !important; -} - -.normal { - font-weight: normal !important; -} - -.medium { - font-weight: medium !important; -} - -.bold { - font-weight: bolder !important; -} - -.t-size-default { - font-size: 1rem !important; -} - -.t-size-small { - font-size: 0.75rem !important; -} - -.t-size-medium { - font-size: 1.5rem !important; -} - -.t-size-large { - font-size: 2rem !important; +.z-index-19 { + z-index: 19; } -.t-size-big { - font-size: 3rem !important; +.z-index-20 { + z-index: 20; } /** @@ -4260,10 +4272,6 @@ svg.field-choice__checked { vertical-align: baseline; } -.marginless { - margin: 0 !important; -} - /** * * @@ -4305,6 +4313,14 @@ svg.field-choice__checked { height: 1px; } +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + .w-col-1 { width: 8.3333333333%; } @@ -4802,6 +4818,20 @@ svg.field-choice__checked { } /** + * + * + * + */ +.marginless { + margin: 0; +} + +.paddingless { + padding: 0; +} + +/** + * spacing for single padding or margin * * */ @@ -7196,15 +7226,15 @@ svg.field-choice__checked { * * */ -.text-color-primary { +.color-primary { color: var(--primary); } -.text-color-success { +.color-success { color: var(--success); } -.text-color-white { +.color-white { color: var(--white); } @@ -7244,59 +7274,238 @@ svg.field-choice__checked { background-color: var(--white); } -.figure { - margin: 0; - display: inline-block; - line-height: 0; - border: 1px solid #585858; - border-radius: 2px; - overflow: hidden; +/** + * typography + * + * + */ +.left { + text-align: left; } -.figure__caption { - padding: 0.75em 1.1em; - font-size: 0.7rem; - background: #585858; - line-height: 1.618; - margin: 0; - color: white; + +.right { + text-align: right; } -.figure img.media { - border: 0; + +.center { + text-align: center; } -img.media { - border-radius: 2px; - border: 1px solid #585858; - width: 100%; - height: auto; +.justify { + text-align: justify; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.crossed { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.light { + font-weight: lighter; +} + +.normal { + font-weight: normal; +} + +.medium { + font-weight: medium; } +.bold { + font-weight: bolder; +} + +.size-default { + font-size: 1rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-default { + font-size: 1rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-default { + font-size: 1rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-default { + font-size: 1rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-default { + font-size: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-default { + font-size: 1rem; + } +} +.size-small { + font-size: 0.75rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-small { + font-size: 0.75rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-small { + font-size: 0.75rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-small { + font-size: 0.75rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-small { + font-size: 0.75rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-small { + font-size: 0.75rem; + } +} +.size-medium { + font-size: 1.5rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-medium { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-medium { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-medium { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-medium { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-medium { + font-size: 1.5rem; + } +} +.size-large { + font-size: 2rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-large { + font-size: 2rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-large { + font-size: 2rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-large { + font-size: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-large { + font-size: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-large { + font-size: 2rem; + } +} +.size-big { + font-size: 3rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-big { + font-size: 3rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-big { + font-size: 3rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-big { + font-size: 3rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-big { + font-size: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-big { + font-size: 3rem; + } +} .table { width: 100%; - border: 1px solid #e4e4e4; - background: white; + border: 1px solid #cacaca; + background: var(--white); } .table--striped tr:nth-child(even) { - background-color: white; + background-color: #fdfdfd; } .table--scroll { overflow-x: auto; } .table td { - color: #585858; + color: var(--text); } .table td, .table th { text-align: left; - border-bottom: 1px solid #e4e4e4; + border-bottom: 1px solid #cacaca; padding: 0.5em 1.25em; } .table th { color: white; - background-color: #585858; + background-color: #3e3e3e; } .table tr:hover { - background-color: #717171; + background-color: #585858; } .table tr:hover td { color: white; @@ -7336,8 +7545,8 @@ img.media { background-color: white; transition: background-color 0.1s; background-color: white; - color: #585858; - border: 1px solid #585858; + color: var(--text); + border: 1px solid var(--primary); border-bottom-width: 0; width: 100%; } @@ -7351,9 +7560,9 @@ img.media { } .tabs__item:hover, .tabs__item--selected { cursor: pointer; - background-color: #717171; + background-color: var(--primary-active); color: white; - border-color: #717171; + border-color: var(--primary-active); } .tabs__item:last-child { border-bottom-width: 1px; diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss index da4003b..2bf0f0c 100644 --- a/src/scss/_functions.scss +++ b/src/scss/_functions.scss @@ -16,7 +16,8 @@ * @return {number} * */ -@function stripUnit($value) { +@function stripUnit($value) +{ @return $value / ($value * 0 + 1); } @@ -28,8 +29,8 @@ * @return {boolean|unit} * */ -@function getDefault($map) { - +@function getDefault($map) +{ $default: false; @if map-has-key($map, 'default') { @@ -49,6 +50,7 @@ * @return {float} * */ -@function factor($x) { +@function factor($x) +{ @return ($x * $x) / 2; } \ No newline at end of file diff --git a/src/scss/_helpers.scss b/src/scss/_helpers.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 690c9c1..0e7ab2b 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -154,6 +154,18 @@ } } +@mixin media-breakpoints($property, $breakpoints, $important: false) { + @each $breakpoint, $value in $breakpoints { + @media only screen and (min-width: $breakpoint) { + @if $important == false { + #{$property}: $value; + } @else { + #{$property}: $value !important; + } + } + } +} + /** * Set property and his value with an factor for each Breakpoint diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index ab063b2..66e1d3c 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -27,7 +27,6 @@ $plain-ui__xlg: 1600px !default; */ $plain-ui__direction: ltr !default; -$plain-ui__golden-ratio: 1.618 !default; $plain-ui__font-family: 'IBM Plex Mono', sans-serif !default; $plain-ui__font-weight: normal !default; @@ -46,7 +45,7 @@ $plain-ui__font-sizes: ( $plain-ui__line-height: 1.618; $plain-ui__line-height__breakpoints: ( - $plain-ui__md: $plain-ui__golden-ratio + $plain-ui__md: 1.8 ) !default; @@ -57,22 +56,23 @@ $plain-ui__line-height__breakpoints: ( */ $plain-ui__primary: #3e3e3e !default; -$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !default; -$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default; -$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default; - +$plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default; $plain-ui__secondary: #b3b2af !default; -$plain-ui__success-light: #64ac64 !default; + +$plain-ui__success: #64ac64 !default; +$plain-ui__success-light: lighten($plain-ui__success, 20%) !default; $plain-ui__warning: #f0ad4e !default; +$plain-ui__warning-light: lighten($plain-ui__warning, 20%) !default; $plain-ui__danger: #d95959 !default; -$plain-ui__danger-light: lighten($plain-ui__danger, 20%); +$plain-ui__danger-light: lighten($plain-ui__danger, 20%) !default; $plain-ui__info: #0090d4 !default; +$plain-ui__info-light: lighten($plain-ui__info, 20%) !default; -$plain-ui__background-light: #f9f9f9 !default; -$plain-ui__text-light: #363636 !default; -$plain-ui__border-light: #dfdfdf !default; - -$plain-ui__link-light: #fff !default; +$plain-ui__background: #f9f9f9 !default; +$plain-ui__text: #363636 !default; +$plain-ui__text-secondary: #ffffff !default; +$plain-ui__border: #dfdfdf !default; +$plain-ui__link: #fff !default; $plain-ui__colors: ( 'primary' : --primary, @@ -81,45 +81,45 @@ $plain-ui__colors: ( ) !default; :root { - --primary: #{$plain-ui__primary-light}; - --primary-light: #{$plain-ui__primary-light}; - --primary-active: #{$plain-ui__primary-light-active}; - --primary-dark: #{$plain-ui__primary-light-dark}; - --link: #{$plain-ui__primary-light}; - --link-hover: #{$plain-ui__danger-light}; + --primary: #{$plain-ui__primary}; + --primary-active: #{$plain-ui__primary-active}; + --link: #{$plain-ui__primary}; + --link-hover: #{$plain-ui__danger}; --danger: #{$plain-ui__danger}; - --danger-light: #{$plain-ui__danger-light}; - --success: #{$plain-ui__success-light}; + --danger-light: #{$plain-ui__danger}; + --success: #{$plain-ui__success}; --white: #ffffff; - --black: #000000; - --text: #{$plain-ui__text-light}; - --background: #{$plain-ui__background-light}; - --border: #{$plain-ui__border-light}; + --black: #212121; + --text: #{$plain-ui__text}; + --text-secondary: #{$plain-ui__text-secondary}; + --background: #{$plain-ui__background}; + --border: #{$plain-ui__border}; } /** - * padding & margin + * margin * */ $plain-ui__margin: 0 0 1rem !default; $plain-ui__margin-breakpoints: ( - $plain-ui__md: 0 0 1.5rem + $plain-ui__md: 0 0 0.8rem ) !default; -$plain-ui__padding: 5px 12px !default; +/** + * padding + * + */ + +$plain-ui__padding: 0.5rem 1rem !default; $plain-ui__padding-breakpoints: ( - $plain-ui__md: 10px 17px + $plain-ui__md: 0.25rem 0.75rem ) !default; - /** - * z-index + * border * */ -$plain-ui__z-index__modal: 1000 !default; -$plain-ui__z-index__overlay: 999 !default; - $plain-ui__border-radius: 2px; -$plain-ui__border: 1px solid $plain-ui__primary-light; \ No newline at end of file +$plain-ui__border: 1px solid var(--primary); \ No newline at end of file diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index 8a916f7..0ff3d68 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -5,7 +5,7 @@ * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://github.com/tentakelfabrik/plain-ui * */ @@ -16,16 +16,15 @@ color: var(--white); font-size: 0.85rem; - padding: 0.4em 0.8em; + padding: 0.4rem 0.8rem; @extend .border; - @extend .border-round; &--round { display: inline-flex; justify-content: center; border-radius: 50%; - width: 2.5em; + width: 2.8em; } } \ No newline at end of file diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 001c2fc..b3b504c 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -8,7 +8,9 @@ *
* * - * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui * */ @@ -16,8 +18,8 @@ display: flex; min-height: 2.8em; - background-color: $plain-ui__primary-light; - color: var(--white); + background-color: var(--primary); + color: var(--text-secondary); .icon { font-size: 1.5rem; diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index f4ad0b5..d5c2329 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,6 +1,9 @@ /** * * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui * */ diff --git a/src/scss/components/_content.scss b/src/scss/components/_content.scss index 72d559f..1c247d5 100644 --- a/src/scss/components/_content.scss +++ b/src/scss/components/_content.scss @@ -13,7 +13,7 @@ // paragraphs p { margin: $plain-ui__margin; - //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints); + @include media-breakpoints('margin', $plain-ui__margin-breakpoints); } // Semantic text elements @@ -88,7 +88,7 @@ ul { padding: 0; margin: $plain-ui__margin; - //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints); + @include media-breakpoints('margin', $plain-ui__margin-breakpoints); } ol, diff --git a/src/scss/components/_media.scss b/src/scss/components/_media.scss index 0a91a55..e650183 100644 --- a/src/scss/components/_media.scss +++ b/src/scss/components/_media.scss @@ -8,36 +8,33 @@ * */ -@mixin plain-ui__component__media() -{ - .figure { - margin: 0; - display: inline-block; - line-height: 0; - - border: 1px solid $plain-ui__primary-light; - border-radius: 2px; +.figure { + margin: 0; + display: inline-block; + line-height: 0; - overflow: hidden; + border: $plain-ui__border; + border-radius: $plain-ui__border-radius; - &__caption { - padding: 0.75em 1.1em; - font-size: 0.7rem; - background: $plain-ui__primary-light; - line-height: $plain-ui__line-height; - margin: 0; - color: white; - } + overflow: hidden; - img.media { - border: 0; - } + &__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: var(--background); + line-height: $plain-ui__line-height; + margin: 0; + color: var(--text-secondary); } - img.media { - border-radius: 2px; - border: 1px solid $plain-ui__primary-light; - width: 100%; - height: auto; + .media { + border: 0; } +} + +.media { + border-radius: $plain-ui__border-radius; + border: $plain-ui__border; + width: 100%; + height: auto; } \ No newline at end of file diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 3191e3d..1938f04 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -8,13 +8,13 @@ { .table { width: 100%; - border: 1px solid lighten($plain-ui__primary-light, 55%); - background: white; + border: 1px solid lighten($plain-ui__primary, 55%); + background: var(--white); &--striped { tr { &:nth-child(even) { - background-color: lighten($plain-ui__primary-light, 75%); + background-color: lighten($plain-ui__primary, 75%); } } } @@ -24,13 +24,13 @@ } td { - color: $plain-ui__primary-light; + color: var(--text); } td, th { text-align: left; - border-bottom: 1px solid lighten($plain-ui__primary-light, 55%); + border-bottom: 1px solid lighten($plain-ui__primary, 55%); padding: 0.5em 1.25em; //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); @@ -38,11 +38,11 @@ th { color: white; - background-color: $plain-ui__primary-light; + background-color: $plain-ui__primary; } tr:hover { - background-color: lighten($plain-ui__primary-light, 10%); + background-color: lighten($plain-ui__primary, 10%); td { color: white; diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index 6a629ac..f04edcd 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -28,9 +28,9 @@ transition: background-color 0.1s; background-color: white; - color: $plain-ui__primary-light; + color: var(--text); - border: 1px solid $plain-ui__primary-light; + border: $plain-ui__border; border-bottom-width: 0; width: 100%; @@ -44,10 +44,10 @@ &:hover, &--selected { cursor: pointer; - background-color: lighten($plain-ui__primary-light, 10%); + background-color: var(--primary-active); color: white; - border-color: lighten($plain-ui__primary-light, 10%); + border-color: var(--primary-active); } &:last-child { diff --git a/src/scss/core/_normalize.scss b/src/scss/core/_normalize.scss index ba88999..94e9590 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -5,7 +5,7 @@ * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://github.com/tentakelfabrik/plain-ui * */ @@ -34,7 +34,7 @@ body { direction: $plain-ui__direction; font-size: $plain-ui__font-size; - //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints); + @include media-breakpoints('font-size', $plain-ui__font-size-breakpoints); line-height: $plain-ui__line-height; //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints); @@ -43,6 +43,7 @@ body { a { color: var(--link); transition: color 0.5s; + text-decoration: none; &:hover { color: var(--link-hover); @@ -69,13 +70,17 @@ table { } figure { - margin: $plain-ui__margin; + margin: 0; } figcaption { margin: 0; } +p { + margin: 0; +} + /** * form elements * diff --git a/src/scss/helpers/_colors.scss b/src/scss/helpers/_colors.scss index 90a5043..9c05fd1 100644 --- a/src/scss/helpers/_colors.scss +++ b/src/scss/helpers/_colors.scss @@ -7,7 +7,7 @@ */ @each $name, $color in $plain-ui__colors { - .text-color-#{$name} { + .color-#{$name} { color: var(#{$color}); } } diff --git a/src/scss/helpers/_core.scss b/src/scss/helpers/_core.scss index 7b98de6..efd0533 100644 --- a/src/scss/helpers/_core.scss +++ b/src/scss/helpers/_core.scss @@ -6,110 +6,36 @@ */ .border { - border: $plain-ui__border !important; + border: $plain-ui__border; } .border-round { border-radius: $plain-ui__border-radius; } -.borderless { - border: 0 !important; +.border-0 { + border: 0; } -.radiusless { - border-radius: 0 !important; +.radius-0 { + border-radius: 0; } - /** - * z-index - * - * - */ - - $plain-ui__z-index: 10; - - @for $i from 1 through $plain-ui__z-index { - .z-index-#{$i} { - z-index: $i; - } - } - - /** - * - * - */ - - .round { - border-radius: 50%; - } - - /** - * typography - * - * - */ - - .left { - text-align: left !important; - } - - .right { - text-align: right !important; - } - - .center { - text-align: center !important; - } - - .justify { - text-align: justify !important; - } - - .uppercase { - text-transform: uppercase !important; - } - - .lowercase { - text-transform: lowercase !important; - } - - .crossed { - text-decoration: line-through !important; - } - - .underline { - text-decoration: underline !important; - } - - .capitalize { - text-transform: capitalize !important; - } - - .italic { - font-style: italic !important; - } - - .light { - font-weight: lighter !important; - } - - .normal { - font-weight: normal !important; - } +.round { + border-radius: 50%; +} - .medium { - font-weight: medium !important; - } +/** + * z-index + * + * + */ -.bold { - font-weight: bolder !important; -} +$plain-ui__z-index: 20; -@each $name, $font-size in $plain-ui__font-sizes { - .t-size-#{$name} { - font-size: $font-size !important; - //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); +@for $i from 1 through $plain-ui__z-index { + .z-index-#{$i} { + z-index: $i; } } @@ -175,10 +101,6 @@ vertical-align: baseline; } -.marginless { - margin: 0 !important; -} - /** * * diff --git a/src/scss/helpers/_sizing.scss b/src/scss/helpers/_sizing.scss index 8cdddc9..886e7d1 100644 --- a/src/scss/helpers/_sizing.scss +++ b/src/scss/helpers/_sizing.scss @@ -13,6 +13,8 @@ $plain-ui__helpers__height-steps: 50; .h-0 { height: 0; } .w-1 { width: 1px;} .h-1 { height: 1px; } +.w-100 { width: 100%; } +.h-100 { height: 100%; } @for $i from 1 through $reflex-columns { .w-col-#{$i} { diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 55b30b7..85c90a5 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -9,10 +9,26 @@ $plain-ui__spacing-gap: 0.25 !default; $plain-ui__spacing-steps: 10 !default; /** + * + * + * + */ + +.marginless { + margin: 0; +} + +.paddingless { + padding: 0; +} + + +/** + * spacing for single padding or margin * * */ -@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0) +@mixin spacing($class, $style, $direction, $name, $value) { .#{$class}-#{$direction}-#{$name} { #{$style}-#{$direction}: $value; diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss new file mode 100644 index 0000000..9af7702 --- /dev/null +++ b/src/scss/helpers/_typography.scss @@ -0,0 +1,92 @@ +/** + * typography + * + * + */ + +.left { + text-align: left; +} + +.right { + text-align: right; +} + +.center { + text-align: center; +} + +.justify { + text-align: justify; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.crossed { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.light { + font-weight: lighter; +} + +.normal { + font-weight: normal; +} + +.medium { + font-weight: medium; +} + +.bold { + font-weight: bolder; +} + +@mixin add_font_size($name, $font-size) { + .size-#{$name} { + font-size: $font-size; + } +} + +@each $name, $font-size in $plain-ui__font-sizes { + @include add_font_size($name, $font-size); + + @include plain-ui__media-xs() { + @include add_font_size('xs-' + $name, $font-size); + } + + @include plain-ui__media-sm() { + @include add_font_size('sm-' + $name, $font-size); + } + + @include plain-ui__media-md() { + @include add_font_size('md-' + $name, $font-size); + } + + @include plain-ui__media-lg() { + @include add_font_size('lg-' + $name, $font-size); + } + + @include plain-ui__media-xlg() { + @include add_font_size('xlg-' + $name, $font-size); + } +} + diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index ac8c8c9..9d7ad48 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -29,9 +29,9 @@ 'helpers/core', 'helpers/sizing', 'helpers/spacing', - 'helpers/colors'; + 'helpers/colors', + 'helpers/typography'; -@include plain-ui__component__media(); @include plain-ui__component__table(); @include plain-ui__component__slider(); @include plain-ui__component__tabs(); \ No newline at end of file