@@ -321,7 +321,6 @@
-
@@ -330,6 +329,38 @@
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 864d61d..e7fd776 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -15,6 +15,38 @@
font-style: normal;
font-display: swap;
}
+/**
+ * functions
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ * strip unit from value
+ *
+ * @param {mixed} $value
+ * @return {number}
+ *
+ */
+/**
+ * get value of key "default" in map
+ *
+ * @param {map} $value
+ * @return {boolean|unit}
+ *
+ */
+/**
+ * factor
+ *
+ *
+ *
+ * @param {integer} $x
+ * @return {float}
+ *
+ */
/**
* mixins
*
@@ -279,6 +311,90 @@ summary {
display: list-item;
}
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ font-family: "IBM Plex Mono", sans-serif;
+ font-weight: bold;
+ line-height: 1.2;
+ margin: 0 0 15px;
+}
+@media only screen and (min-width: 992px) {
+ h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ margin: 0 0 20px;
+ }
+}
+
+h5 {
+ line-height: 1.4;
+}
+
+h6 {
+ line-height: 1.4;
+}
+
+h1, .h1 {
+ font-size: 2.5rem;
+}
+@media only screen and (min-width: 992px) {
+ h1, .h1 {
+ font-size: 3rem;
+ }
+}
+
+h2, .h2 {
+ font-size: 2rem;
+}
+@media only screen and (min-width: 992px) {
+ h2, .h2 {
+ font-size: 2.4rem;
+ }
+}
+
+h3, .h3 {
+ font-size: 1.75rem;
+}
+@media only screen and (min-width: 992px) {
+ h3, .h3 {
+ font-size: 2.1rem;
+ }
+}
+
+h4, .h4 {
+ font-size: 1.5rem;
+}
+@media only screen and (min-width: 992px) {
+ h4, .h4 {
+ font-size: 1.8rem;
+ }
+}
+
+h5, .h5 {
+ font-size: 1.25rem;
+}
+@media only screen and (min-width: 992px) {
+ h5, .h5 {
+ font-size: 1.5rem;
+ }
+}
+
+h6, .h6 {
+ font-size: 1rem;
+}
+@media only screen and (min-width: 992px) {
+ h6, .h6 {
+ font-size: 1.2rem;
+ }
+}
+
/**
*
*
@@ -590,6 +706,14 @@ body {
*
*
*/
+.overflow-x-hidden {
+ overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+ overflow-y: hidden;
+}
+
.badge {
display: inline-block;
background-color: #3e3e3e;
@@ -688,8 +812,7 @@ body {
font-family: "IBM Plex Mono", sans-serif;
}
.field-label .icon {
- vertical-align: sub;
- font-size: 1.1rem;
+ vertical-align: text-bottom;
}
.field-label:hover {
cursor: pointer;
@@ -796,7 +919,7 @@ svg.field-choice__checked {
max-width: 100%;
vertical-align: middle;
overflow: hidden;
- font-size: 1.2rem;
+ font-size: 1.4rem;
fill: #3e3e3e;
}
@@ -924,20 +1047,23 @@ img.media {
}
.slider {
- display: flex;
+ position: relative;
+ overflow-x: visible;
}
.slider__inner {
display: flex;
- overflow: hidden;
+ white-space: nowrap;
}
.slider__item {
- flex: none;
- width: 33%;
+ padding: 0 0.6em;
+ display: inline-block;
+ white-space: normal;
+ flex-shrink: 0;
}
.bar {
display: flex;
- height: 2.8em;
+ min-height: 2.8em;
background-color: #3e3e3e;
color: white;
}
@@ -963,17 +1089,18 @@ img.media {
}
.tabs {
- display: block;
+ display: flex;
+ flex-direction: column;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs {
- display: flex;
width: auto;
+ flex-direction: row;
}
}
.tabs__item {
- height: 100%;
+ min-height: 2.8em;
display: flex;
align-items: center;
padding: 0 1em;
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index 604d657..b8c9bd6 100644
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@@ -14,7 +14,8 @@
'core/typography';
@include plain-ui__core__normalize();
-//@include plain__core__heading();
+@include plain-ui__core__heading();
+
//@include plain__core__typography();
@mixin plain-ui__core() {
diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss
new file mode 100644
index 0000000..da4003b
--- /dev/null
+++ b/src/scss/_functions.scss
@@ -0,0 +1,54 @@
+/**
+ * functions
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+
+
+/**
+ * strip unit from value
+ *
+ * @param {mixed} $value
+ * @return {number}
+ *
+ */
+@function stripUnit($value) {
+ @return $value / ($value * 0 + 1);
+}
+
+
+/**
+ * get value of key "default" in map
+ *
+ * @param {map} $value
+ * @return {boolean|unit}
+ *
+ */
+@function getDefault($map) {
+
+ $default: false;
+
+ @if map-has-key($map, 'default') {
+ $default: map-get($map, 'default');
+ }
+
+ @return $default;
+}
+
+
+/**
+ * factor
+ *
+ *
+ *
+ * @param {integer} $x
+ * @return {float}
+ *
+ */
+@function factor($x) {
+ @return ($x * $x) / 2;
+}
\ No newline at end of file
diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss
index 7cbf0cd..76cb3b4 100644
--- a/src/scss/components/_bar.scss
+++ b/src/scss/components/_bar.scss
@@ -10,7 +10,7 @@
.bar {
display: flex;
- height: 2.8em;
+ min-height: 2.8em;
background-color: $plain-ui__primary-light;
color: white;
diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss
index 59672b6..cd4fe9c 100644
--- a/src/scss/components/_field.scss
+++ b/src/scss/components/_field.scss
@@ -37,8 +37,7 @@
font-family: $plain-ui__font-family;
.icon {
- vertical-align: sub;
- font-size: 1.1rem;
+ vertical-align: text-bottom;
}
&:hover {
diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss
index 3873149..69fff33 100644
--- a/src/scss/components/_icon.scss
+++ b/src/scss/components/_icon.scss
@@ -16,7 +16,7 @@
vertical-align: middle;
overflow: hidden;
- font-size: 1.2rem;
+ font-size: 1.4rem;
fill: $plain-ui__primary-light;
}
diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss
index 283ef58..530007c 100644
--- a/src/scss/components/_slider.scss
+++ b/src/scss/components/_slider.scss
@@ -10,16 +10,19 @@
@mixin plain-ui__component__slider()
{
.slider {
- display: flex;
+ position: relative;
+ overflow-x: visible;
&__inner {
display: flex;
- overflow: hidden;
+ white-space: nowrap;
}
&__item {
- flex: none;
- width: 33%;
+ padding: 0 .6em;
+ display: inline-block;
+ white-space: normal;
+ flex-shrink: 0;
}
}
}
\ No newline at end of file
diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss
index fd66f4f..6a629ac 100644
--- a/src/scss/components/_tabs.scss
+++ b/src/scss/components/_tabs.scss
@@ -7,16 +7,18 @@
@mixin plain-ui__component__tabs()
{
.tabs {
- display: block;
+ display: flex;
+ flex-direction: column;
+
width: 100%;
@include plain-ui__media-sm() {
- display: flex;
width: auto;
+ flex-direction: row;
}
&__item {
- height: 100%;
+ min-height: 2.8em;
display: flex;
align-items: center;
diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss
index 96ea240..5aa02eb 100644
--- a/src/scss/core/_heading.scss
+++ b/src/scss/core/_heading.scss
@@ -21,7 +21,7 @@
line-height: 1.2;
margin: $plain-ui__heading__margin;
- //@include crispy__media-breakpoints('margin', $plain-ui__heading__margin-breakpoints);
+ @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 {
@@ -35,7 +35,7 @@
@each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size;
- //@include crispy__media-breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
+ @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
}
}
}
\ No newline at end of file
diff --git a/src/scss/core/helpers/_core.scss b/src/scss/core/helpers/_core.scss
index 56cffc6..e5eb25f 100644
--- a/src/scss/core/helpers/_core.scss
+++ b/src/scss/core/helpers/_core.scss
@@ -203,4 +203,12 @@
*
*
*/
+
+ .overflow-x-hidden {
+ overflow-x: hidden;
+ }
+
+ .overflow-y-hidden {
+ overflow-y: hidden;
+ }
}
\ No newline at end of file
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index b06e8d8..9772dce 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -2,6 +2,7 @@
'../fonts/stylesheet',
+ 'functions',
'mixins',
'variables',
'core',
Layout
Slider
+
@@ -337,39 +368,6 @@
food truck yr franzen pabst
-
-
+
+
+
+ food truck yr franzen pabst
+
+
+
+
+
+
+
+ food truck yr franzen pabst
+
+
+
+
+
+
+
+ food truck yr franzen pabst
+
+
+
+
+
+
+
+ food truck yr franzen pabst
+
+
+
-
-
-
- food truck yr franzen pabst
-
-
-
-
-
-
-
- food truck yr franzen pabst
-
-
-
-
-
-
-
- food truck yr franzen pabst
-
-
-
-
-
-
-
- food truck yr franzen pabst
-
-
-