diff --git a/dist/index.html b/dist/index.html index 20fb003..1017cee 100644 --- a/dist/index.html +++ b/dist/index.html @@ -31,15 +31,17 @@
-

- 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 -

+
+

+ 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 +

+
diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 0f54b1d..f500e68 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -1625,6 +1625,7 @@ --black: #000000; --text: #363636; --background: #f9f9f9; + --border: #dfdfdf; } /** @@ -1671,6 +1672,26 @@ legend { 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 { display: block; } @@ -1687,18 +1708,17 @@ table { } figure { - margin: 0 0 15px; + margin: 0 0 1rem; } figcaption { - margin: 10px 0; + margin: 0; } /** * form elements * * - * */ button, input, @@ -1708,30 +1728,34 @@ textarea { margin: 0; } +fieldset { + margin: 0 0 1rem; +} + button, select { text-transform: none; } -button, [type=button], [type=reset], -[type=submit] { +[type=submit], +button { -webkit-appearance: button; } -button::-moz-focus-inner, [type=button]::-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; padding: 0; } -button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, -[type=submit]:-moz-focusring { +[type=submit]:-moz-focusring, +button:-moz-focusring { outline: 1px dotted ButtonText; } @@ -1771,7 +1795,7 @@ hr { height: 0; overflow: visible; border: 0; - border-top: 1px solid #b3b2af; + border-top: 1px solid var(--border); margin: 0 0 1rem; } @@ -1788,8 +1812,8 @@ summary { } code, -pre, kbd, +pre, samp { font-family: "IBM Plex Mono", sans-serif; font-size: 1rem; @@ -1804,14 +1828,6 @@ samp { * @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, h2, .h2, h3, .h3, @@ -1821,7 +1837,7 @@ h6, .h6 { font-family: "IBM Plex Mono", sans-serif; font-weight: bold; line-height: 1.2; - margin: 0 0 15px; + margin: 0 0 1rem; } @media only screen and (min-width: 992px) { h1, .h1, @@ -1830,7 +1846,7 @@ h3, .h3, h4, .h4, h5, .h5, h6, .h6 { - margin: 0 0 20px; + margin: 0 0 1.5rem; } } @@ -1839,7 +1855,7 @@ h5 { } h6 { - line-height: 1.4; + line-height: 1.618; } 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; } - -a, -ins, -u { +.content a, +.content ins, +.content u { -webkit-text-decoration-skip: ink edges; text-decoration-skip: ink edges; } - -b, -strong { +.content b, +.content strong { font-weight: bolder; } - -small { +.content small { font-size: 80%; } - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ -sub, -sup { +.content sub, +.content sup { font-size: 70%; line-height: 0; position: relative; vertical-align: baseline; } - -sub { +.content sub { bottom: -0.25em; } - -sup { +.content sup { top: -0.5em; } - -abbr[title] { +.content abbr[title] { border-bottom: 1px dotted; cursor: help; text-decoration: none; } - -mark { +.content mark { padding: 0.25em; } - -/** - * blockquote - * - * - */ -blockquote { +.content blockquote { border-left: 1px solid #3e3e3e; margin-left: 0; padding: 5px 12px; } -blockquote p:last-child { +.content blockquote p:last-child { margin-bottom: 0; } - -/** - * lists - * - */ -dl, -ol, -ul { +.content dl, +.content ol, +.content ul { padding: 0; - margin: 0 0 15px; + margin: 0 0 1rem; } - -ol, -ul { +.content ol, +.content ul { margin-left: 1.5em; } - -ol ol, -ul ul { +.content ol ol, +.content ul ul { margin-top: 0; margin-left: 1em; } - -ol { +.content ol { list-style: decimal outside; } - -ul { +.content ul { list-style: disc outside; } - -dl { +.content dl { margin-left: 0.5em; } - -dd, -dt { +.content dd, +.content dt { margin: 0; } - -dt { +.content dt { 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; -} - /** * * A @@ -4869,7 +4855,7 @@ body { .badge { display: inline-block; - background-color: #3e3e3e; + background-color: var(--primary); color: white; font-size: 0.85rem; padding: 0.4em 0.8em; @@ -5149,7 +5135,7 @@ svg.field-choice__checked { padding: 0.75em 1.1em; font-size: 0.7rem; background: #3e3e3e; - line-height: 1.4; + line-height: 1.618; margin: 0; color: white; } @@ -5214,7 +5200,7 @@ img.media { display: flex; min-height: 2.8em; background-color: #3e3e3e; - color: white; + color: var(--white); } .bar .icon { font-size: 1.5rem; @@ -5236,6 +5222,9 @@ img.media { .bar__start:last-child, .bar__main:last-child, .bar__end:last-child { margin-right: 0.75em; } +.bar .button:active { + outline: none; +} .tabs { display: flex; diff --git a/spritemap.js b/spritemap.js new file mode 100644 index 0000000..b8173b5 --- /dev/null +++ b/spritemap.js @@ -0,0 +1,13 @@ +(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{ + +/***/ "?4e0c": +/*!******************************!*\ + !*** spritemap-dummy-module ***! + \******************************/ +/***/ (() => { + + + +/***/ }) + +}]); \ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 1ba2ab9..89a01c5 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -11,38 +11,4 @@ @import 'core/normalize', 'core/heading', - 'core/typography'; - -@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); -} \ No newline at end of file + 'core/content'; \ No newline at end of file diff --git a/src/scss/_normalize.scss b/src/scss/_normalize.scss deleted file mode 100644 index ccd9ee3..0000000 --- a/src/scss/_normalize.scss +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 78f4ef5..9fabc75 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -44,7 +44,7 @@ $plain-ui__font-sizes: ( 'big' : $plain-ui__font-size * 3 ) !default; -$plain-ui__line-height: 1.4; +$plain-ui__line-height: 1.618; $plain-ui__line-height__breakpoints: ( $plain-ui__md: $plain-ui__golden-ratio ) !default; @@ -89,6 +89,7 @@ $plain-ui__colors: ( --black: #000000; --text: #{$plain-ui__text-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__md: 0 0 20px + $plain-ui__md: 0 0 1.5rem ) !default; $plain-ui__padding: 5px 12px !default; diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index c45fa73..6e5d956 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -11,7 +11,7 @@ .badge { display: inline-block; - background-color: $plain-ui__primary-light; + background-color: var(--primary); color: white; font-size: 0.85rem; diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 76cb3b4..4362ea7 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -12,7 +12,7 @@ min-height: 2.8em; background-color: $plain-ui__primary-light; - color: white; + color: var(--white); .icon { font-size: 1.5rem; @@ -39,5 +39,11 @@ margin-right: 0.75em; } } + + .button { + &:active { + outline: none; + } + } } } \ No newline at end of file diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss index e478adc..72d559f 100644 --- a/src/scss/core/_content.scss +++ b/src/scss/core/_content.scss @@ -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; } } \ No newline at end of file diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index a6068b6..bfebfd8 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -8,52 +8,49 @@ * */ -@mixin plain-ui__core__heading() -{ - $plain-ui__heading__font-sizes: ( - 'h1': $plain-ui__font-size * 2.5, - 'h2': $plain-ui__font-size * 2, - 'h3': $plain-ui__font-size * 1.75, - 'h4': $plain-ui__font-size * 1.5, - 'h5': $plain-ui__font-size * 1.25, - '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); - } +$plain-ui__heading__font-sizes: ( + 'h1': $plain-ui__font-size * 2.5, + 'h2': $plain-ui__font-size * 2, + 'h3': $plain-ui__font-size * 1.75, + 'h4': $plain-ui__font-size * 1.5, + 'h5': $plain-ui__font-size * 1.25, + 'h6': $plain-ui__font-size +) !default; - h5 { - line-height: 1.4; - } +$plain-ui__heading__font-sizes__breakpoints: ( + $plain-ui__md: 1.2rem +) !default; - h6 { - line-height: $plain-ui__line-height; - } +$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 { + line-height: 1.4; +} + +h6 { + line-height: $plain-ui__line-height; +} - @each $h, $font-size in $plain-ui__heading__font-sizes { - #{$h}, .#{$h} { - font-size: $font-size; - @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size); - } +@each $h, $font-size in $plain-ui__heading__font-sizes { + #{$h}, .#{$h} { + font-size: $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/_normalize.scss b/src/scss/core/_normalize.scss index 8d04dca..ba88999 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -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 { - 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%; +} - body, - html { - margin: 0; - height: 100%; - } +html, +legend { + box-sizing: border-box; +} - html, - legend { - box-sizing: border-box; - } +body { + font-family: $plain-ui__font-family; + color: var(--text); - main { - display: block; // Render the `main` element consistently in IE. - } + background-color: var(--background); + direction: $plain-ui__direction; - *, - *::after, - *::before { - box-sizing: inherit; - } + font-size: $plain-ui__font-size; + //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints); - table { - border-collapse: collapse; - border-spacing: 0; - } + line-height: $plain-ui__line-height; + //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints); +} + +a { + color: var(--link); + transition: color 0.5s; - figure { - margin: $plain-ui__margin; + &:hover { + color: var(--link-hover); } - figcaption { - margin: 10px 0; + &:focus { + outline: none; } +} +main { + display: block; // Render the `main` element consistently in IE. +} - /** - * form elements - * - * - * - */ - - // Remove the margin in Firefox and Safari. - button, - input, - optgroup, - select, - textarea { - margin: 0; - } +*, +*::after, +*::before { + box-sizing: inherit; +} - fieldset { - //padding: $plain-ui__padding; - } +table { + border-collapse: collapse; + border-spacing: 0; +} - // Remove the inheritance of text transform in Firefox - button, - select { - text-transform: none; - } +figure { + margin: $plain-ui__margin; +} - // Correct the inability to style clickable types in iOS and Safari. - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } +figcaption { + margin: 0; +} - // 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; - } +/** + * form elements + * + * + */ - // 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; - } +// Remove the margin in Firefox and Safari. +button, +input, +optgroup, +select, +textarea { + margin: 0; +} - 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. - } +fieldset { + margin: $plain-ui__margin; +} - // 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; - } +// Remove the inheritance of text transform in Firefox +button, +select { + text-transform: none; +} - [type="search"] { - -webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari. - outline-offset: -2px; // Correct the outline style in Safari. - } +// Correct the inability to style clickable types in iOS and Safari. +[type="button"], +[type="reset"], +[type="submit"], +button { + -webkit-appearance: button; +} - // Remove the inner padding in Chrome and Safari on macOS. - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } +// Remove the inner border and padding in Firefox. +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} - ::-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. - } +// Restore the focus styles unset by the previous rule. +[type="button"]:-moz-focusring, +[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. +} - /** - * hr - * - */ +// 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 $plain-ui__secondary; - margin: 0 0 1rem; + border-top: 1px solid var(--border); + margin: $plain-ui__margin; } // Add the correct vertical alignment in Chrome, Firefox, and Opera. @@ -163,11 +184,10 @@ summary { } code, -pre, kbd, +pre, samp { font-family: $plain-ui__font-family; font-size: $plain-ui__font-size; - - //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints); + // @TODO } \ No newline at end of file diff --git a/src/scss/core/_typography.scss b/src/scss/core/_typography.scss deleted file mode 100644 index 5b8a262..0000000 --- a/src/scss/core/_typography.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file