diff --git a/dist/index.html b/dist/index.html index 43950cf..480d06b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -43,6 +43,9 @@ + @@ -62,6 +65,23 @@ +
+
+
+
+ +
+
+ Bar +
+
+
+
+

Icon

@@ -284,18 +304,68 @@

Layout

+ +
+

Slider

+
+
+
+ +
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ + +
+

Masonry

-
- -
- food truck yr franzen pabst -
-
+
diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 0e7a315..3def296 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -285,6 +285,12 @@ summary { * * */ +/** + * + * + * + * + */ /** * * @@ -328,12 +334,17 @@ summary { * */ /** - *
- * - *
- * food truck yr franzen pabst - *
- *
+ *
+ *
+ *
+ *
+ *
+ * + */ +/** + * + * + * * */ a { @@ -360,6 +371,200 @@ body { line-height: 1.4; } +/** + * borders + * + * + */ +.border { + border: 1px solid #3e3e3e !important; +} + +.border-round { + border-radius: 2px !important; +} + +.borderless { + border: 0 !important; +} + +.radiusless { + border-radius: 0 !important; +} + +/** + * + * + */ +.round { + border-radius: 50% !important; +} + +/** + * 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; +} + +.medium { + font-weight: medium !important; +} + +.bold { + font-weight: bolder !important; +} + +.text-size-default { + font-size: 1rem !important; +} + +.text-size-small { + font-size: 0.75rem !important; +} + +.text-size-medium { + font-size: 1.5rem !important; +} + +.text-size-large { + font-size: 2rem !important; +} + +.text-size-big { + font-size: 3rem !important; +} + +/** + * colors + * + * + */ +.text-color-primary { + color: #3e3e3e !important; +} + +.text-color-white { + color: #fff !important; +} + +.fill-primary { + fill: #3e3e3e !important; +} + +.fill-white { + fill: #fff !important; +} + +.border-color-primary { + border-color: #3e3e3e !important; +} + +.border-color-white { + border-color: #fff !important; +} + +.background-color-primary { + background-color: #3e3e3e !important; +} + +.background-color-white { + background-color: #fff !important; +} + +/** + * floating + * + * + */ +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.float-none { + float: none; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +.clearfix::before, .clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +/** + * position + * + * + */ +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.relative { + position: relative !important; +} + .badge { display: inline-block; background-color: #3e3e3e; @@ -402,7 +607,13 @@ body { .button--small { font-size: 0.8em; } -.button:hover { +.button--no-style { + margin: 0; + padding: 0; + border: none; + background: transparent; +} +.button:hover, .button--hover { cursor: pointer; text-decoration: none; color: white; @@ -684,13 +895,32 @@ img.media { object-fit: contain; } -.masonry { +.slider { + display: flex; +} +.slider__inner { + display: flex; + overflow: hidden; +} +.slider__item { + flex: none; + width: 33%; +} + +.bar { display: flex; - flex-direction: column; - flex-wrap: wrap; + background-color: #3e3e3e; + color: white; + padding: 0.8em 1.2em; +} +.bar__start { + justify-content: start; + margin-right: 0.75em; +} +.bar__main { width: 100%; } -.masonry__item { - width: 33.3%; - flex: 1; +.bar__end { + justify-content: end; + margin-left: 0.75em; } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index ef5deaa..690c9c1 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -142,7 +142,7 @@ * */ -@mixin plain-ui__media-breakpoints($property, $breakpoints, $important: false) { +@mixin plain-ui__breakpoints($property, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { @if $important == false { @@ -169,7 +169,7 @@ * */ -@mixin plain-ui__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) { +@mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { @if $important == false { @@ -194,7 +194,7 @@ * @param {Boolean} $important [false] * */ -@mixin plain-ui__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { +@mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { @each $breakpoint, $value in $breakpoints { // getting diff diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 3793c76..5622184 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -21,7 +21,6 @@ $plain-ui__md : 992px !default; $plain-ui__lg : 1200px !default; $plain-ui__xlg: 1600px !default; - /** * fonts * @@ -70,6 +69,11 @@ $plain-ui__border-light: #dfdfdf !default; $plain-ui__link-light: #fff !default; +$plain-ui__colors: ( + 'primary' : $plain-ui__primary-light, + 'white' : #fff +) !default; + /** * padding & margin * @@ -116,4 +120,7 @@ $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default; */ $plain-ui__z-index__modal: 1000 !default; -$plain-ui__z-index__overlay: 999 !default; \ No newline at end of file +$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 diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss new file mode 100644 index 0000000..47279a4 --- /dev/null +++ b/src/scss/components/_bar.scss @@ -0,0 +1,31 @@ +/** + * + * + * + * + */ + +@mixin plain-ui__component__bar() +{ + .bar { + display: flex; + + background-color: $plain-ui__primary-light; + color: white; + padding: 0.8em 1.2em; + + &__start { + justify-content: start; + margin-right: 0.75em; + } + + &__main { + width: 100%; + } + + &__end { + justify-content: end; + margin-left: 0.75em; + } + } +} \ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index feda2c4..d4ff95d 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -37,7 +37,14 @@ font-size: 0.8em; } - &:hover { + &--no-style { + margin: 0; + padding: 0; + border: none; + background: transparent; + } + + &:hover, &--hover { cursor: pointer; text-decoration: none; color: white; diff --git a/src/scss/components/_content.scss b/src/scss/components/_content.scss index 1269b43..7d6da00 100644 --- a/src/scss/components/_content.scss +++ b/src/scss/components/_content.scss @@ -8,5 +8,13 @@ { .content { font-size: 1rem; + + // list + + ul { + li { + + } + } } } \ No newline at end of file diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index f95b057..5fa7591 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -5,21 +5,17 @@ * */ -@mixin plain-ui__component__bar() +@mixin plain-ui__component__group() { - .bar { - display: flex; + .group { + &__item { + width: auto; + display: inline-block; + margin: 0 1em 1em; - &__start { - justify-content: start; - } - - &__title { - @extend .w-100; - } - - &__end { - justify-content: end; + &:last-child { + margin-right: 0; + } } } } \ No newline at end of file diff --git a/src/scss/components/_progress.scss b/src/scss/components/_progress.scss new file mode 100644 index 0000000..0a43abf --- /dev/null +++ b/src/scss/components/_progress.scss @@ -0,0 +1,9 @@ +/** + * + * + * + */ +@mixin component__loading() +{ + +} \ No newline at end of file diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss new file mode 100644 index 0000000..283ef58 --- /dev/null +++ b/src/scss/components/_slider.scss @@ -0,0 +1,25 @@ +/** + *
+ *
+ *
+ *
+ *
+ * + */ + +@mixin plain-ui__component__slider() +{ + .slider { + display: flex; + + &__inner { + display: flex; + overflow: hidden; + } + + &__item { + flex: none; + width: 33%; + } + } +} \ No newline at end of file diff --git a/src/scss/core/helpers/_core.scss b/src/scss/core/helpers/_core.scss index 537ef06..8d834d1 100644 --- a/src/scss/core/helpers/_core.scss +++ b/src/scss/core/helpers/_core.scss @@ -14,11 +14,11 @@ */ .border { - border: $crispy__border !important; + border: $plain-ui__border !important; } .border-round { - border-radius: $crispy__border-radius !important; + border-radius: $plain-ui__border-radius !important; } .borderless { @@ -100,11 +100,10 @@ font-weight: bolder !important; } - // create @each $name, $font-size in $plain-ui__font-sizes { .text-size-#{$name} { font-size: $font-size !important; - @include plain-ui__breakpoints-font-size($crispy__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); + //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); } } @@ -120,6 +119,12 @@ } } + @each $name, $color in $plain-ui__colors { + .fill-#{$name} { + fill: $color !important; + } + } + @each $name, $color in $plain-ui__colors { .border-color-#{$name} { border-color: $color !important; diff --git a/src/scss/core/helpers/_sizing.scss b/src/scss/core/helpers/_sizing.scss index f1ee244..1171fe0 100644 --- a/src/scss/core/helpers/_sizing.scss +++ b/src/scss/core/helpers/_sizing.scss @@ -7,5 +7,5 @@ @mixin plain-ui__helpers__sizing() { - + } \ No newline at end of file diff --git a/src/scss/layout/_flex.scss b/src/scss/layout/_flex.scss new file mode 100644 index 0000000..70e1c7d --- /dev/null +++ b/src/scss/layout/_flex.scss @@ -0,0 +1,4 @@ +@import 'reflex-grid'; + +$reflex-prefix: 'flex'; +$legacy-support: false; \ No newline at end of file diff --git a/src/scss/layout/_masonary.scss b/src/scss/layout/_masonary.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss deleted file mode 100644 index 8b77bfe..0000000 --- a/src/scss/layout/_masonry.scss +++ /dev/null @@ -1,37 +0,0 @@ -/** - *
- * - *
- * food truck yr franzen pabst - *
- *
- * - */ - -@mixin plain-ui__layout__masonry() -{ - .masonry { - display: flex; - flex-flow: column wrap; - align-content: space-between; - - &__item { - width: 32%; - margin-bottom: 2%; /* Optional */ - } - - /* Re-order items into 3 rows */ - &__item:nth-child(3n+1) { order: 1; } - &__item:nth-child(3n+2) { order: 2; } - &__item:nth-child(3n) { order: 3; } - - /* Force new columns */ - &:before, - &:after { - content: ""; - flex-basis: 100%; - width: 0; - order: 2; - } - } -} \ No newline at end of file diff --git a/src/scss/layout/_slider.scss b/src/scss/layout/_slider.scss deleted file mode 100644 index 177e8d6..0000000 --- a/src/scss/layout/_slider.scss +++ /dev/null @@ -1,20 +0,0 @@ -/** - *
- * - *
- * food truck yr franzen pabst - *
- *
- * - */ - -@mixin plain-ui__layout__slider() -{ - .slider { - display: flex; - - &__item { - - } - } -} \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 4d5e905..02213e9 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -6,6 +6,8 @@ 'variables', 'core', + 'core/helpers/core', + 'components/badge', 'components/button', 'components/field', @@ -14,10 +16,11 @@ 'components/panel', 'components/media', 'components/table', - - 'layout/masonry'; + 'components/slider', + 'components/bar'; @include plain-ui__core(); +@include plain-ui__helpers__core(); @include plain-ui__component__badge(); @@ -30,5 +33,5 @@ @include plain-ui__component__media(); @include plain-ui__component__table(); @include plain-ui__component__hero(); - -@include plain-ui__layout__masonry(); \ No newline at end of file +@include plain-ui__component__slider(); +@include plain-ui__component__bar(); \ No newline at end of file