From bdcd8c18dca2ff98201d1beaeaad0003eee0691e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Fri, 2 Jul 2021 01:04:52 +0200 Subject: [PATCH] adding #9 --- dist/index.html | 29 +- dist/plain-ui.css | 3770 ++++++++++++++--------------- src/scss/components/_loading.scss | 44 +- src/scss/helpers/_core.scss | 19 +- src/scss/helpers/_spacing.scss | 2 - src/scss/plain-ui.scss | 12 +- 6 files changed, 1943 insertions(+), 1933 deletions(-) diff --git a/dist/index.html b/dist/index.html index 7f98750..188da12 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4,8 +4,8 @@ - Crispy CSS | Lightweight CSS Framework for Building Apps and Websites - + Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + @@ -27,9 +27,19 @@ -
+
+ +

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

+ +
+ + +
+

Buttons

+
+
+

Loading

+
+
+ + + +
+
+
+
+
diff --git a/dist/plain-ui.css b/dist/plain-ui.css index dc436ea..9c12e06 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -1982,2481 +1982,2486 @@ dt { * */ /** - * Sizing * - * Width and Height Classes, - * Sizes with percentage will calculate with the Reflex Grid * * */ -.w-0 { - width: 0; +/** + * + * + * + * + */ +/** + * + * + * + * + */ +/** + *
+ * image + *
+ * + */ +/** + * + * + * + */ +/** + * + * + * + */ +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ +/** + * + * + * + */ +/** + *
+ *
+ *
+ *
+ *
+ * + */ +/** + * + * + * + * + */ +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ +/** + * + * + * + */ +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * + */ +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; } -.h-0 { - height: 0; +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; } -.w-1 { - width: 1px; +.container .grid, +.container-full .grid { + margin-right: -15px; + margin-left: -15px; } -.h-1 { - height: 1px; +@media (min-width: 576px) { + .container { + max-width: 576px; + } } - -.w-col-1 { - width: 8.3333333333%; +@media (min-width: 768px) { + .container { + max-width: 768px; + } } - -.h-col-1 { - height: 8.3333333333%; +@media (min-width: 992px) { + .container { + max-width: 992px; + } } - -.w-col-2 { - width: 16.6666666667%; +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } } - -.h-col-2 { - height: 16.6666666667%; +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } +} +.grid { + box-sizing: border-box; + display: block; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + letter-spacing: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; } -.w-col-3 { - width: 25%; +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; } -.h-col-3 { - height: 25%; +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; } -.w-col-4 { - width: 33.3333333333%; +[class*=col-]::before, [class*=col-]::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; } -.h-col-4 { - height: 33.3333333333%; +[class*=col-] .grid { + flex: 1 1 auto; + margin: -15px; } -.w-col-5 { - width: 41.6666666667%; +.col-12 { + width: 100%; + *width: 99.9%; } -.h-col-5 { - height: 41.6666666667%; +.col-11 { + width: 91.66666667%; + *width: 91.56666667%; } -.w-col-6 { - width: 50%; +.col-10 { + width: 83.33333333%; + *width: 83.23333333%; } -.h-col-6 { - height: 50%; +.col-9 { + width: 75%; + *width: 74.9%; } -.w-col-7 { - width: 58.3333333333%; +.col-8 { + width: 66.66666667%; + *width: 66.56666667%; } -.h-col-7 { - height: 58.3333333333%; +.col-7 { + width: 58.33333333%; + *width: 58.23333333%; } -.w-col-8 { - width: 66.6666666667%; +.col-6 { + width: 50%; + *width: 49.9%; } -.h-col-8 { - height: 66.6666666667%; +.col-5 { + width: 41.66666667%; + *width: 41.56666667%; } -.w-col-9 { - width: 75%; +.col-4 { + width: 33.33333333%; + *width: 33.23333333%; } -.h-col-9 { - height: 75%; +.col-3 { + width: 25%; + *width: 24.9%; } -.w-col-10 { - width: 83.3333333333%; +.col-2 { + width: 16.66666667%; + *width: 16.56666667%; } -.h-col-10 { - height: 83.3333333333%; +.col-1 { + width: 8.33333333%; + *width: 8.23333333%; } -.w-col-11 { - width: 91.6666666667%; -} - -.h-col-11 { - height: 91.6666666667%; -} +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } -.w-col-12 { - width: 100%; -} + .col-xs-11 { + width: 91.66666667%; + *width: 91.56666667%; + } -.h-col-12 { - height: 100%; -} + .col-xs-10 { + width: 83.33333333%; + *width: 83.23333333%; + } -.w-1 { - width: 0.5rem; -} + .col-xs-9 { + width: 75%; + *width: 74.9%; + } -.w-2 { - width: 1rem; -} + .col-xs-8 { + width: 66.66666667%; + *width: 66.56666667%; + } -.w-3 { - width: 1.5rem; -} + .col-xs-7 { + width: 58.33333333%; + *width: 58.23333333%; + } -.w-4 { - width: 2rem; -} + .col-xs-6 { + width: 50%; + *width: 49.9%; + } -.w-5 { - width: 2.5rem; -} + .col-xs-5 { + width: 41.66666667%; + *width: 41.56666667%; + } -.w-6 { - width: 3rem; -} + .col-xs-4 { + width: 33.33333333%; + *width: 33.23333333%; + } -.w-7 { - width: 3.5rem; -} + .col-xs-3 { + width: 25%; + *width: 24.9%; + } -.w-8 { - width: 4rem; -} + .col-xs-2 { + width: 16.66666667%; + *width: 16.56666667%; + } -.w-9 { - width: 4.5rem; + .col-xs-1 { + width: 8.33333333%; + *width: 8.23333333%; + } } +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } -.w-10 { - width: 5rem; -} + .col-sm-11 { + width: 91.66666667%; + *width: 91.56666667%; + } -.w-11 { - width: 5.5rem; -} + .col-sm-10 { + width: 83.33333333%; + *width: 83.23333333%; + } -.w-12 { - width: 6rem; -} + .col-sm-9 { + width: 75%; + *width: 74.9%; + } -.w-13 { - width: 6.5rem; -} + .col-sm-8 { + width: 66.66666667%; + *width: 66.56666667%; + } -.w-14 { - width: 7rem; -} + .col-sm-7 { + width: 58.33333333%; + *width: 58.23333333%; + } -.w-15 { - width: 7.5rem; -} + .col-sm-6 { + width: 50%; + *width: 49.9%; + } -.w-16 { - width: 8rem; -} + .col-sm-5 { + width: 41.66666667%; + *width: 41.56666667%; + } -.w-17 { - width: 8.5rem; -} + .col-sm-4 { + width: 33.33333333%; + *width: 33.23333333%; + } -.w-18 { - width: 9rem; -} + .col-sm-3 { + width: 25%; + *width: 24.9%; + } -.w-19 { - width: 9.5rem; -} + .col-sm-2 { + width: 16.66666667%; + *width: 16.56666667%; + } -.w-20 { - width: 10rem; + .col-sm-1 { + width: 8.33333333%; + *width: 8.23333333%; + } } +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } -.w-21 { - width: 10.5rem; -} + .col-md-11 { + width: 91.66666667%; + *width: 91.56666667%; + } -.w-22 { - width: 11rem; -} + .col-md-10 { + width: 83.33333333%; + *width: 83.23333333%; + } -.w-23 { - width: 11.5rem; -} + .col-md-9 { + width: 75%; + *width: 74.9%; + } -.w-24 { - width: 12rem; -} + .col-md-8 { + width: 66.66666667%; + *width: 66.56666667%; + } -.w-25 { - width: 12.5rem; -} + .col-md-7 { + width: 58.33333333%; + *width: 58.23333333%; + } -.w-26 { - width: 13rem; -} + .col-md-6 { + width: 50%; + *width: 49.9%; + } -.w-27 { - width: 13.5rem; -} + .col-md-5 { + width: 41.66666667%; + *width: 41.56666667%; + } -.w-28 { - width: 14rem; -} + .col-md-4 { + width: 33.33333333%; + *width: 33.23333333%; + } -.w-29 { - width: 14.5rem; -} + .col-md-3 { + width: 25%; + *width: 24.9%; + } -.w-30 { - width: 15rem; -} + .col-md-2 { + width: 16.66666667%; + *width: 16.56666667%; + } -.w-31 { - width: 15.5rem; + .col-md-1 { + width: 8.33333333%; + *width: 8.23333333%; + } } +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } -.w-32 { - width: 16rem; -} + .col-lg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } -.w-33 { - width: 16.5rem; -} + .col-lg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } -.w-34 { - width: 17rem; -} + .col-lg-9 { + width: 75%; + *width: 74.9%; + } -.w-35 { - width: 17.5rem; -} + .col-lg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } -.w-36 { - width: 18rem; -} + .col-lg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } -.w-37 { - width: 18.5rem; -} + .col-lg-6 { + width: 50%; + *width: 49.9%; + } -.w-38 { - width: 19rem; -} + .col-lg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } -.w-39 { - width: 19.5rem; -} + .col-lg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } -.w-40 { - width: 20rem; -} + .col-lg-3 { + width: 25%; + *width: 24.9%; + } -.w-41 { - width: 20.5rem; -} + .col-lg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } -.w-42 { - width: 21rem; + .col-lg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } } +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } -.w-43 { - width: 21.5rem; -} + .col-xlg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } -.w-44 { - width: 22rem; -} + .col-xlg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } -.w-45 { - width: 22.5rem; -} + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } -.w-46 { - width: 23rem; -} + .col-xlg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } -.w-47 { - width: 23.5rem; -} + .col-xlg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } -.w-48 { - width: 24rem; -} + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } -.w-49 { - width: 24.5rem; -} + .col-xlg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } -.w-50 { - width: 25rem; -} + .col-xlg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } -.h-1 { - height: 0.5rem; -} + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } -.h-2 { - height: 1rem; -} + .col-xlg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } -.h-3 { - height: 1.5rem; + .col-xlg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } } - -.h-4 { - height: 2rem; +.col-auto { + flex: 1 0 0px; + width: auto; } -.h-5 { - height: 2.5rem; +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + width: auto; + } } - -.h-6 { - height: 3rem; +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + width: auto; + } } - -.h-7 { - height: 3.5rem; +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + width: auto; + } } - -.h-8 { - height: 4rem; +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + width: auto; + } } - -.h-9 { - height: 4.5rem; +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + width: auto; + } } - -.h-10 { - height: 5rem; +.order-12 { + order: 12; } -.h-11 { - height: 5.5rem; +.order-11 { + order: 11; } -.h-12 { - height: 6rem; +.order-10 { + order: 10; } -.h-13 { - height: 6.5rem; +.order-9 { + order: 9; } -.h-14 { - height: 7rem; +.order-8 { + order: 8; } -.h-15 { - height: 7.5rem; +.order-7 { + order: 7; } -.h-16 { - height: 8rem; +.order-6 { + order: 6; } -.h-17 { - height: 8.5rem; +.order-5 { + order: 5; } -.h-18 { - height: 9rem; +.order-4 { + order: 4; } -.h-19 { - height: 9.5rem; +.order-3 { + order: 3; } -.h-20 { - height: 10rem; +.order-2 { + order: 2; } -.h-21 { - height: 10.5rem; +.order-1 { + order: 1; } -.h-22 { - height: 11rem; +.order-0 { + order: 0; } -.h-23 { - height: 11.5rem; -} - -.h-24 { - height: 12rem; -} +@media (min-width: 576px) { + .order-xs-12 { + order: 12; + } -.h-25 { - height: 12.5rem; -} + .order-xs-11 { + order: 11; + } -.h-26 { - height: 13rem; -} + .order-xs-10 { + order: 10; + } -.h-27 { - height: 13.5rem; -} + .order-xs-9 { + order: 9; + } -.h-28 { - height: 14rem; -} + .order-xs-8 { + order: 8; + } -.h-29 { - height: 14.5rem; -} + .order-xs-7 { + order: 7; + } -.h-30 { - height: 15rem; -} + .order-xs-6 { + order: 6; + } -.h-31 { - height: 15.5rem; -} + .order-xs-5 { + order: 5; + } -.h-32 { - height: 16rem; -} + .order-xs-4 { + order: 4; + } -.h-33 { - height: 16.5rem; -} + .order-xs-3 { + order: 3; + } -.h-34 { - height: 17rem; -} + .order-xs-2 { + order: 2; + } -.h-35 { - height: 17.5rem; -} + .order-xs-1 { + order: 1; + } -.h-36 { - height: 18rem; + .order-xs-0 { + order: 0; + } } +@media (min-width: 768px) { + .order-sm-12 { + order: 12; + } -.h-37 { - height: 18.5rem; -} + .order-sm-11 { + order: 11; + } -.h-38 { - height: 19rem; -} + .order-sm-10 { + order: 10; + } -.h-39 { - height: 19.5rem; -} + .order-sm-9 { + order: 9; + } -.h-40 { - height: 20rem; -} + .order-sm-8 { + order: 8; + } -.h-41 { - height: 20.5rem; -} + .order-sm-7 { + order: 7; + } -.h-42 { - height: 21rem; -} + .order-sm-6 { + order: 6; + } -.h-43 { - height: 21.5rem; -} + .order-sm-5 { + order: 5; + } -.h-44 { - height: 22rem; -} + .order-sm-4 { + order: 4; + } -.h-45 { - height: 22.5rem; -} + .order-sm-3 { + order: 3; + } -.h-46 { - height: 23rem; -} + .order-sm-2 { + order: 2; + } -.h-47 { - height: 23.5rem; -} + .order-sm-1 { + order: 1; + } -.h-48 { - height: 24rem; + .order-sm-0 { + order: 0; + } } +@media (min-width: 992px) { + .order-md-12 { + order: 12; + } -.h-49 { - height: 24.5rem; -} + .order-md-11 { + order: 11; + } -.h-50 { - height: 25rem; -} + .order-md-10 { + order: 10; + } -/** - * - * - */ -.m-top-0 { - margin-top: 0; -} + .order-md-9 { + order: 9; + } -.m-top-1 { - margin-top: 1px; -} + .order-md-8 { + order: 8; + } -.m-top-2 { - margin-top: 0.125rem; -} + .order-md-7 { + order: 7; + } -.m-top-3 { - margin-top: 0.5rem; -} + .order-md-6 { + order: 6; + } -.m-top-4 { - margin-top: 1.125rem; -} + .order-md-5 { + order: 5; + } -.m-top-5 { - margin-top: 2rem; -} + .order-md-4 { + order: 4; + } -.m-top-6 { - margin-top: 3.125rem; -} + .order-md-3 { + order: 3; + } -.m-top-7 { - margin-top: 4.5rem; -} + .order-md-2 { + order: 2; + } -.m-top-8 { - margin-top: 6.125rem; -} + .order-md-1 { + order: 1; + } -.m-top-9 { - margin-top: 8rem; + .order-md-0 { + order: 0; + } } +@media (min-width: 1200px) { + .order-lg-12 { + order: 12; + } -.m-top-10 { - margin-top: 10.125rem; -} + .order-lg-11 { + order: 11; + } -.m-bottom-0 { - margin-bottom: 0; -} + .order-lg-10 { + order: 10; + } -.m-bottom-1 { - margin-bottom: 1px; -} + .order-lg-9 { + order: 9; + } -.m-bottom-2 { - margin-bottom: 0.125rem; -} + .order-lg-8 { + order: 8; + } -.m-bottom-3 { - margin-bottom: 0.5rem; -} + .order-lg-7 { + order: 7; + } -.m-bottom-4 { - margin-bottom: 1.125rem; -} + .order-lg-6 { + order: 6; + } -.m-bottom-5 { - margin-bottom: 2rem; -} + .order-lg-5 { + order: 5; + } -.m-bottom-6 { - margin-bottom: 3.125rem; -} + .order-lg-4 { + order: 4; + } -.m-bottom-7 { - margin-bottom: 4.5rem; -} + .order-lg-3 { + order: 3; + } -.m-bottom-8 { - margin-bottom: 6.125rem; -} + .order-lg-2 { + order: 2; + } -.m-bottom-9 { - margin-bottom: 8rem; -} + .order-lg-1 { + order: 1; + } -.m-bottom-10 { - margin-bottom: 10.125rem; + .order-lg-0 { + order: 0; + } } +@media (min-width: 1600px) { + .order-xlg-12 { + order: 12; + } -.m-left-0 { - margin-left: 0; -} + .order-xlg-11 { + order: 11; + } -.m-left-1 { - margin-left: 1px; -} + .order-xlg-10 { + order: 10; + } -.m-left-2 { - margin-left: 0.125rem; -} + .order-xlg-9 { + order: 9; + } -.m-left-3 { - margin-left: 0.5rem; -} + .order-xlg-8 { + order: 8; + } -.m-left-4 { - margin-left: 1.125rem; -} + .order-xlg-7 { + order: 7; + } -.m-left-5 { - margin-left: 2rem; -} + .order-xlg-6 { + order: 6; + } -.m-left-6 { - margin-left: 3.125rem; -} + .order-xlg-5 { + order: 5; + } -.m-left-7 { - margin-left: 4.5rem; -} + .order-xlg-4 { + order: 4; + } -.m-left-8 { - margin-left: 6.125rem; -} + .order-xlg-3 { + order: 3; + } -.m-left-9 { - margin-left: 8rem; -} + .order-xlg-2 { + order: 2; + } -.m-left-10 { - margin-left: 10.125rem; -} + .order-xlg-1 { + order: 1; + } -.m-right-0 { - margin-right: 0; + .order-xlg-0 { + order: 0; + } } - -.m-right-1 { - margin-right: 1px; +.offset-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; } -.m-right-2 { - margin-right: 0.125rem; +.offset-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; } -.m-right-3 { - margin-right: 0.5rem; +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; } -.m-right-4 { - margin-right: 1.125rem; +.offset-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; } -.m-right-5 { - margin-right: 2rem; +.offset-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; } -.m-right-6 { - margin-right: 3.125rem; +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; } -.m-right-7 { - margin-right: 4.5rem; +.offset-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; } -.m-right-8 { - margin-right: 6.125rem; +.offset-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; } -.m-right-9 { - margin-right: 8rem; +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; } -.m-right-10 { - margin-right: 10.125rem; +.offset-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; } -.p-top-0 { - padding-top: 0; +.offset-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; } -.p-top-1 { - padding-top: 1px; -} +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } -.p-top-0 { - padding-top: 0.125rem; -} + .offset-xs-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } -.p-top-1 { - padding-top: 0rem; -} + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } -.p-top-2 { - padding-top: 0.125rem; -} + .offset-xs-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } -.p-top-3 { - padding-top: 0.5rem; -} + .offset-xs-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } -.p-top-4 { - padding-top: 1.125rem; -} + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } -.p-top-5 { - padding-top: 2rem; -} + .offset-xs-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } -.p-top-6 { - padding-top: 3.125rem; -} + .offset-xs-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } -.p-top-7 { - padding-top: 4.5rem; -} + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } -.p-top-8 { - padding-top: 6.125rem; -} + .offset-xs-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } -.p-top-9 { - padding-top: 8rem; -} + .offset-xs-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } -.p-top-10 { - padding-top: 10.125rem; + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } } +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } -.p-bottom-0 { - padding-bottom: 0; -} + .offset-sm-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } -.p-bottom-1 { - padding-bottom: 1px; -} + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } -.p-bottom-0 { - padding-bottom: 0.125rem; -} + .offset-sm-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } -.p-bottom-1 { - padding-bottom: 0rem; -} + .offset-sm-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } -.p-bottom-2 { - padding-bottom: 0.125rem; -} + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } -.p-bottom-3 { - padding-bottom: 0.5rem; -} + .offset-sm-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } -.p-bottom-4 { - padding-bottom: 1.125rem; -} + .offset-sm-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } -.p-bottom-5 { - padding-bottom: 2rem; -} + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } -.p-bottom-6 { - padding-bottom: 3.125rem; -} + .offset-sm-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } -.p-bottom-7 { - padding-bottom: 4.5rem; -} + .offset-sm-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } -.p-bottom-8 { - padding-bottom: 6.125rem; + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } } +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } -.p-bottom-9 { - padding-bottom: 8rem; -} + .offset-md-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } -.p-bottom-10 { - padding-bottom: 10.125rem; -} + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } -.p-left-0 { - padding-left: 0; -} + .offset-md-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } -.p-left-1 { - padding-left: 1px; -} + .offset-md-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } -.p-left-0 { - padding-left: 0.125rem; -} + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } -.p-left-1 { - padding-left: 0rem; -} + .offset-md-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } -.p-left-2 { - padding-left: 0.125rem; -} + .offset-md-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } -.p-left-3 { - padding-left: 0.5rem; -} + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } -.p-left-4 { - padding-left: 1.125rem; -} + .offset-md-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } -.p-left-5 { - padding-left: 2rem; -} + .offset-md-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } -.p-left-6 { - padding-left: 3.125rem; + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } } +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } -.p-left-7 { - padding-left: 4.5rem; -} + .offset-lg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } -.p-left-8 { - padding-left: 6.125rem; -} + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } -.p-left-9 { - padding-left: 8rem; -} + .offset-lg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } -.p-left-10 { - padding-left: 10.125rem; -} + .offset-lg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } -.p-right-0 { - padding-right: 0; -} + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } -.p-right-1 { - padding-right: 1px; -} + .offset-lg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } -.p-right-0 { - padding-right: 0.125rem; -} + .offset-lg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } -.p-right-1 { - padding-right: 0rem; -} + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } -.p-right-2 { - padding-right: 0.125rem; -} + .offset-lg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } -.p-right-3 { - padding-right: 0.5rem; -} + .offset-lg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } -.p-right-4 { - padding-right: 1.125rem; -} - -.p-right-5 { - padding-right: 2rem; -} - -.p-right-6 { - padding-right: 3.125rem; -} - -.p-right-7 { - padding-right: 4.5rem; + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } } +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } -.p-right-8 { - padding-right: 6.125rem; -} + .offset-xlg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } -.p-right-9 { - padding-right: 8rem; -} + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } -.p-right-10 { - padding-right: 10.125rem; -} + .offset-xlg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } -/** - * - * - * - * - */ -/** - * - * - * - */ -/** - * - * - * - * - */ -/** - * - * - * - * - */ -/** - *
- * image - *
- * - */ -/** - * - * - * - */ -/** - * - * - * - */ -/** - *
- * - *
- * food truck yr franzen pabst - *
- *
- * - */ -/** - * - * - * - */ -/** - *
- *
- *
- *
- *
- * - */ -/** - * - * - * - * - */ -/** - *
- * - *
- * food truck yr franzen pabst - *
- *
- * - */ -/** - * masonry - * - *
- *
- * - *
- *
- * - * - */ -:root { - --reflex-columns: 12; - --reflex-grid-spacing: 15px; - --reflex-xs: 576px; - --reflex-sm: 768px; - --reflex-md: 992px; - --reflex-lg: 1200px; - --reflex-xlg: 1600px; - --reflex-xxs-max: 575px; - --reflex-xs-max: 767px; - --reflex-sm-max: 991px; - --reflex-md-max: 1199px; - --reflex-lg-max: 1599px; -} + .offset-xlg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } -.container, -.container-full { - box-sizing: border-box; - width: 100%; - margin-right: auto; - margin-left: auto; - padding-right: 30px; - padding-left: 30px; -} + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } -.container .grid, -.container-full .grid { - margin-right: -15px; - margin-left: -15px; -} + .offset-xlg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } -@media (min-width: 576px) { - .container { - max-width: 576px; + .offset-xlg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; } -} -@media (min-width: 768px) { - .container { - max-width: 768px; + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; } -} -@media (min-width: 992px) { - .container { - max-width: 992px; + + .offset-xlg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; } -} -@media (min-width: 1200px) { - .container { - max-width: 1200px; + + .offset-xlg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; } -} -@media (min-width: 1600px) { - .container { - max-width: 1600px; + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.1%; } } -.grid { - box-sizing: border-box; - display: block; - display: flex; +.wrap { flex-wrap: wrap; - padding: 0; - margin: 0 auto; - position: relative; - letter-spacing: -0.31em; - *letter-spacing: normal; - word-spacing: -0.43em; - list-style-type: none; } -.grid::before, .grid::after { - box-sizing: border-box; - letter-spacing: normal; - word-spacing: normal; - white-space: normal; +.no-wrap { + flex-wrap: nowrap; } -[class*=col-] { - box-sizing: border-box; - letter-spacing: normal; - word-spacing: normal; - white-space: normal; - position: relative; - width: 100%; - vertical-align: top; - padding: 15px; - display: inline-block; - *display: inline; - zoom: 1; +.no-wrap [class*=col-] { + flex-shrink: 1; } -[class*=col-]::before, [class*=col-]::after { - box-sizing: border-box; - letter-spacing: normal; - word-spacing: normal; - white-space: normal; +.wrap-reverse { + flex-wrap: wrap-reverse; } -[class*=col-] .grid { - flex: 1 1 auto; - margin: -15px; +.direction-row { + flex-direction: row; } -.col-12 { - width: 100%; - *width: 99.9%; +.direction-row-reverse { + flex-direction: row-reverse; } -.col-11 { - width: 91.66666667%; - *width: 91.56666667%; +.direction-column { + flex-direction: column; } -.col-10 { - width: 83.33333333%; - *width: 83.23333333%; +.direction-column-reverse { + flex-direction: column-reverse; } -.col-9 { - width: 75%; - *width: 74.9%; +.align-start { + align-items: flex-start; } -.col-8 { - width: 66.66666667%; - *width: 66.56666667%; +.align-end { + align-items: flex-end; } -.col-7 { - width: 58.33333333%; - *width: 58.23333333%; +.align-end [class*=col-] { + vertical-align: bottom; } -.col-6 { - width: 50%; - *width: 49.9%; +.align-center { + align-items: center; } -.col-5 { - width: 41.66666667%; - *width: 41.56666667%; +.align-center [class*=col-] { + vertical-align: middle; } -.col-4 { - width: 33.33333333%; - *width: 33.23333333%; +.align-baseline { + align-items: baseline; } -.col-3 { - width: 25%; - *width: 24.9%; +.align-content-start { + align-content: flex-start; } -.col-2 { - width: 16.66666667%; - *width: 16.56666667%; +.align-content-end { + align-content: flex-end; } -.col-1 { - width: 8.33333333%; - *width: 8.23333333%; +.align-content-end [class*=col-] { + vertical-align: bottom; } -@media (min-width: 576px) { - .col-xs-12 { - width: 100%; - *width: 99.9%; - } - - .col-xs-11 { - width: 91.66666667%; - *width: 91.56666667%; - } - - .col-xs-10 { - width: 83.33333333%; - *width: 83.23333333%; - } +.align-content-center { + align-content: center; +} - .col-xs-9 { - width: 75%; - *width: 74.9%; - } +.align-content-space-between { + align-content: space-between; +} - .col-xs-8 { - width: 66.66666667%; - *width: 66.56666667%; - } +.align-content-space-around { + align-content: space-around; +} - .col-xs-7 { - width: 58.33333333%; - *width: 58.23333333%; - } +.align-self-stretch { + align-self: stretch; +} - .col-xs-6 { - width: 50%; - *width: 49.9%; - } +.align-self-start { + align-self: flex-start; +} - .col-xs-5 { - width: 41.66666667%; - *width: 41.56666667%; - } +.align-self-end { + align-self: flex-end; + vertical-align: bottom; +} - .col-xs-4 { - width: 33.33333333%; - *width: 33.23333333%; - } +.align-self-center { + align-self: center; + vertical-align: middle; +} - .col-xs-3 { - width: 25%; - *width: 24.9%; - } +.align-self-baseline { + align-self: baseline; + vertical-align: baseline; +} - .col-xs-2 { - width: 16.66666667%; - *width: 16.56666667%; - } +.justify-start { + justify-content: flex-start; +} - .col-xs-1 { - width: 8.33333333%; - *width: 8.23333333%; - } +.justify-start.grid { + text-align: left; } -@media (min-width: 768px) { - .col-sm-12 { - width: 100%; - *width: 99.9%; - } - .col-sm-11 { - width: 91.66666667%; - *width: 91.56666667%; - } +.justify-end { + justify-content: flex-end; +} - .col-sm-10 { - width: 83.33333333%; - *width: 83.23333333%; - } +.justify-end.grid { + text-align: right; + -moz-text-align-last: right; + text-align-last: right; +} - .col-sm-9 { - width: 75%; - *width: 74.9%; - } +.justify-end.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} - .col-sm-8 { - width: 66.66666667%; - *width: 66.56666667%; - } +.justify-center { + justify-content: center; +} - .col-sm-7 { - width: 58.33333333%; - *width: 58.23333333%; - } +.justify-center.grid { + text-align: center; + -moz-text-align-last: center; + text-align-last: center; +} - .col-sm-6 { - width: 50%; - *width: 49.9%; - } +.justify-center.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} - .col-sm-5 { - width: 41.66666667%; - *width: 41.56666667%; - } +.justify-space-between { + justify-content: space-between; +} - .col-sm-4 { - width: 33.33333333%; - *width: 33.23333333%; - } +.justify-space-between.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} - .col-sm-3 { - width: 25%; - *width: 24.9%; - } +.justify-space-between.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} - .col-sm-2 { - width: 16.66666667%; - *width: 16.56666667%; - } +.justify-space-around { + justify-content: space-around; +} - .col-sm-1 { - width: 8.33333333%; - *width: 8.23333333%; - } +.justify-space-around.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; } -@media (min-width: 992px) { - .col-md-12 { - width: 100%; - *width: 99.9%; - } - .col-md-11 { - width: 91.66666667%; - *width: 91.56666667%; - } +.justify-space-around.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} - .col-md-10 { - width: 83.33333333%; - *width: 83.23333333%; - } +.grid-bleed [class*=col-] { + padding: 0; +} - .col-md-9 { - width: 75%; - *width: 74.9%; - } +.col-grid { + display: flex; + flex-direction: column; +} - .col-md-8 { - width: 66.66666667%; - *width: 66.56666667%; - } +.col-grid.direction-row { + flex-direction: row; +} - .col-md-7 { - width: 58.33333333%; - *width: 58.23333333%; - } +.col-bleed { + padding: 0; +} - .col-md-6 { - width: 50%; - *width: 49.9%; - } +.col-bleed-x { + padding: 15px 0; +} - .col-md-5 { - width: 41.66666667%; - *width: 41.56666667%; - } +.col-bleed-y { + padding: 0 15px; +} - .col-md-4 { - width: 33.33333333%; - *width: 33.23333333%; - } +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; + *width: auto; +} - .col-md-3 { - width: 25%; - *width: 24.9%; - } +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; +} - .col-md-2 { - width: 16.66666667%; - *width: 16.56666667%; - } +.flex-footer > :last-child { + margin-bottom: 0; +} - .col-md-1 { - width: 8.33333333%; - *width: 8.23333333%; +@media (max-width: 575px) { + .hidden-xxs { + display: none; } } -@media (min-width: 1200px) { - .col-lg-12 { - width: 100%; - *width: 99.9%; +@media (min-width: 576px) { + .hidden-xs-up { + display: none; } - - .col-lg-11 { - width: 91.66666667%; - *width: 91.56666667%; +} +@media (max-width: 767px) { + .hidden-xs-down { + display: none; } - - .col-lg-10 { - width: 83.33333333%; - *width: 83.23333333%; +} +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; } - - .col-lg-9 { - width: 75%; - *width: 74.9%; +} +@media (min-width: 768px) { + .hidden-sm-up { + display: none; } - - .col-lg-8 { - width: 66.66666667%; - *width: 66.56666667%; +} +@media (max-width: 991px) { + .hidden-sm-down { + display: none; } - - .col-lg-7 { - width: 58.33333333%; - *width: 58.23333333%; +} +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; } - - .col-lg-6 { - width: 50%; - *width: 49.9%; +} +@media (min-width: 992px) { + .hidden-md-up { + display: none; } - - .col-lg-5 { - width: 41.66666667%; - *width: 41.56666667%; +} +@media (max-width: 1199px) { + .hidden-md-down { + display: none; } - - .col-lg-4 { - width: 33.33333333%; - *width: 33.23333333%; +} +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; } - - .col-lg-3 { - width: 25%; - *width: 24.9%; +} +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; } - - .col-lg-2 { - width: 16.66666667%; - *width: 16.56666667%; +} +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; } - - .col-lg-1 { - width: 8.33333333%; - *width: 8.23333333%; +} +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; } } @media (min-width: 1600px) { - .col-xlg-12 { - width: 100%; - *width: 99.9%; + .hidden-xlg { + display: none; } +} +/** + * + * + * + * + */ +/** + * Sizing + * + * Width and Height Classes, + * Sizes with percentage will calculate with the Reflex Grid + * + * + */ +.w-0 { + width: 0; +} - .col-xlg-11 { - width: 91.66666667%; - *width: 91.56666667%; - } +.h-0 { + height: 0; +} - .col-xlg-10 { - width: 83.33333333%; - *width: 83.23333333%; - } +.w-1 { + width: 1px; +} - .col-xlg-9 { - width: 75%; - *width: 74.9%; - } +.h-1 { + height: 1px; +} - .col-xlg-8 { - width: 66.66666667%; - *width: 66.56666667%; - } +.w-col-1 { + width: 8.3333333333%; +} - .col-xlg-7 { - width: 58.33333333%; - *width: 58.23333333%; - } +.h-col-1 { + height: 8.3333333333%; +} - .col-xlg-6 { - width: 50%; - *width: 49.9%; - } +.w-col-2 { + width: 16.6666666667%; +} - .col-xlg-5 { - width: 41.66666667%; - *width: 41.56666667%; - } +.h-col-2 { + height: 16.6666666667%; +} - .col-xlg-4 { - width: 33.33333333%; - *width: 33.23333333%; - } +.w-col-3 { + width: 25%; +} - .col-xlg-3 { - width: 25%; - *width: 24.9%; - } +.h-col-3 { + height: 25%; +} - .col-xlg-2 { - width: 16.66666667%; - *width: 16.56666667%; - } +.w-col-4 { + width: 33.3333333333%; +} - .col-xlg-1 { - width: 8.33333333%; - *width: 8.23333333%; - } +.h-col-4 { + height: 33.3333333333%; } -.col-auto { - flex: 1 0 0px; - width: auto; + +.w-col-5 { + width: 41.6666666667%; } -@media (min-width: 576px) { - .col-xs-auto { - flex: 1 0 0px; - width: auto; - } +.h-col-5 { + height: 41.6666666667%; } -@media (min-width: 768px) { - .col-sm-auto { - flex: 1 0 0px; - width: auto; - } + +.w-col-6 { + width: 50%; } -@media (min-width: 992px) { - .col-md-auto { - flex: 1 0 0px; - width: auto; - } + +.h-col-6 { + height: 50%; } -@media (min-width: 1200px) { - .col-lg-auto { - flex: 1 0 0px; - width: auto; - } + +.w-col-7 { + width: 58.3333333333%; } -@media (min-width: 1600px) { - .col-xlg-auto { - flex: 1 0 0px; - width: auto; - } + +.h-col-7 { + height: 58.3333333333%; } -.order-12 { - order: 12; + +.w-col-8 { + width: 66.6666666667%; } -.order-11 { - order: 11; +.h-col-8 { + height: 66.6666666667%; } -.order-10 { - order: 10; +.w-col-9 { + width: 75%; } -.order-9 { - order: 9; +.h-col-9 { + height: 75%; } -.order-8 { - order: 8; +.w-col-10 { + width: 83.3333333333%; } -.order-7 { - order: 7; +.h-col-10 { + height: 83.3333333333%; } -.order-6 { - order: 6; +.w-col-11 { + width: 91.6666666667%; } -.order-5 { - order: 5; +.h-col-11 { + height: 91.6666666667%; } -.order-4 { - order: 4; +.w-col-12 { + width: 100%; } -.order-3 { - order: 3; +.h-col-12 { + height: 100%; } -.order-2 { - order: 2; +.w-1 { + width: 0.5rem; } -.order-1 { - order: 1; +.w-2 { + width: 1rem; } -.order-0 { - order: 0; +.w-3 { + width: 1.5rem; } -@media (min-width: 576px) { - .order-xs-12 { - order: 12; - } +.w-4 { + width: 2rem; +} - .order-xs-11 { - order: 11; - } +.w-5 { + width: 2.5rem; +} + +.w-6 { + width: 3rem; +} - .order-xs-10 { - order: 10; - } +.w-7 { + width: 3.5rem; +} - .order-xs-9 { - order: 9; - } +.w-8 { + width: 4rem; +} - .order-xs-8 { - order: 8; - } +.w-9 { + width: 4.5rem; +} - .order-xs-7 { - order: 7; - } +.w-10 { + width: 5rem; +} - .order-xs-6 { - order: 6; - } +.w-11 { + width: 5.5rem; +} - .order-xs-5 { - order: 5; - } +.w-12 { + width: 6rem; +} - .order-xs-4 { - order: 4; - } +.w-13 { + width: 6.5rem; +} - .order-xs-3 { - order: 3; - } +.w-14 { + width: 7rem; +} - .order-xs-2 { - order: 2; - } +.w-15 { + width: 7.5rem; +} - .order-xs-1 { - order: 1; - } +.w-16 { + width: 8rem; +} - .order-xs-0 { - order: 0; - } +.w-17 { + width: 8.5rem; } -@media (min-width: 768px) { - .order-sm-12 { - order: 12; - } - .order-sm-11 { - order: 11; - } +.w-18 { + width: 9rem; +} - .order-sm-10 { - order: 10; - } +.w-19 { + width: 9.5rem; +} - .order-sm-9 { - order: 9; - } +.w-20 { + width: 10rem; +} - .order-sm-8 { - order: 8; - } +.w-21 { + width: 10.5rem; +} - .order-sm-7 { - order: 7; - } +.w-22 { + width: 11rem; +} - .order-sm-6 { - order: 6; - } +.w-23 { + width: 11.5rem; +} - .order-sm-5 { - order: 5; - } +.w-24 { + width: 12rem; +} - .order-sm-4 { - order: 4; - } +.w-25 { + width: 12.5rem; +} - .order-sm-3 { - order: 3; - } +.w-26 { + width: 13rem; +} - .order-sm-2 { - order: 2; - } +.w-27 { + width: 13.5rem; +} - .order-sm-1 { - order: 1; - } +.w-28 { + width: 14rem; +} - .order-sm-0 { - order: 0; - } +.w-29 { + width: 14.5rem; } -@media (min-width: 992px) { - .order-md-12 { - order: 12; - } - .order-md-11 { - order: 11; - } +.w-30 { + width: 15rem; +} - .order-md-10 { - order: 10; - } +.w-31 { + width: 15.5rem; +} - .order-md-9 { - order: 9; - } +.w-32 { + width: 16rem; +} - .order-md-8 { - order: 8; - } +.w-33 { + width: 16.5rem; +} - .order-md-7 { - order: 7; - } +.w-34 { + width: 17rem; +} - .order-md-6 { - order: 6; - } +.w-35 { + width: 17.5rem; +} - .order-md-5 { - order: 5; - } +.w-36 { + width: 18rem; +} - .order-md-4 { - order: 4; - } +.w-37 { + width: 18.5rem; +} - .order-md-3 { - order: 3; - } +.w-38 { + width: 19rem; +} - .order-md-2 { - order: 2; - } +.w-39 { + width: 19.5rem; +} - .order-md-1 { - order: 1; - } +.w-40 { + width: 20rem; +} - .order-md-0 { - order: 0; - } +.w-41 { + width: 20.5rem; } -@media (min-width: 1200px) { - .order-lg-12 { - order: 12; - } - .order-lg-11 { - order: 11; - } +.w-42 { + width: 21rem; +} - .order-lg-10 { - order: 10; - } +.w-43 { + width: 21.5rem; +} - .order-lg-9 { - order: 9; - } +.w-44 { + width: 22rem; +} - .order-lg-8 { - order: 8; - } +.w-45 { + width: 22.5rem; +} - .order-lg-7 { - order: 7; - } +.w-46 { + width: 23rem; +} - .order-lg-6 { - order: 6; - } +.w-47 { + width: 23.5rem; +} - .order-lg-5 { - order: 5; - } +.w-48 { + width: 24rem; +} - .order-lg-4 { - order: 4; - } +.w-49 { + width: 24.5rem; +} - .order-lg-3 { - order: 3; - } +.w-50 { + width: 25rem; +} - .order-lg-2 { - order: 2; - } +.h-1 { + height: 0.5rem; +} - .order-lg-1 { - order: 1; - } +.h-2 { + height: 1rem; +} - .order-lg-0 { - order: 0; - } +.h-3 { + height: 1.5rem; } -@media (min-width: 1600px) { - .order-xlg-12 { - order: 12; - } - .order-xlg-11 { - order: 11; - } +.h-4 { + height: 2rem; +} - .order-xlg-10 { - order: 10; - } +.h-5 { + height: 2.5rem; +} - .order-xlg-9 { - order: 9; - } +.h-6 { + height: 3rem; +} - .order-xlg-8 { - order: 8; - } +.h-7 { + height: 3.5rem; +} - .order-xlg-7 { - order: 7; - } +.h-8 { + height: 4rem; +} - .order-xlg-6 { - order: 6; - } +.h-9 { + height: 4.5rem; +} - .order-xlg-5 { - order: 5; - } +.h-10 { + height: 5rem; +} - .order-xlg-4 { - order: 4; - } +.h-11 { + height: 5.5rem; +} - .order-xlg-3 { - order: 3; - } +.h-12 { + height: 6rem; +} - .order-xlg-2 { - order: 2; - } +.h-13 { + height: 6.5rem; +} - .order-xlg-1 { - order: 1; - } +.h-14 { + height: 7rem; +} - .order-xlg-0 { - order: 0; - } +.h-15 { + height: 7.5rem; } -.offset-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; + +.h-16 { + height: 8rem; } -.offset-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; +.h-17 { + height: 8.5rem; } -.offset-9 { - margin-left: 75%; - *margin-left: 74.9%; +.h-18 { + height: 9rem; } -.offset-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; +.h-19 { + height: 9.5rem; } -.offset-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; +.h-20 { + height: 10rem; } -.offset-6 { - margin-left: 50%; - *margin-left: 49.9%; +.h-21 { + height: 10.5rem; } -.offset-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; +.h-22 { + height: 11rem; } -.offset-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; +.h-23 { + height: 11.5rem; } -.offset-3 { - margin-left: 25%; - *margin-left: 24.9%; +.h-24 { + height: 12rem; } -.offset-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; +.h-25 { + height: 12.5rem; } -.offset-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; +.h-26 { + height: 13rem; } -@media (min-width: 576px) { - .offset-xs-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; - } +.h-27 { + height: 13.5rem; +} - .offset-xs-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; - } +.h-28 { + height: 14rem; +} - .offset-xs-9 { - margin-left: 75%; - *margin-left: 74.9%; - } +.h-29 { + height: 14.5rem; +} - .offset-xs-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; - } +.h-30 { + height: 15rem; +} - .offset-xs-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; - } +.h-31 { + height: 15.5rem; +} - .offset-xs-6 { - margin-left: 50%; - *margin-left: 49.9%; - } +.h-32 { + height: 16rem; +} - .offset-xs-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; - } +.h-33 { + height: 16.5rem; +} - .offset-xs-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; - } +.h-34 { + height: 17rem; +} - .offset-xs-3 { - margin-left: 25%; - *margin-left: 24.9%; - } +.h-35 { + height: 17.5rem; +} - .offset-xs-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; - } +.h-36 { + height: 18rem; +} - .offset-xs-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; - } +.h-37 { + height: 18.5rem; +} - .offset-xs-0 { - margin-left: 0; - *margin-left: -0.1%; - } +.h-38 { + height: 19rem; +} + +.h-39 { + height: 19.5rem; } -@media (min-width: 768px) { - .offset-sm-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; - } - .offset-sm-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; - } +.h-40 { + height: 20rem; +} - .offset-sm-9 { - margin-left: 75%; - *margin-left: 74.9%; - } +.h-41 { + height: 20.5rem; +} - .offset-sm-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; - } +.h-42 { + height: 21rem; +} - .offset-sm-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; - } +.h-43 { + height: 21.5rem; +} - .offset-sm-6 { - margin-left: 50%; - *margin-left: 49.9%; - } +.h-44 { + height: 22rem; +} - .offset-sm-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; - } +.h-45 { + height: 22.5rem; +} - .offset-sm-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; - } +.h-46 { + height: 23rem; +} - .offset-sm-3 { - margin-left: 25%; - *margin-left: 24.9%; - } +.h-47 { + height: 23.5rem; +} - .offset-sm-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; - } +.h-48 { + height: 24rem; +} - .offset-sm-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; - } +.h-49 { + height: 24.5rem; +} - .offset-sm-0 { - margin-left: 0; - *margin-left: -0.1%; - } +.h-50 { + height: 25rem; } -@media (min-width: 992px) { - .offset-md-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; - } - .offset-md-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; - } +/** + * + * + */ +.m-top-0 { + margin-top: 0; +} - .offset-md-9 { - margin-left: 75%; - *margin-left: 74.9%; - } +.m-top-1 { + margin-top: 1px; +} - .offset-md-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; - } +.m-top-2 { + margin-top: 0.125rem; +} - .offset-md-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; - } +.m-top-3 { + margin-top: 0.5rem; +} - .offset-md-6 { - margin-left: 50%; - *margin-left: 49.9%; - } +.m-top-4 { + margin-top: 1.125rem; +} - .offset-md-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; - } +.m-top-5 { + margin-top: 2rem; +} - .offset-md-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; - } +.m-top-6 { + margin-top: 3.125rem; +} - .offset-md-3 { - margin-left: 25%; - *margin-left: 24.9%; - } +.m-top-7 { + margin-top: 4.5rem; +} - .offset-md-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; - } +.m-top-8 { + margin-top: 6.125rem; +} - .offset-md-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; - } +.m-top-9 { + margin-top: 8rem; +} - .offset-md-0 { - margin-left: 0; - *margin-left: -0.1%; - } +.m-top-10 { + margin-top: 10.125rem; } -@media (min-width: 1200px) { - .offset-lg-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; - } - .offset-lg-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; - } +.m-bottom-0 { + margin-bottom: 0; +} - .offset-lg-9 { - margin-left: 75%; - *margin-left: 74.9%; - } +.m-bottom-1 { + margin-bottom: 1px; +} - .offset-lg-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; - } +.m-bottom-2 { + margin-bottom: 0.125rem; +} - .offset-lg-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; - } +.m-bottom-3 { + margin-bottom: 0.5rem; +} - .offset-lg-6 { - margin-left: 50%; - *margin-left: 49.9%; - } +.m-bottom-4 { + margin-bottom: 1.125rem; +} - .offset-lg-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; - } +.m-bottom-5 { + margin-bottom: 2rem; +} - .offset-lg-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; - } +.m-bottom-6 { + margin-bottom: 3.125rem; +} - .offset-lg-3 { - margin-left: 25%; - *margin-left: 24.9%; - } +.m-bottom-7 { + margin-bottom: 4.5rem; +} - .offset-lg-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; - } +.m-bottom-8 { + margin-bottom: 6.125rem; +} - .offset-lg-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; - } +.m-bottom-9 { + margin-bottom: 8rem; +} - .offset-lg-0 { - margin-left: 0; - *margin-left: -0.1%; - } +.m-bottom-10 { + margin-bottom: 10.125rem; } -@media (min-width: 1600px) { - .offset-xlg-11 { - margin-left: 91.66666667%; - *margin-left: 91.56666667%; - } - .offset-xlg-10 { - margin-left: 83.33333333%; - *margin-left: 83.23333333%; - } +.m-left-0 { + margin-left: 0; +} - .offset-xlg-9 { - margin-left: 75%; - *margin-left: 74.9%; - } +.m-left-1 { + margin-left: 1px; +} - .offset-xlg-8 { - margin-left: 66.66666667%; - *margin-left: 66.56666667%; - } +.m-left-2 { + margin-left: 0.125rem; +} - .offset-xlg-7 { - margin-left: 58.33333333%; - *margin-left: 58.23333333%; - } +.m-left-3 { + margin-left: 0.5rem; +} - .offset-xlg-6 { - margin-left: 50%; - *margin-left: 49.9%; - } +.m-left-4 { + margin-left: 1.125rem; +} - .offset-xlg-5 { - margin-left: 41.66666667%; - *margin-left: 41.56666667%; - } +.m-left-5 { + margin-left: 2rem; +} - .offset-xlg-4 { - margin-left: 33.33333333%; - *margin-left: 33.23333333%; - } +.m-left-6 { + margin-left: 3.125rem; +} - .offset-xlg-3 { - margin-left: 25%; - *margin-left: 24.9%; - } +.m-left-7 { + margin-left: 4.5rem; +} - .offset-xlg-2 { - margin-left: 16.66666667%; - *margin-left: 16.56666667%; - } +.m-left-8 { + margin-left: 6.125rem; +} - .offset-xlg-1 { - margin-left: 8.33333333%; - *margin-left: 8.23333333%; - } +.m-left-9 { + margin-left: 8rem; +} - .offset-xlg-0 { - margin-left: 0; - *margin-left: -0.1%; - } +.m-left-10 { + margin-left: 10.125rem; } -.wrap { - flex-wrap: wrap; + +.m-right-0 { + margin-right: 0; } -.no-wrap { - flex-wrap: nowrap; +.m-right-1 { + margin-right: 1px; } -.no-wrap [class*=col-] { - flex-shrink: 1; +.m-right-2 { + margin-right: 0.125rem; } -.wrap-reverse { - flex-wrap: wrap-reverse; +.m-right-3 { + margin-right: 0.5rem; } -.direction-row { - flex-direction: row; +.m-right-4 { + margin-right: 1.125rem; } -.direction-row-reverse { - flex-direction: row-reverse; +.m-right-5 { + margin-right: 2rem; } -.direction-column { - flex-direction: column; +.m-right-6 { + margin-right: 3.125rem; } -.direction-column-reverse { - flex-direction: column-reverse; +.m-right-7 { + margin-right: 4.5rem; } -.align-start { - align-items: flex-start; +.m-right-8 { + margin-right: 6.125rem; } -.align-end { - align-items: flex-end; +.m-right-9 { + margin-right: 8rem; } -.align-end [class*=col-] { - vertical-align: bottom; +.m-right-10 { + margin-right: 10.125rem; } -.align-center { - align-items: center; +.p-top-0 { + padding-top: 0; } -.align-center [class*=col-] { - vertical-align: middle; +.p-top-1 { + padding-top: 1px; } -.align-baseline { - align-items: baseline; +.p-top-0 { + padding-top: 0.125rem; } -.align-content-start { - align-content: flex-start; +.p-top-1 { + padding-top: 0rem; } -.align-content-end { - align-content: flex-end; +.p-top-2 { + padding-top: 0.125rem; } -.align-content-end [class*=col-] { - vertical-align: bottom; +.p-top-3 { + padding-top: 0.5rem; } -.align-content-center { - align-content: center; +.p-top-4 { + padding-top: 1.125rem; } -.align-content-space-between { - align-content: space-between; +.p-top-5 { + padding-top: 2rem; } -.align-content-space-around { - align-content: space-around; +.p-top-6 { + padding-top: 3.125rem; } -.align-self-stretch { - align-self: stretch; +.p-top-7 { + padding-top: 4.5rem; } -.align-self-start { - align-self: flex-start; +.p-top-8 { + padding-top: 6.125rem; } -.align-self-end { - align-self: flex-end; - vertical-align: bottom; +.p-top-9 { + padding-top: 8rem; } -.align-self-center { - align-self: center; - vertical-align: middle; +.p-top-10 { + padding-top: 10.125rem; } -.align-self-baseline { - align-self: baseline; - vertical-align: baseline; +.p-bottom-0 { + padding-bottom: 0; } -.justify-start { - justify-content: flex-start; +.p-bottom-1 { + padding-bottom: 1px; } -.justify-start.grid { - text-align: left; +.p-bottom-0 { + padding-bottom: 0.125rem; } -.justify-end { - justify-content: flex-end; +.p-bottom-1 { + padding-bottom: 0rem; } -.justify-end.grid { - text-align: right; - -moz-text-align-last: right; - text-align-last: right; +.p-bottom-2 { + padding-bottom: 0.125rem; } -.justify-end.grid [class*=col-] { - text-align: left; - text-align: start; - -moz-text-align-last: left; - -moz-text-align-last: start; - text-align-last: left; - text-align-last: start; +.p-bottom-3 { + padding-bottom: 0.5rem; } -.justify-center { - justify-content: center; +.p-bottom-4 { + padding-bottom: 1.125rem; } -.justify-center.grid { - text-align: center; - -moz-text-align-last: center; - text-align-last: center; +.p-bottom-5 { + padding-bottom: 2rem; } -.justify-center.grid [class*=col-] { - text-align: left; - text-align: start; - -moz-text-align-last: left; - -moz-text-align-last: start; - text-align-last: left; - text-align-last: start; +.p-bottom-6 { + padding-bottom: 3.125rem; } -.justify-space-between { - justify-content: space-between; +.p-bottom-7 { + padding-bottom: 4.5rem; } -.justify-space-between.grid { - text-align: justify; - -moz-text-align-last: justify; - text-align-last: justify; +.p-bottom-8 { + padding-bottom: 6.125rem; } -.justify-space-between.grid [class*=col-] { - text-align: left; - text-align: start; - -moz-text-align-last: left; - -moz-text-align-last: start; - text-align-last: left; - text-align-last: start; +.p-bottom-9 { + padding-bottom: 8rem; } -.justify-space-around { - justify-content: space-around; +.p-bottom-10 { + padding-bottom: 10.125rem; } -.justify-space-around.grid { - text-align: justify; - -moz-text-align-last: justify; - text-align-last: justify; +.p-left-0 { + padding-left: 0; } -.justify-space-around.grid [class*=col-] { - text-align: left; - text-align: start; - -moz-text-align-last: left; - -moz-text-align-last: start; - text-align-last: left; - text-align-last: start; +.p-left-1 { + padding-left: 1px; } -.grid-bleed [class*=col-] { - padding: 0; +.p-left-0 { + padding-left: 0.125rem; } -.col-grid { - display: flex; - flex-direction: column; +.p-left-1 { + padding-left: 0rem; } -.col-grid.direction-row { - flex-direction: row; +.p-left-2 { + padding-left: 0.125rem; } -.col-bleed { - padding: 0; +.p-left-3 { + padding-left: 0.5rem; } -.col-bleed-x { - padding: 15px 0; +.p-left-4 { + padding-left: 1.125rem; } -.col-bleed-y { - padding: 0 15px; +.p-left-5 { + padding-left: 2rem; } -.flex-img { - display: block; - flex: 0 0 auto; - max-width: 100%; - height: auto; - width: 100%; - *width: auto; +.p-left-6 { + padding-left: 3.125rem; } -.flex-footer { - width: 100%; - margin-top: auto; - margin-bottom: 0; +.p-left-7 { + padding-left: 4.5rem; } -.flex-footer > :last-child { - margin-bottom: 0; +.p-left-8 { + padding-left: 6.125rem; } -@media (max-width: 575px) { - .hidden-xxs { - display: none; - } +.p-left-9 { + padding-left: 8rem; } -@media (min-width: 576px) { - .hidden-xs-up { - display: none; - } + +.p-left-10 { + padding-left: 10.125rem; } -@media (max-width: 767px) { - .hidden-xs-down { - display: none; - } + +.p-right-0 { + padding-right: 0; } -@media (min-width: 576px) and (max-width: 767px) { - .hidden-xs { - display: none; - } + +.p-right-1 { + padding-right: 1px; } -@media (min-width: 768px) { - .hidden-sm-up { - display: none; - } + +.p-right-0 { + padding-right: 0.125rem; } -@media (max-width: 991px) { - .hidden-sm-down { - display: none; - } + +.p-right-1 { + padding-right: 0rem; } -@media (min-width: 768px) and (max-width: 991px) { - .hidden-sm { - display: none; - } + +.p-right-2 { + padding-right: 0.125rem; } -@media (min-width: 992px) { - .hidden-md-up { - display: none; - } + +.p-right-3 { + padding-right: 0.5rem; } -@media (max-width: 1199px) { - .hidden-md-down { - display: none; - } + +.p-right-4 { + padding-right: 1.125rem; } -@media (min-width: 992px) and (max-width: 1199px) { - .hidden-md { - display: none; - } + +.p-right-5 { + padding-right: 2rem; } -@media (min-width: 1200px) { - .hidden-lg-up { - display: none; - } + +.p-right-6 { + padding-right: 3.125rem; } -@media (max-width: 1599px) { - .hidden-lg-down { - display: none; - } + +.p-right-7 { + padding-right: 4.5rem; } -@media (min-width: 1200px) and (max-width: 1599px) { - .hidden-lg { - display: none; - } + +.p-right-8 { + padding-right: 6.125rem; } -@media (min-width: 1600px) { - .hidden-xlg { - display: none; - } + +.p-right-9 { + padding-right: 8rem; +} + +.p-right-10 { + padding-right: 10.125rem; } + a { color: #fff; } @@ -4547,106 +4552,6 @@ body { z-index: 10; } -/** - * - * - */ -.w-col-1 { - width: 8.3333333333%; -} - -.w-col-2 { - width: 16.6666666667%; -} - -.w-col-3 { - width: 25%; -} - -.w-col-4 { - width: 33.3333333333%; -} - -.w-col-5 { - width: 41.6666666667%; -} - -.w-col-6 { - width: 50%; -} - -.w-col-7 { - width: 58.3333333333%; -} - -.w-col-8 { - width: 66.6666666667%; -} - -.w-col-9 { - width: 75%; -} - -.w-col-10 { - width: 83.3333333333%; -} - -.w-col-11 { - width: 91.6666666667%; -} - -.w-col-12 { - width: 100%; -} - -.w-1 { - width: 1em; -} - -.w-2 { - width: 2em; -} - -.w-3 { - width: 3em; -} - -.w-4 { - width: 4em; -} - -.w-5 { - width: 5em; -} - -.w-6 { - width: 6em; -} - -.w-7 { - width: 7em; -} - -.w-8 { - width: 8em; -} - -.w-9 { - width: 9em; -} - -.w-10 { - width: 10em; -} - -.w-11 { - width: 11em; -} - -.w-12 { - width: 12em; -} - /** * * @@ -4716,23 +4621,23 @@ body { font-weight: bolder !important; } -.text-size-default { +.t-size-default { font-size: 1rem !important; } -.text-size-small { +.t-size-small { font-size: 0.75rem !important; } -.text-size-medium { +.t-size-medium { font-size: 1.5rem !important; } -.text-size-large { +.t-size-large { font-size: 2rem !important; } -.text-size-big { +.t-size-big { font-size: 3rem !important; } @@ -5342,6 +5247,63 @@ img.media { transform: scale(1); } +.loading { + height: 60px; + width: 47px; + margin: 0 auto; + display: flex; + align-items: center; +} +.loading span { + display: block; + width: 15px; + height: 80px; + background: #d95959; + -webkit-animation-name: plain-ui__loading-animation; + animation-name: plain-ui__loading-animation; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + border-top: 1px solid #a62626; + border-bottom: 1px solid #a62626; +} +.loading span:first-child { + margin-right: 1px; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.loading span:last-child { + margin-left: 1px; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +@-webkit-keyframes plain-ui__loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} + +@keyframes plain-ui__loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} .masonry { display: flex; width: 100%; diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss index 6e54a12..3e2792b 100644 --- a/src/scss/components/_loading.scss +++ b/src/scss/components/_loading.scss @@ -4,7 +4,49 @@ * */ -@mixin component__loading() +$plain-ui__loading__background-color: $plain-ui__danger-light !default; + +@mixin plain-ui__component__loading() { + .loading { + height: 60px; + width: 47px; + margin: 0 auto; + + display: flex; + align-items: center; + + span { + display: block; + width: 15px; + height: 80px; + + background: $plain-ui__loading__background-color; + + animation-name: plain-ui__loading-animation; + animation-duration: 0.5s; + animation-iteration-count: infinite; + + animation-delay: 0.15s; + + border-top: 1px solid darken($plain-ui__loading__background-color, 20%); + border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%); + + &:first-child { + margin-right: 1px; + animation-delay: 0s; + } + + &:last-child { + margin-left: 1px; + animation-delay: 0.3s; + } + } + } + @keyframes plain-ui__loading-animation { + 0% { height: 60px; } + 50% { height: 40px; } + 100% { height: 60px; } + } } \ No newline at end of file diff --git a/src/scss/helpers/_core.scss b/src/scss/helpers/_core.scss index 0b9261c..89dcd3e 100644 --- a/src/scss/helpers/_core.scss +++ b/src/scss/helpers/_core.scss @@ -43,24 +43,7 @@ } } - /** - * - * - */ - - @for $i from 1 through $reflex-columns { - .w-col-#{$i} { - width: percentage(($i / $reflex-columns)); - } - } - - $plain-ui__width: 12; - @for $i from 1 through $plain-ui__width { - .w-#{$i} { - width: #{$i}em; - } - } /** * @@ -134,7 +117,7 @@ } @each $name, $font-size in $plain-ui__font-sizes { - .text-size-#{$name} { + .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); } diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index c5c999d..11fc561 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -27,7 +27,6 @@ $plain-ui__helpers__spacing-steps: 10 !default; @for $i from 2 through $plain-ui__helpers__spacing-steps { $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; @include spacing('m', 'margin', $direction, $i, $value); - //@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true); } } @@ -39,6 +38,5 @@ $plain-ui__helpers__spacing-steps: 10 !default; @for $i from 0 through $plain-ui__helpers__spacing-steps { $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; @include spacing('p', 'padding', $direction, $i, $value); - //@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true); } } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 7c6c17c..655113a 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -8,10 +8,6 @@ 'variables', 'core', - 'helpers/core', - 'helpers/sizing', - 'helpers/spacing', - 'components/badge', 'components/button', 'components/field', @@ -24,9 +20,14 @@ 'components/slider', 'components/bar', 'components/modal', + 'components/loading', 'layout/masonry', - 'layout/flex'; + 'layout/flex', + + 'helpers/core', + 'helpers/sizing', + 'helpers/spacing'; @include plain-ui__core(); @include plain-ui__helpers__core(); @@ -46,5 +47,6 @@ @include plain-ui__component__bar(); @include plain-ui__component__tabs(); @include plain-ui__component__modal(); +@include plain-ui__component__loading(); @include plain-ui__layout__masonry(); \ No newline at end of file