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