diff --git a/dist/index.html b/dist/index.html index ee059c5..43950cf 100644 --- a/dist/index.html +++ b/dist/index.html @@ -265,6 +265,9 @@
+
+

Media

+
@@ -276,5 +279,68 @@
+
+
+
+

Layout

+
+
+

Masonry

+
+
+
+
+
+ +
+ 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 +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+
+
+ + * + *
+ * food truck yr franzen pabst + *
+ * + * + */ a { color: #fff; } @@ -399,6 +408,9 @@ body { color: white; background-color: #3e3e3e; } +.button:focus, .button:active { + outline: 1px solid #646464; +} .button:disabled { opacity: 0.5; } @@ -408,12 +420,16 @@ body { background-color: white; color: #3e3e3e; } + .button--danger { border-color: #d95959; } .button--danger:hover { background-color: #d95959; } +.button--danger:focus, .button--danger:active { + outline: 2px solid #e79797; +} .field-group { margin-bottom: 1.2em; @@ -667,3 +683,14 @@ img.media { -o-object-fit: contain; object-fit: contain; } + +.masonry { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; +} +.masonry__item { + width: 33.3%; + flex: 1; +} diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 397cfa2..feda2c4 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -45,7 +45,7 @@ } &:focus, &:active { - + outline: 1px solid lighten($plain-ui__primary-light, 15%); } &:disabled { @@ -58,13 +58,22 @@ color: $plain-ui__primary-light; } } + } +} +@mixin plain-ui__component__button-colors() +{ + .button { &--danger { border-color: $plain-ui__danger-light; &:hover { background-color: $plain-ui__danger-light; } + + &:focus, &:active { + outline: 2px solid lighten($plain-ui__danger-light, 15%); + } } } } \ No newline at end of file diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss new file mode 100644 index 0000000..f95b057 --- /dev/null +++ b/src/scss/components/_group.scss @@ -0,0 +1,25 @@ +/** + * + * + * + * + */ + +@mixin plain-ui__component__bar() +{ + .bar { + display: flex; + + &__start { + justify-content: start; + } + + &__title { + @extend .w-100; + } + + &__end { + justify-content: end; + } + } +} \ No newline at end of file diff --git a/src/scss/core/helpers/_core.scss b/src/scss/core/helpers/_core.scss new file mode 100644 index 0000000..537ef06 --- /dev/null +++ b/src/scss/core/helpers/_core.scss @@ -0,0 +1,179 @@ +/** + * + * + * + * + */ + +@mixin plain-ui__helpers__core() +{ + /** + * borders + * + * + */ + + .border { + border: $crispy__border !important; + } + + .border-round { + border-radius: $crispy__border-radius !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; + } + + // 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); + } + } + + /** + * colors + * + * + */ + + @each $name, $color in $plain-ui__colors { + .text-color-#{$name} { + color: $color !important; + } + } + + @each $name, $color in $plain-ui__colors { + .border-color-#{$name} { + border-color: $color !important; + } + } + + @each $name, $color in $plain-ui__colors { + .background-color-#{$name} { + background-color: $color !important; + } + } + + /** + * floating + * + * + */ + + .float-left { + float: left; + } + + .float-right { + float: right; + } + + .float-none { + float: none; + } + + .centered { + margin-left: auto; + margin-right: auto; + } + + .clearfix { + @include plain-ui__clearfix(); + } + + /** + * position + * + * + */ + + .absolute { + position: absolute !important; + } + + .fixed { + position: fixed !important; + } + + .relative { + position: relative !important; + } +} \ No newline at end of file diff --git a/src/scss/core/helpers/_sizing.scss b/src/scss/core/helpers/_sizing.scss new file mode 100644 index 0000000..f1ee244 --- /dev/null +++ b/src/scss/core/helpers/_sizing.scss @@ -0,0 +1,11 @@ +/** + * + * + * + * + */ + +@mixin plain-ui__helpers__sizing() +{ + +} \ No newline at end of file diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss new file mode 100644 index 0000000..8b77bfe --- /dev/null +++ b/src/scss/layout/_masonry.scss @@ -0,0 +1,37 @@ +/** + *
+ * + *
+ * 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 new file mode 100644 index 0000000..177e8d6 --- /dev/null +++ b/src/scss/layout/_slider.scss @@ -0,0 +1,20 @@ +/** + *
+ * + *
+ * 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 3d89a7b..4d5e905 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -13,15 +13,22 @@ 'components/hero', 'components/panel', 'components/media', - 'components/table'; + 'components/table', + + 'layout/masonry'; @include plain-ui__core(); @include plain-ui__component__badge(); + @include plain-ui__component__button(); +@include plain-ui__component__button-colors(); + @include plain-ui__component__field(); @include plain-ui__component__icon(); @include plain-ui__component__panel(); @include plain-ui__component__media(); @include plain-ui__component__table(); -@include plain-ui__component__hero(); \ No newline at end of file +@include plain-ui__component__hero(); + +@include plain-ui__layout__masonry(); \ No newline at end of file