tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 4 years ago
parent
b707a35703
commit
a81e44d511
12 changed files with 418 additions and 620 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -9
      dist/index.html
  2. +98
    -109
      dist/plain-ui.css
  3. +13
    -0
      spritemap.js
  4. +1
    -35
      src/scss/_core.scss
  5. +0
    -175
      src/scss/_normalize.scss
  6. +4
    -3
      src/scss/_variables.scss
  7. +1
    -1
      src/scss/components/_badge.scss
  8. +7
    -1
      src/scss/components/_bar.scss
  9. +113
    -4
      src/scss/core/_content.scss
  10. +41
    -44
      src/scss/core/_heading.scss
  11. +129
    -109
      src/scss/core/_normalize.scss
  12. +0
    -130
      src/scss/core/_typography.scss

+ 11
- 9
dist/index.html View File

@ -31,15 +31,17 @@
<div class="grid">
<div class="col-12">
<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>
The Basic Idea was a quick
</p>
<div class="content">
<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>
The Basic Idea was a quick
</p>
</div>
</div>
</div>


+ 98
- 109
dist/plain-ui.css View File

@ -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;
}
/**
* <span class="badge">
* 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;


+ 13
- 0
spritemap.js View File

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

+ 1
- 35
src/scss/_core.scss View File

@ -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);
}
'core/content';

+ 0
- 175
src/scss/_normalize.scss View File

@ -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);
}
}

+ 4
- 3
src/scss/_variables.scss View File

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


+ 1
- 1
src/scss/components/_badge.scss View File

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


+ 7
- 1
src/scss/components/_bar.scss View File

@ -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;
}
}
}
}

+ 113
- 4
src/scss/core/_content.scss View File

@ -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;
}
}

+ 41
- 44
src/scss/core/_heading.scss View File

@ -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);
}
}

+ 129
- 109
src/scss/core/_normalize.scss View File

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

+ 0
- 130
src/scss/core/_typography.scss View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save