release/0.2
Björn 3 years ago
parent b707a35703
commit a81e44d511

20
dist/index.html vendored

@ -31,15 +31,17 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<p> <div class="content">
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components. <p>
</p> <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
<p> </p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. <p>
</p> Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
<p> </p>
The Basic Idea was a quick <p>
</p> The Basic Idea was a quick
</p>
</div>
</div> </div>
</div> </div>

207
dist/plain-ui.css vendored

@ -1625,6 +1625,7 @@
--black: #000000; --black: #000000;
--text: #363636; --text: #363636;
--background: #f9f9f9; --background: #f9f9f9;
--border: #dfdfdf;
} }
/** /**
@ -1671,6 +1672,26 @@ legend {
box-sizing: border-box; box-sizing: border-box;
} }
body {
font-family: "IBM Plex Mono", sans-serif;
color: var(--text);
background-color: var(--background);
direction: ltr;
font-size: 1rem;
line-height: 1.618;
}
a {
color: var(--link);
transition: color 0.5s;
}
a:hover {
color: var(--link-hover);
}
a:focus {
outline: none;
}
main { main {
display: block; display: block;
} }
@ -1687,18 +1708,17 @@ table {
} }
figure { figure {
margin: 0 0 15px; margin: 0 0 1rem;
} }
figcaption { figcaption {
margin: 10px 0; margin: 0;
} }
/** /**
* form elements * form elements
* *
* *
*
*/ */
button, button,
input, input,
@ -1708,30 +1728,34 @@ textarea {
margin: 0; margin: 0;
} }
fieldset {
margin: 0 0 1rem;
}
button, button,
select { select {
text-transform: none; text-transform: none;
} }
button,
[type=button], [type=button],
[type=reset], [type=reset],
[type=submit] { [type=submit],
button {
-webkit-appearance: button; -webkit-appearance: button;
} }
button::-moz-focus-inner,
[type=button]::-moz-focus-inner, [type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner, [type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner { [type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
button:-moz-focusring,
[type=button]:-moz-focusring, [type=button]:-moz-focusring,
[type=reset]:-moz-focusring, [type=reset]:-moz-focusring,
[type=submit]:-moz-focusring { [type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
@ -1771,7 +1795,7 @@ hr {
height: 0; height: 0;
overflow: visible; overflow: visible;
border: 0; border: 0;
border-top: 1px solid #b3b2af; border-top: 1px solid var(--border);
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@ -1788,8 +1812,8 @@ summary {
} }
code, code,
pre,
kbd, kbd,
pre,
samp { samp {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-size: 1rem; font-size: 1rem;
@ -1804,14 +1828,6 @@ samp {
* @link https://github.com/tentakelfabrik/crispy-css * @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
/**
* typograhy
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
h3, .h3, h3, .h3,
@ -1821,7 +1837,7 @@ h6, .h6 {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
margin: 0 0 15px; margin: 0 0 1rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h1, .h1, h1, .h1,
@ -1830,7 +1846,7 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin: 0 0 20px; margin: 0 0 1.5rem;
} }
} }
@ -1839,7 +1855,7 @@ h5 {
} }
h6 { h6 {
line-height: 1.4; line-height: 1.618;
} }
h1, .h1 { h1, .h1 {
@ -1896,137 +1912,107 @@ h6, .h6 {
} }
} }
p { /**
margin: 0 0 15px; * Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
.content {
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
/**
* blockquote
*
*
*/
/**
* lists
*
*/
}
.content p {
margin: 0 0 1rem;
} }
.content a,
a, .content ins,
ins, .content u {
u {
-webkit-text-decoration-skip: ink edges; -webkit-text-decoration-skip: ink edges;
text-decoration-skip: ink edges; text-decoration-skip: ink edges;
} }
.content b,
b, .content strong {
strong {
font-weight: bolder; font-weight: bolder;
} }
.content small {
small {
font-size: 80%; font-size: 80%;
} }
.content sub,
/** .content sup {
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%; font-size: 70%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
.content sub {
sub {
bottom: -0.25em; bottom: -0.25em;
} }
.content sup {
sup {
top: -0.5em; top: -0.5em;
} }
.content abbr[title] {
abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
cursor: help; cursor: help;
text-decoration: none; text-decoration: none;
} }
.content mark {
mark {
padding: 0.25em; padding: 0.25em;
} }
.content blockquote {
/**
* blockquote
*
*
*/
blockquote {
border-left: 1px solid #3e3e3e; border-left: 1px solid #3e3e3e;
margin-left: 0; margin-left: 0;
padding: 5px 12px; padding: 5px 12px;
} }
blockquote p:last-child { .content blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.content dl,
/** .content ol,
* lists .content ul {
*
*/
dl,
ol,
ul {
padding: 0; padding: 0;
margin: 0 0 15px; margin: 0 0 1rem;
} }
.content ol,
ol, .content ul {
ul {
margin-left: 1.5em; margin-left: 1.5em;
} }
.content ol ol,
ol ol, .content ul ul {
ul ul {
margin-top: 0; margin-top: 0;
margin-left: 1em; margin-left: 1em;
} }
.content ol {
ol {
list-style: decimal outside; list-style: decimal outside;
} }
.content ul {
ul {
list-style: disc outside; list-style: disc outside;
} }
.content dl {
dl {
margin-left: 0.5em; margin-left: 0.5em;
} }
.content dd,
dd, .content dt {
dt {
margin: 0; margin: 0;
} }
.content dt {
dt {
font-weight: bold; font-weight: bold;
} }
a {
color: var(--link);
transition: color 0.5s;
}
a:hover {
color: var(--link-hover);
}
a:focus {
outline: none;
}
/**
* body
*
*/
body {
font-family: "IBM Plex Mono", sans-serif;
color: var(--text);
background-color: var(--background);
direction: ltr;
font-size: 1rem;
line-height: 1.4;
}
/** /**
* <span class="badge"> * <span class="badge">
* A * A
@ -4869,7 +4855,7 @@ body {
.badge { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: var(--primary);
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
@ -5149,7 +5135,7 @@ svg.field-choice__checked {
padding: 0.75em 1.1em; padding: 0.75em 1.1em;
font-size: 0.7rem; font-size: 0.7rem;
background: #3e3e3e; background: #3e3e3e;
line-height: 1.4; line-height: 1.618;
margin: 0; margin: 0;
color: white; color: white;
} }
@ -5214,7 +5200,7 @@ img.media {
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: #3e3e3e; background-color: #3e3e3e;
color: white; color: var(--white);
} }
.bar .icon { .bar .icon {
font-size: 1.5rem; font-size: 1.5rem;
@ -5236,6 +5222,9 @@ img.media {
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { .bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em; margin-right: 0.75em;
} }
.bar .button:active {
outline: none;
}
.tabs { .tabs {
display: flex; display: flex;

@ -0,0 +1,13 @@
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

@ -11,38 +11,4 @@
@import @import
'core/normalize', 'core/normalize',
'core/heading', 'core/heading',
'core/typography'; 'core/content';
@include plain-ui__core__heading();
@include plain-ui__core__typography();
a {
color: var(--link);
transition: color 0.5s;
&:hover {
color: var(--link-hover);
}
&:focus {
outline: none;
}
}
/**
* body
*
*/
body {
font-family: $plain-ui__font-family;
color: var(--text);
background-color: var(--background);
direction: $plain-ui__direction;
font-size: $plain-ui__font-size;
//@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
line-height: $plain-ui__line-height;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
}

@ -1,175 +0,0 @@
/**
* normalize
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin crispy__core__normalize()
{
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}
body,
html {
margin: 0;
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
main {
display: block; // Render the `main` element consistently in IE.
}
*,
*::after,
*::before {
box-sizing: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
figure {
margin: $crispy__margin;
@include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
}
figcaption {
margin: 10px 0;
}
/**
* form elements
*
*
*/
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
fieldset {
padding: $crispy__padding;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
display: table; // Correct the text wrapping in Edge and IE.
max-width: 100%; // Correct the text wrapping in Edge and IE.
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
white-space: normal; // Correct the text wrapping in Edge and IE.
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
outline-offset: -2px; // Correct the outline style in Safari.
}
// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
font: inherit; // Change font properties to `inherit` in Safari.
}
/**
* hr
*
*/
hr {
box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE.
border: 0;
border-top: 1px solid $crispy__color-secondary;
margin: 0.3em 0;
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Add the correct display in Firefox.
details {
display: block;
}
// Add the correct display in all browsers.
summary {
display: list-item;
}
code,
pre,
kbd,
samp {
font-family: $crispy__font-family-monospace;
font-size: $crispy__font-size-monospace;
@include crispy__media-breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
}
}

@ -44,7 +44,7 @@ $plain-ui__font-sizes: (
'big' : $plain-ui__font-size * 3 'big' : $plain-ui__font-size * 3
) !default; ) !default;
$plain-ui__line-height: 1.4; $plain-ui__line-height: 1.618;
$plain-ui__line-height__breakpoints: ( $plain-ui__line-height__breakpoints: (
$plain-ui__md: $plain-ui__golden-ratio $plain-ui__md: $plain-ui__golden-ratio
) !default; ) !default;
@ -89,6 +89,7 @@ $plain-ui__colors: (
--black: #000000; --black: #000000;
--text: #{$plain-ui__text-light}; --text: #{$plain-ui__text-light};
--background: #{$plain-ui__background-light}; --background: #{$plain-ui__background-light};
--border: #{$plain-ui__border-light};
} }
/** /**
@ -96,9 +97,9 @@ $plain-ui__colors: (
* *
*/ */
$plain-ui__margin: 0 0 15px !default; $plain-ui__margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: ( $plain-ui__margin-breakpoints: (
$plain-ui__md: 0 0 20px $plain-ui__md: 0 0 1.5rem
) !default; ) !default;
$plain-ui__padding: 5px 12px !default; $plain-ui__padding: 5px 12px !default;

@ -11,7 +11,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
background-color: $plain-ui__primary-light; background-color: var(--primary);
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;

@ -12,7 +12,7 @@
min-height: 2.8em; min-height: 2.8em;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary-light;
color: white; color: var(--white);
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;
@ -39,5 +39,11 @@
margin-right: 0.75em; margin-right: 0.75em;
} }
} }
.button {
&:active {
outline: none;
}
}
} }
} }

@ -8,9 +8,118 @@
* *
*/ */
@mixin plain-ui__core__content() .content {
{
.content { // paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
} }
} }

@ -8,52 +8,49 @@
* *
*/ */
@mixin plain-ui__core__heading() $plain-ui__heading__font-sizes: (
{ 'h1': $plain-ui__font-size * 2.5,
$plain-ui__heading__font-sizes: ( 'h2': $plain-ui__font-size * 2,
'h1': $plain-ui__font-size * 2.5, 'h3': $plain-ui__font-size * 1.75,
'h2': $plain-ui__font-size * 2, 'h4': $plain-ui__font-size * 1.5,
'h3': $plain-ui__font-size * 1.75, 'h5': $plain-ui__font-size * 1.25,
'h4': $plain-ui__font-size * 1.5, 'h6': $plain-ui__font-size
'h5': $plain-ui__font-size * 1.25, ) !default;
'h6': $plain-ui__font-size
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
) !default;
$plain-ui__heading__font-weight: bold !default;
$plain-ui__heading__font-family: $plain-ui__font-family !default;
$plain-ui__heading__margin: $plain-ui__margin !default;
$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight;
line-height: 1.2;
margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 { $plain-ui__heading__font-sizes__breakpoints: (
line-height: 1.4; $plain-ui__md: 1.2rem
} ) !default;
h6 { $plain-ui__heading__font-weight: bold !default;
line-height: $plain-ui__line-height; $plain-ui__heading__font-family: $plain-ui__font-family !default;
} $plain-ui__heading__margin: $plain-ui__margin !default;
$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight;
line-height: 1.2;
margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 {
line-height: 1.4;
}
h6 {
line-height: $plain-ui__line-height;
}
@each $h, $font-size in $plain-ui__heading__font-sizes { @each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} { #{$h}, .#{$h} {
font-size: $font-size; font-size: $font-size;
@include plain-ui__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);
}
} }
} }

@ -9,142 +9,163 @@
* *
*/ */
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}
html { body,
font-size: 100%; html {
line-height: 1.15; // Correct the line height in all browsers. margin: 0;
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS. height: 100%;
} }
body, html,
html { legend {
margin: 0; box-sizing: border-box;
height: 100%; }
}
html, body {
legend { font-family: $plain-ui__font-family;
box-sizing: border-box; color: var(--text);
}
main { background-color: var(--background);
display: block; // Render the `main` element consistently in IE. direction: $plain-ui__direction;
}
*, font-size: $plain-ui__font-size;
*::after, //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
*::before {
box-sizing: inherit;
}
table { line-height: $plain-ui__line-height;
border-collapse: collapse; //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
border-spacing: 0; }
}
a {
color: var(--link);
transition: color 0.5s;
figure { &:hover {
margin: $plain-ui__margin; color: var(--link-hover);
} }
figcaption { &:focus {
margin: 10px 0; outline: none;
} }
}
main {
display: block; // Render the `main` element consistently in IE.
}
/** *,
* form elements *::after,
* *::before {
* box-sizing: inherit;
* }
*/
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
fieldset { table {
//padding: $plain-ui__padding; border-collapse: collapse;
} border-spacing: 0;
}
// Remove the inheritance of text transform in Firefox figure {
button, margin: $plain-ui__margin;
select { }
text-transform: none;
}
// Correct the inability to style clickable types in iOS and Safari. figcaption {
button, margin: 0;
[type="button"], }
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox. /**
button::-moz-focus-inner, * form elements
[type="button"]::-moz-focus-inner, *
[type="reset"]::-moz-focus-inner, *
[type="submit"]::-moz-focus-inner { */
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule. // Remove the margin in Firefox and Safari.
button:-moz-focusring, button,
[type="button"]:-moz-focusring, input,
[type="reset"]:-moz-focusring, optgroup,
[type="submit"]:-moz-focusring { select,
outline: 1px dotted ButtonText; textarea {
} margin: 0;
}
legend { fieldset {
box-sizing: border-box; //Correct the text wrapping in Edge and IE. margin: $plain-ui__margin;
display: table; // Correct the text wrapping in Edge and IE. }
max-width: 100%; // Correct the text wrapping in Edge and IE.
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
white-space: normal; // Correct the text wrapping in Edge and IE.
}
// Correct the cursor style of increment and decrement buttons in Chrome. // Remove the inheritance of text transform in Firefox
[type="number"]::-webkit-inner-spin-button, button,
[type="number"]::-webkit-outer-spin-button { select {
height: auto; text-transform: none;
} }
[type="search"] { // Correct the inability to style clickable types in iOS and Safari.
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari. [type="button"],
outline-offset: -2px; // Correct the outline style in Safari. [type="reset"],
} [type="submit"],
button {
-webkit-appearance: button;
}
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner border and padding in Firefox.
[type="search"]::-webkit-search-decoration { [type="button"]::-moz-focus-inner,
-webkit-appearance: none; [type="reset"]::-moz-focus-inner,
} [type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
::-webkit-file-upload-button { // Restore the focus styles unset by the previous rule.
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari. [type="button"]:-moz-focusring,
font: inherit; // Change font properties to `inherit` in Safari. [type="reset"]:-moz-focusring,
} [type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
display: table; // Correct the text wrapping in Edge and IE.
max-width: 100%; // Correct the text wrapping in Edge and IE.
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
white-space: normal; // Correct the text wrapping in Edge and IE.
}
/** // Correct the cursor style of increment and decrement buttons in Chrome.
* hr [type="number"]::-webkit-inner-spin-button,
* [type="number"]::-webkit-outer-spin-button {
*/ height: auto;
}
[type="search"] {
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
outline-offset: -2px; // Correct the outline style in Safari.
}
// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
font: inherit; // Change font properties to `inherit` in Safari.
}
/**
* hr
*
*/
hr { hr {
box-sizing: content-box; // Add the correct box sizing in Firefox. box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox. height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE. overflow: visible; // Show the overflow in Edge and IE.
border: 0; border: 0;
border-top: 1px solid $plain-ui__secondary; border-top: 1px solid var(--border);
margin: 0 0 1rem; margin: $plain-ui__margin;
} }
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@ -163,11 +184,10 @@ summary {
} }
code, code,
pre,
kbd, kbd,
pre,
samp { samp {
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
font-size: $plain-ui__font-size; font-size: $plain-ui__font-size;
// @TODO
//@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints);
} }

@ -1,130 +0,0 @@
/**
* typograhy
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin plain-ui__core__typography()
{
// paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
}
Loading…
Cancel
Save