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