tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding

Browse Source
release/0.2
Björn 3 years ago
parent adb9e97c98
commit 69e44ab488
27 changed files with 11338 additions and 243 deletions
Show Stats Download Patch File Download Diff File

11083
public/plain-ui.css
View File

File diff suppressed because one or more lines are too long

14
public/spritemap.js
Unescape View File

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

6
src/scss/_helpers.scss
Unescape View File

@ -0,0 +1,6 @@
@import
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'helpers/colors',
'helpers/typography';

64
src/scss/_mixins.scss
Unescape View File

@ -16,7 +16,7 @@
* *
*/ */
@mixin plain-ui__clearfix() { @mixin clearfix() {
&::before, &::before,
&::after { &::after {
display: table; display: table;
@ -35,7 +35,7 @@
* *
*/ */
@mixin plain-ui__clearlist() { @mixin clearlist() {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -55,74 +55,74 @@
* *
*/ */
@mixin plain-ui__media-xs() { @mixin media-xs() {
@media only screen and (min-width:$plain-ui__xs) { @media only screen and (min-width: $breakpoint__xs) {
@content; @content;
} }
} }
@mixin plain-ui__media-sm() { @mixin media-sm() {
@media only screen and (min-width: $plain-ui__sm) { @media only screen and (min-width: $breakpoint__sm) {
@content; @content;
} }
} }
@mixin plain-ui__media-md() { @mixin media-md() {
@media only screen and (min-width: $plain-ui__md) { @media only screen and (min-width: $breakpoint__md) {
@content; @content;
} }
} }
@mixin plain-ui__media-lg() { @mixin media-lg() {
@media only screen and (min-width: $plain-ui__lg) { @media only screen and (min-width: $breakpoint__lg) {
@content; @content;
} }
} }
@mixin plain-ui__media-xlg() { @mixin media-xlg() {
@media only screen and (min-width: $plain-ui__xlg) { @media only screen and (min-width: $breakpoint__xlg) {
@content; @content;
} }
} }
@mixin plain-ui__media-xxs-only() { @mixin media-xxs-only() {
@media only screen and (max-width: $plain-ui__xs) { @media only screen and (max-width: $breakpoint__xs) {
@content; @content;
} }
} }
@mixin plain-ui__media-xxs-only() { @mixin media-xxs-only() {
@media only screen and (max-width: $plain-ui__xs - 1) { @media only screen and (max-width: $breakpoint__xs - 1) {
@content; @content;
} }
} }
@mixin plain-ui__media-xs-only() { @mixin media-xs-only() {
@media only screen and (min-width: $plain-ui__xs) and (max-width: $plain-ui__sm - 1) { @media only screen and (min-width: $breakpoint__xs) and (max-width: $breakpoint__sm - 1) {
@content; @content;
} }
} }
@mixin plain-ui__media-sm-only() { @mixin media-sm-only() {
@media only screen and (min-width: $plain-ui__sm) and (max-width: $plain-ui__md - 1) { @media only screen and (min-width: $breakpoint__sm) and (max-width: $breakpoint__md - 1) {
@content; @content;
} }
} }
@mixin plain-ui__media-md-only() { @mixin media-md-only() {
@media only screen and (min-width: $plain-ui__md) and (max-width: $plain-ui__lg - 1) { @media only screen and (min-width: $breakpoint__md) and (max-width: $breakpoint__lg - 1) {
@content; @content;
} }
} }
@mixin plain-ui__media-lg-only() { @mixin media-lg-only() {
@media only screen and (min-width: $plain-ui__lg) and (max-width: $plain-ui__xlg - 1) { @media only screen and (min-width: $breakpoint__lg) and (max-width: $breakpoint__xlg - 1) {
@content; @content;
} }
} }
@mixin plain-ui__media-xlg-only() { @mixin media-xlg-only() {
@media only screen and (min-width: $plain-ui__xlg) { @media only screen and (min-width: $breakpoint__xlg) {
@content; @content;
} }
} }
@ -132,7 +132,7 @@
* Set property and his value for each Breakpoint * Set property and his value for each Breakpoint
* *
* ( * (
* $plain-ui__md: 10px * $md: 10px
* ) * )
* *
* *
@ -142,7 +142,7 @@
* *
*/ */
@mixin plain-ui__breakpoints($property, $breakpoints, $important: false) { @mixin breakpoints($property, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) { @media only screen and (min-width: $breakpoint) {
@if $important == false { @if $important == false {
@ -171,7 +171,7 @@
* Set property and his value with an factor for each Breakpoint * Set property and his value with an factor for each Breakpoint
* *
* ( * (
* $plain-ui__md: 10px * $md: 10px
* ) * )
* *
* @param {css} $property * @param {css} $property
@ -181,7 +181,7 @@
* *
*/ */
@mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) { @mixin breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) { @media only screen and (min-width: $breakpoint) {
@if $important == false { @if $important == false {
@ -197,7 +197,7 @@
* Set font-size from Breakpoints, use for calculating difference from font-size and default font-size * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
* *
* ( * (
* $plain-ui__md: 1rem * $md: 1rem
* ) * )
* *
* @param {map} $breakpoints * @param {map} $breakpoints
@ -206,7 +206,7 @@
* @param {Boolean} $important [false] * @param {Boolean} $important [false]
* *
*/ */
@mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { @mixin breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
// getting diff // getting diff

162
src/scss/_variables.scss
Unescape View File

@ -15,37 +15,37 @@
* *
*/ */
$plain-ui__xs : 576px !default; $breakpoint__xs : 576px !default;
$plain-ui__sm : 768px !default; $breakpoint__sm : 768px !default;
$plain-ui__md : 992px !default; $breakpoint__md : 992px !default;
$plain-ui__lg : 1200px !default; $breakpoint__lg : 1200px !default;
$plain-ui__xlg: 1600px !default; $breakpoint__xlg: 1600px !default;
/** /**
* fonts * fonts
* *
*/ */
$plain-ui__direction: ltr !default; $direction: ltr !default;
$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default; $font-family: 'IBM Plex Mono', sans-serif !default;
$plain-ui__font-weight: normal !default; $font-weight: normal !default;
$plain-ui__font-size: 0.9rem !default; $font-size: 0.9rem !default;
$plain-ui__font-size-breakpoints: ( $font-size-breakpoints: (
$plain-ui__md: 1rem $breakpoint__md: 1rem
) !default; ) !default;
$plain-ui__font-sizes: ( $font-sizes: (
'default': $plain-ui__font-size, 'default': $font-size,
'small' : $plain-ui__font-size * 0.75, 'small' : $font-size * 0.75,
'medium' : $plain-ui__font-size * 1.5, 'medium' : $font-size * 1.5,
'large' : $plain-ui__font-size * 2, 'large' : $font-size * 2,
'big' : $plain-ui__font-size * 3 'big' : $font-size * 3
) !default; ) !default;
$plain-ui__line-height: 1.618; $line-height: 1.618;
$plain-ui__line-height__breakpoints: ( $line-height__breakpoints: (
$plain-ui__md: 1.8 $breakpoint__md: 1.8
) !default; ) !default;
@ -55,59 +55,59 @@ $plain-ui__line-height__breakpoints: (
* *
*/ */
$plain-ui__white: #ffffff !default; $color__white: #ffffff !default;
$plain-ui__black: #212121 !default; $color__black: #212121 !default;
$plain-ui__primary: #3e3e3e !default; $color__primary: #3e3e3e !default;
$plain-ui__primary-contrast: $plain-ui__primary !default; $color__primary-contrast: $color__primary !default;
$plain-ui__active: lighten($plain-ui__primary, 20%) !default; $color__active: lighten($color__primary, 20%) !default;
$plain-ui__active-contrast: #ffffff !default; $color__active-contrast: #ffffff !default;
$plain-ui__background: $plain-ui__primary !default; $color__background: $color__primary !default;
$plain-ui__background-contrast: #ffffff !default; $color__background-contrast: #ffffff !default;
$plain-ui__body: #f9f9f9 !default; $color__body: #f9f9f9 !default;
$plain-ui__text: #363636 !default; $color__text: #363636 !default;
$plain-ui__text-contrast: #ffffff !default; $color__text-contrast: #ffffff !default;
$plain-ui__border: $plain-ui__primary !default; $color__border: $color__primary !default;
$plain-ui__border-contrast: #ffffff !default; $color__border-contrast: #ffffff !default;
$plain-ui__success: #64ac64 !default; $color__success: #64ac64 !default;
$plain-ui__success-contrast: lighten($plain-ui__success, 20%) !default; $color__success-contrast: lighten($color__success, 20%) !default;
$plain-ui__warning: #f0ad4e !default; $color__warning: #f0ad4e !default;
$plain-ui__warning-contrast: lighten($plain-ui__warning, 20%) !default; $color__warning-contrast: lighten($color__warning, 20%) !default;
$plain-ui__danger: #d95959 !default; $color__danger: #d95959 !default;
$plain-ui__danger-contrast: lighten($plain-ui__danger, 20%) !default; $color__danger-contrast: lighten($color__danger, 20%) !default;
$plain-ui__info: #0090d4 !default; $color__info: #0090d4 !default;
$plain-ui__info-contrast: lighten($plain-ui__info, 20%) !default; $color__info-contrast: lighten($color__info, 20%) !default;
$plain-ui__link: $plain-ui__text !default; $color__link: $color__text !default;
$plain-ui__link-hover: $plain-ui__danger !default; $color__link-hover: $color__danger !default;
$plain-ui__colors: ( $colors: (
'--body': $plain-ui__body, '--body': $color__body,
'--text': $plain-ui__text, '--text': $color__text,
'--text-contrast': $plain-ui__text-contrast, '--text-contrast': $color__text-contrast,
'--primary': $plain-ui__primary, '--primary': $color__primary,
'--primary-contrast': $plain-ui__primary-contrast, '--primary-contrast': $color__primary-contrast,
'--active': #{$plain-ui__active}, '--active': #{$color__active},
'--active-contrast': $plain-ui__active-contrast, '--active-contrast': $color__active-contrast,
'--link': $plain-ui__link, '--link': $color__link,
'--link-hover': $plain-ui__link-hover, '--link-hover': $color__link-hover,
'--danger': $plain-ui__danger, '--danger': $color__danger,
'--danger-contrast': $plain-ui__danger-contrast, '--danger-contrast': $color__danger-contrast,
'--info': $plain-ui__info, '--info': $color__info,
'--info-constrast': $plain-ui__info-contrast, '--info-constrast': $color__info-contrast,
'--success': $plain-ui__success, '--success': $color__success,
'--success-contrast': $plain-ui__success-contrast, '--success-contrast': $color__success-contrast,
'--warning': $plain-ui__warning, '--warning': $color__warning,
'--warning-contrast': $plain-ui__warning-contrast, '--warning-contrast': $color__warning-contrast,
'--background': $plain-ui__background, '--background': $color__background,
'--background-contrast': $plain-ui__background-contrast, '--background-contrast': $color__background-contrast,
'--border': $plain-ui__border, '--border': $color__border,
'--border-contrast': $plain-ui__border-contrast '--border-contrast': $color__border-contrast
) !default; ) !default;
/** /**
@ -115,9 +115,9 @@ $plain-ui__colors: (
* *
*/ */
$plain-ui__margin: 0 0 1rem !default; $margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: ( $margin-breakpoints: (
$plain-ui__md: 0 0 0.8rem $breakpoint__md: 0 0 0.8rem
) !default; ) !default;
/** /**
@ -125,9 +125,9 @@ $plain-ui__margin-breakpoints: (
* *
*/ */
$plain-ui__padding: 0.6rem 0.8rem !default; $padding: 0.6rem 0.8rem !default;
$plain-ui__padding-breakpoints: ( $padding-breakpoints: (
$plain-ui__md: 0.8rem 1rem $breakpoint__md: 0.8rem 1rem
) !default; ) !default;
/** /**
@ -135,5 +135,5 @@ $plain-ui__padding-breakpoints: (
* *
*/ */
$plain-ui__border-radius: 2px; $border-radius: 2px;
$plain-ui__border: 1px solid var(--border); $border: 1px solid var(--border);

4
src/scss/components/_badge.scss
Unescape View File

@ -18,8 +18,8 @@
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border: $plain-ui__border; border: $border;
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
&--round { &--round {
display: inline-flex; display: inline-flex;

4
src/scss/components/_bar.scss
Unescape View File

@ -21,8 +21,8 @@
background-color: var(--background); background-color: var(--background);
color: var(--text-contrast); color: var(--text-contrast);
border: $plain-ui__border; border: $border;
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
&__start { &__start {
justify-content: start; justify-content: start;

14
src/scss/components/_button.scss
Unescape View File

@ -15,14 +15,14 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
font-family: $plain-ui__font-family; font-family: $font-family;
font-size: 1rem; font-size: 1rem;
border: 1px solid var(--border); border: 1px solid var(--border);
background-color: var(--background-contrast); background-color: var(--background-contrast);
color: var(--text); color: var(--text);
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
transition: background-color 0.1s; transition: background-color 0.1s;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -30,7 +30,7 @@
min-height: 2.8em; min-height: 2.8em;
width: 100%; width: 100%;
@include plain-ui__media-sm() { @include media-sm() {
width: auto; width: auto;
} }
@ -125,26 +125,26 @@
&:hover { &:hover {
color: var(--border); color: var(--border);
border-color: lighten($plain-ui__primary, 40%); border-color: lighten($color__primary, 40%);
background-color: transparent; background-color: transparent;
} }
} }
&--danger.button--outline { &--danger.button--outline {
&:hover { &:hover {
border-color: lighten($plain-ui__danger, 20%); border-color: lighten($color__danger, 20%);
} }
} }
&--info.button--outline { &--info.button--outline {
&:hover { &:hover {
border-color: lighten($plain-ui__info, 20%); border-color: lighten($color__info, 20%);
} }
} }
&--success.button--outline { &--success.button--outline {
&:hover { &:hover {
border-color: lighten($plain-ui__success, 20%); border-color: lighten($color__success, 20%);
} }
} }
} }

8
src/scss/components/_field.scss
Unescape View File

@ -6,7 +6,7 @@
*/ */
.field-group { .field-group {
margin: $plain-ui__margin; margin: $margin;
&--valid { &--valid {
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
@ -31,7 +31,7 @@
.field-label { .field-label {
font-size: 1rem; font-size: 1rem;
font-family: $plain-ui__font-family; font-family: $font-family;
.icon { .icon {
vertical-align: text-bottom; vertical-align: text-bottom;
@ -43,14 +43,14 @@
} }
input.field-text, textarea.field-text, select.field-choice { input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family; font-family: $font-family;
font-size: 0.95rem; font-size: 0.95rem;
width: 100%; width: 100%;
border: 1px solid var(--active); border: 1px solid var(--active);
background-color: var(--background-contrast); background-color: var(--background-contrast);
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
margin: 0.7rem 0 0; margin: 0.7rem 0 0;

2
src/scss/components/_group.scss
Unescape View File

@ -12,7 +12,7 @@
* *
*/ */
@mixin plain-ui__component__group() @mixin component__group()
{ {
.group { .group {
&__item { &__item {

4
src/scss/components/_loading.scss
Unescape View File

@ -22,7 +22,7 @@
background-color: var(--background); background-color: var(--background);
animation-name: plain-ui__loading-animation; animation-name: loading-animation;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
@ -43,7 +43,7 @@
} }
} }
@keyframes plain-ui__loading-animation { @keyframes loading-animation {
0% { height: 60px; } 0% { height: 60px; }
50% { height: 40px; } 50% { height: 40px; }
100% { height: 60px; } 100% { height: 60px; }

10
src/scss/components/_media.scss
Unescape View File

@ -13,8 +13,8 @@
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
border: $plain-ui__border; border: $border;
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
overflow: hidden; overflow: hidden;
@ -22,7 +22,7 @@
padding: 0.75em 1.1em; padding: 0.75em 1.1em;
font-size: 0.7rem; font-size: 0.7rem;
background: var(--background); background: var(--background);
line-height: $plain-ui__line-height; line-height: $line-height;
margin: 0; margin: 0;
color: var(--text-contrast); color: var(--text-contrast);
} }
@ -33,8 +33,8 @@
} }
.media { .media {
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
border: $plain-ui__border; border: $border;
width: 100%; width: 100%;
height: auto; height: auto;
} }

6
src/scss/components/_panel.scss
Unescape View File

@ -6,12 +6,12 @@
.panel { .panel {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
background-color: var(--background-contrast); background-color: var(--background-contrast);
&__body { &__body {
padding: $plain-ui__padding; padding: $padding;
@include media-breakpoints('padding', $plain-ui__padding-breakpoints); @include media-breakpoints('padding', $padding-breakpoints);
} }
&--border-highlight { &--border-highlight {

10
src/scss/components/_table.scss
Unescape View File

@ -6,13 +6,13 @@
.table { .table {
width: 100%; width: 100%;
border: 1px solid lighten($plain-ui__primary, 55%); border: 1px solid lighten($color__primary, 55%);
background: var(--white); background: var(--white);
&--striped { &--striped {
tr { tr {
&:nth-child(even) { &:nth-child(even) {
background-color: lighten($plain-ui__primary, 75%); background-color: lighten($color__primary, 75%);
} }
} }
} }
@ -28,7 +28,7 @@
td, td,
th { th {
text-align: left; text-align: left;
border-bottom: 1px solid lighten($plain-ui__primary, 55%); border-bottom: 1px solid lighten($color__primary, 55%);
padding: 0.5em 1.25em; padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
@ -36,11 +36,11 @@
th { th {
color: white; color: white;
background-color: $plain-ui__primary; background-color: $color__primary;
} }
tr:hover { tr:hover {
background-color: lighten($plain-ui__primary, 10%); background-color: lighten($color__primary, 10%);
td { td {
color: white; color: white;

10
src/scss/components/_tabs.scss
Unescape View File

@ -9,9 +9,9 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
border-bottom: $plain-ui__border; border-bottom: $border;
@include plain-ui__media-sm() { @include media-sm() {
width: auto; width: auto;
flex-direction: row; flex-direction: row;
} }
@ -31,7 +31,7 @@
width: 100%; width: 100%;
@include plain-ui__media-sm() { @include media-sm() {
width: auto; width: auto;
display: inline-flex; display: inline-flex;
} }
@ -41,8 +41,8 @@
background-color: var(--active); background-color: var(--active);
color: var(--text-contrast); color: var(--text-contrast);
border-top-left-radius: $plain-ui__border-radius; border-top-left-radius: $border-radius;
border-top-right-radius: $plain-ui__border-radius; border-top-right-radius: $border-radius;
} }
&--selected { &--selected {

26
src/scss/core/_content.scss
Unescape View File

@ -12,8 +12,8 @@
// paragraphs // paragraphs
p { p {
margin: $plain-ui__margin; margin: $margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints); @include media-breakpoints('margin', $margin-breakpoints);
} }
// Semantic text elements // Semantic text elements
@ -74,9 +74,9 @@
* *
*/ */
blockquote { blockquote {
border-left: $plain-ui__border; border-left: $border;
margin-left: 0; margin-left: 0;
padding: $plain-ui__padding; padding: $padding;
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -91,8 +91,8 @@
ol, ol,
ul { ul {
padding: 0; padding: 0;
margin: $plain-ui__margin; margin: $margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints); @include media-breakpoints('margin', $margin-breakpoints);
} }
ol, ol,
@ -133,15 +133,15 @@
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
border: $plain-ui__border; border: $border;
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
background-color: var(--background-contrast); background-color: var(--background-contrast);
margin: $plain-ui__margin; margin: $margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints); @include media-breakpoints('margin', $margin-breakpoints);
padding: $plain-ui__padding; padding: $padding;
@include media-breakpoints('padding', $plain-ui__padding-breakpoints); @include media-breakpoints('padding', $padding-breakpoints);
} }
} }
@ -149,6 +149,6 @@
padding: 0.15rem 0.4rem 0.25rem; padding: 0.15rem 0.4rem 0.25rem;
background: var(--primary); background: var(--primary);
color: var(--text-contrast); color: var(--text-contrast);
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
} }

32
src/scss/core/_heading.scss
Unescape View File

@ -8,7 +8,7 @@
* *
*/ */
$plain-ui__heading__font-sizes: ( $heading__font-sizes: (
'h1': 2.25rem, 'h1': 2.25rem,
'h2': 2rem, 'h2': 2rem,
'h3': 1.8rem, 'h3': 1.8rem,
@ -17,18 +17,18 @@ $plain-ui__heading__font-sizes: (
'h6': 1.2rem 'h6': 1.2rem
) !default; ) !default;
$plain-ui__heading__font-sizes__breakpoints: ( $heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem $breakpoint__md: 1.2rem
) !default; ) !default;
$plain-ui__heading__font-weight: bold!default; $heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default; $heading__font-family: $font-family !default;
$plain-ui__heading__line-height: 1.2 !default; $heading__line-height: 1.2 !default;
$plain-ui__heading__margin: 0.6rem 0 1.2rem !default; $heading__margin: 0.6rem 0 1.2rem !default;
$plain-ui__heading__margin-breakpoints: ( $heading__margin-breakpoints: (
$plain-ui__md: 0.7rem 0 1.4rem $breakpoint__md: 0.7rem 0 1.4rem
) !default; ) !default;
h1, .h1, h1, .h1,
@ -37,21 +37,21 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
font-family: $plain-ui__heading__font-family; font-family: $heading__font-family;
font-weight: $plain-ui__heading__font-weight; font-weight: $heading__font-weight;
line-height: $plain-ui__heading__line-height; line-height: $heading__line-height;
margin: $plain-ui__heading__margin; margin: $heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints); @include breakpoints('margin', $heading__margin-breakpoints);
&.highlight { &.highlight {
display: table; display: table;
} }
} }
@each $h, $font-size in $plain-ui__heading__font-sizes { @each $h, $font-size in $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 breakpoints-font-size($heading__font-sizes__breakpoints, $font-size, $font-size);
} }
} }

20
src/scss/core/_normalize.scss
Unescape View File

@ -10,7 +10,7 @@
*/ */
:root { :root {
@each $var, $color in $plain-ui__colors { @each $var, $color in $colors {
#{$var}: $color; #{$var}: $color;
} }
} }
@ -33,16 +33,16 @@ legend {
} }
body { body {
font-family: $plain-ui__font-family; font-family: $font-family;
color: var(--text); color: var(--text);
background-color: var(--body); background-color: var(--body);
direction: $plain-ui__direction; direction: $direction;
font-size: $plain-ui__font-size; font-size: $font-size;
@include media-breakpoints('font-size', $plain-ui__font-size-breakpoints); @include media-breakpoints('font-size', $font-size-breakpoints);
line-height: $plain-ui__line-height; line-height: $line-height;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints); //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
} }
@ -103,7 +103,7 @@ textarea {
} }
fieldset { fieldset {
margin: $plain-ui__margin; margin: $margin;
} }
// Remove the inheritance of text transform in Firefox // Remove the inheritance of text transform in Firefox
@ -176,7 +176,7 @@ hr {
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 var(--border); border-top: 1px solid var(--border);
margin: $plain-ui__margin; margin: $margin;
} }
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@ -198,7 +198,7 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
font-family: $plain-ui__font-family; font-family: $font-family;
font-size: $plain-ui__font-size; font-size: $font-size;
// @TODO // @TODO
} }

8
src/scss/helpers/_colors.scss
Unescape View File

@ -6,7 +6,7 @@
* *
*/ */
@each $name, $color in $plain-ui__colors { @each $name, $color in $colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.color-#{$class} { .color-#{$class} {
@ -14,7 +14,7 @@
} }
} }
@each $name, $color in $plain-ui__colors { @each $name, $color in $colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.fill-#{$class} { .fill-#{$class} {
@ -22,7 +22,7 @@
} }
} }
@each $name, $color in $plain-ui__colors { @each $name, $color in $colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.border-color-#{$class} { .border-color-#{$class} {
@ -30,7 +30,7 @@
} }
} }
@each $name, $color in $plain-ui__colors { @each $name, $color in $colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.background-color-#{$class} { .background-color-#{$class} {

10
src/scss/helpers/_core.scss
Unescape View File

@ -6,11 +6,11 @@
*/ */
.border { .border {
border: $plain-ui__border; border: $border;
} }
.border-round { .border-round {
border-radius: $plain-ui__border-radius; border-radius: $border-radius;
} }
.border-0 { .border-0 {
@ -31,9 +31,9 @@
* *
*/ */
$plain-ui__z-index: 20; $z-index: 20;
@for $i from 1 through $plain-ui__z-index { @for $i from 1 through $z-index {
.z-index-#{$i} { .z-index-#{$i} {
z-index: $i; z-index: $i;
} }
@ -63,7 +63,7 @@ $plain-ui__z-index: 20;
} }
.clearfix { .clearfix {
@include plain-ui__clearfix(); @include clearfix();
} }
/** /**

16
src/scss/helpers/_sizing.scss
Unescape View File

@ -7,7 +7,7 @@
* *
*/ */
$plain-ui__sizing_steps: 50 !default; $sizing_steps: 50 !default;
/** /**
* mixin: sizing * mixin: sizing
@ -27,23 +27,23 @@ $plain-ui__sizing_steps: 50 !default;
*/ */
@mixin sizing_breakpoints($class, $style, $i, $value) @mixin sizing_breakpoints($class, $style, $i, $value)
{ {
@include plain-ui__media-xs() { @include media-xs() {
@include sizing($class, $style, 'xs-' + $i, $value); @include sizing($class, $style, 'xs-' + $i, $value);
} }
@include plain-ui__media-sm() { @include media-sm() {
@include sizing($class, $style, 'sm-' + $i, $value); @include sizing($class, $style, 'sm-' + $i, $value);
} }
@include plain-ui__media-md() { @include media-md() {
@include sizing($class, $style, 'md-' + $i, $value); @include sizing($class, $style, 'md-' + $i, $value);
} }
@include plain-ui__media-lg() { @include media-lg() {
@include sizing($class, $style, 'lg-' + $i, $value); @include sizing($class, $style, 'lg-' + $i, $value);
} }
@include plain-ui__media-xlg() { @include media-xlg() {
@include sizing($class, $style, 'xlg-' + $i, $value); @include sizing($class, $style, 'xlg-' + $i, $value);
} }
} }
@ -68,7 +68,7 @@ $plain-ui__sizing_steps: 50 !default;
@include sizing_breakpoints('h-col', 'height', $i, $value); @include sizing_breakpoints('h-col', 'height', $i, $value);
} }
@for $i from 1 through $plain-ui__sizing_steps @for $i from 1 through $sizing_steps
{ {
$value: #{($i * 0.5)}rem; $value: #{($i * 0.5)}rem;
@ -76,7 +76,7 @@ $plain-ui__sizing_steps: 50 !default;
@include sizing_breakpoints('w', 'width', $i, $value); @include sizing_breakpoints('w', 'width', $i, $value);
} }
@for $i from 1 through $plain-ui__sizing_steps @for $i from 1 through $sizing_steps
{ {
$value: #{($i * 0.5)}rem; $value: #{($i * 0.5)}rem;

28
src/scss/helpers/_spacing.scss
Unescape View File

@ -6,15 +6,15 @@
* *
*/ */
$plain-ui__spacing-direction: ( $spacing-direction: (
'top', 'top',
'bottom', 'bottom',
'left', 'left',
'right' 'right'
) !default; ) !default;
$plain-ui__spacing-gap: 0.25 !default; $spacing-gap: 0.25 !default;
$plain-ui__spacing-steps: 10 !default; $spacing-steps: 10 !default;
/** /**
* mixin: spacing for single padding or margin * mixin: spacing for single padding or margin
@ -35,23 +35,23 @@ $plain-ui__spacing-steps: 10 !default;
*/ */
@mixin spacing_breakpoints($class, $style, $direction, $i, $value) @mixin spacing_breakpoints($class, $style, $direction, $i, $value)
{ {
@include plain-ui__media-xs() { @include media-xs() {
@include spacing($class, $style, $direction, 'xs-' + $i, $value); @include spacing($class, $style, $direction, 'xs-' + $i, $value);
} }
@include plain-ui__media-sm() { @include media-sm() {
@include spacing($class, $style, $direction, 'sm-' + $i, $value); @include spacing($class, $style, $direction, 'sm-' + $i, $value);
} }
@include plain-ui__media-md() { @include media-md() {
@include spacing($class, $style, $direction, 'md-' + $i, $value); @include spacing($class, $style, $direction, 'md-' + $i, $value);
} }
@include plain-ui__media-lg() { @include media-lg() {
@include spacing($class, $style, $direction, 'lg-' + $i, $value); @include spacing($class, $style, $direction, 'lg-' + $i, $value);
} }
@include plain-ui__media-xlg() { @include media-xlg() {
@include spacing($class, $style, $direction, 'xlg-' + $i, $value); @include spacing($class, $style, $direction, 'xlg-' + $i, $value);
} }
} }
@ -82,25 +82,25 @@ $plain-ui__spacing-steps: 10 !default;
} }
} }
@each $direction in $plain-ui__spacing-direction @each $direction in $spacing-direction
{ {
@include spacing('m', 'margin', $direction, 0, 0); @include spacing('m', 'margin', $direction, 0, 0);
@include spacing('m', 'margin', $direction, 1, 1px); @include spacing('m', 'margin', $direction, 1, 1px);
@for $i from 2 through $plain-ui__spacing-steps { @for $i from 2 through $spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; $value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value); @include spacing('m', 'margin', $direction, $i, $value);
@include spacing_breakpoints('m', 'margin', $direction, $i, $value); @include spacing_breakpoints('m', 'margin', $direction, $i, $value);
} }
} }
@each $direction in $plain-ui__spacing-direction @each $direction in $spacing-direction
{ {
@include spacing('p', 'padding', $direction, 0, 0); @include spacing('p', 'padding', $direction, 0, 0);
@include spacing('p', 'padding', $direction, 1, 1px); @include spacing('p', 'padding', $direction, 1, 1px);
@for $i from 0 through $plain-ui__spacing-steps { @for $i from 0 through $spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; $value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value); @include spacing('p', 'padding', $direction, $i, $value);
@include spacing_breakpoints('p', 'padding', $direction, $i, $value); @include spacing_breakpoints('p', 'padding', $direction, $i, $value);
} }

12
src/scss/helpers/_typography.scss
Unescape View File

@ -66,26 +66,26 @@
} }
} }
@each $name, $font-size in $plain-ui__font-sizes { @each $name, $font-size in $font-sizes {
@include add_font_size($name, $font-size); @include add_font_size($name, $font-size);
@include plain-ui__media-xs() { @include media-xs() {
@include add_font_size('xs-' + $name, $font-size); @include add_font_size('xs-' + $name, $font-size);
} }
@include plain-ui__media-sm() { @include media-sm() {
@include add_font_size('sm-' + $name, $font-size); @include add_font_size('sm-' + $name, $font-size);
} }
@include plain-ui__media-md() { @include media-md() {
@include add_font_size('md-' + $name, $font-size); @include add_font_size('md-' + $name, $font-size);
} }
@include plain-ui__media-lg() { @include media-lg() {
@include add_font_size('lg-' + $name, $font-size); @include add_font_size('lg-' + $name, $font-size);
} }
@include plain-ui__media-xlg() { @include media-xlg() {
@include add_font_size('xlg-' + $name, $font-size); @include add_font_size('xlg-' + $name, $font-size);
} }
} }

22
src/scss/layout/_masonry.scss
Unescape View File

@ -13,7 +13,7 @@
* *
*/ */
$plain-ui__masonry_sizes: ( $masonry_sizes: (
1: 25%, 1: 25%,
2: 55%, 2: 55%,
3: 20%, 3: 20%,
@ -21,28 +21,28 @@ $plain-ui__masonry_sizes: (
5: 33% 5: 33%
) !default; ) !default;
$plain-ui__masonry_height: 200px !default; $masonry_height: 200px !default;
$plain-ui__masonry_height--sm: 300px !default; $masonry_height--sm: 300px !default;
$plain-ui__masonry_gap: 15px !default; $masonry_gap: 15px !default;
$plain-ui__masonry_gap-offset: 10px !default; $masonry_gap-offset: 10px !default;
.masonry { .masonry {
display: flex; display: flex;
width: 100%; width: 100%;
flex-flow: row wrap; flex-flow: row wrap;
gap: $plain-ui__masonry_gap; gap: $masonry_gap;
&__item { &__item {
width: 100%; width: 100%;
height: $plain-ui__masonry_height; height: $masonry_height;
@include plain-ui__media-sm() { @include media-sm() {
height: $plain-ui__masonry_height--sm; height: $masonry_height--sm;
// add width from data // add width from data
@each $index, $size in $plain-ui__masonry_sizes { @each $index, $size in $masonry_sizes {
&:nth-child(4n+#{$index}) { &:nth-child(4n+#{$index}) {
width: calc(#{$size} - #{$plain-ui__masonry_gap-offset}); width: calc(#{$size} - #{$masonry_gap-offset});
} }
} }
} }

6
src/scss/plain-ui.scss
Unescape View File

@ -25,8 +25,4 @@
'layout/masonry', 'layout/masonry',
'layout/flex', 'layout/flex',
'helpers/core', 'helpers';
'helpers/sizing',
'helpers/spacing',
'helpers/colors',
'helpers/typography';

0
src/scss/themes/_dark.scss
Unescape View File

0
src/scss/themes/_light.scss
Unescape View File

Write Preview
Loading…
Cancel
Save