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,
&::after {
display: table;
@ -35,7 +35,7 @@
*
*/
@mixin plain-ui__clearlist() {
@mixin clearlist() {
list-style: none;
margin: 0;
padding: 0;
@ -55,74 +55,74 @@
*
*/
@mixin plain-ui__media-xs() {
@media only screen and (min-width:$plain-ui__xs) {
@mixin media-xs() {
@media only screen and (min-width: $breakpoint__xs) {
@content;
}
}
@mixin plain-ui__media-sm() {
@media only screen and (min-width: $plain-ui__sm) {
@mixin media-sm() {
@media only screen and (min-width: $breakpoint__sm) {
@content;
}
}
@mixin plain-ui__media-md() {
@media only screen and (min-width: $plain-ui__md) {
@mixin media-md() {
@media only screen and (min-width: $breakpoint__md) {
@content;
}
}
@mixin plain-ui__media-lg() {
@media only screen and (min-width: $plain-ui__lg) {
@mixin media-lg() {
@media only screen and (min-width: $breakpoint__lg) {
@content;
}
}
@mixin plain-ui__media-xlg() {
@media only screen and (min-width: $plain-ui__xlg) {
@mixin media-xlg() {
@media only screen and (min-width: $breakpoint__xlg) {
@content;
}
}
@mixin plain-ui__media-xxs-only() {
@media only screen and (max-width: $plain-ui__xs) {
@mixin media-xxs-only() {
@media only screen and (max-width: $breakpoint__xs) {
@content;
}
}
@mixin plain-ui__media-xxs-only() {
@media only screen and (max-width: $plain-ui__xs - 1) {
@mixin media-xxs-only() {
@media only screen and (max-width: $breakpoint__xs - 1) {
@content;
}
}
@mixin plain-ui__media-xs-only() {
@media only screen and (min-width: $plain-ui__xs) and (max-width: $plain-ui__sm - 1) {
@mixin media-xs-only() {
@media only screen and (min-width: $breakpoint__xs) and (max-width: $breakpoint__sm - 1) {
@content;
}
}
@mixin plain-ui__media-sm-only() {
@media only screen and (min-width: $plain-ui__sm) and (max-width: $plain-ui__md - 1) {
@mixin media-sm-only() {
@media only screen and (min-width: $breakpoint__sm) and (max-width: $breakpoint__md - 1) {
@content;
}
}
@mixin plain-ui__media-md-only() {
@media only screen and (min-width: $plain-ui__md) and (max-width: $plain-ui__lg - 1) {
@mixin media-md-only() {
@media only screen and (min-width: $breakpoint__md) and (max-width: $breakpoint__lg - 1) {
@content;
}
}
@mixin plain-ui__media-lg-only() {
@media only screen and (min-width: $plain-ui__lg) and (max-width: $plain-ui__xlg - 1) {
@mixin media-lg-only() {
@media only screen and (min-width: $breakpoint__lg) and (max-width: $breakpoint__xlg - 1) {
@content;
}
}
@mixin plain-ui__media-xlg-only() {
@media only screen and (min-width: $plain-ui__xlg) {
@mixin media-xlg-only() {
@media only screen and (min-width: $breakpoint__xlg) {
@content;
}
}
@ -132,7 +132,7 @@
* 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 {
@media only screen and (min-width: $breakpoint) {
@if $important == false {
@ -171,7 +171,7 @@
* Set property and his value with an factor for each Breakpoint
*
* (
* $plain-ui__md: 10px
* $md: 10px
* )
*
* @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 {
@media only screen and (min-width: $breakpoint) {
@if $important == false {
@ -197,7 +197,7 @@
* 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
@ -206,7 +206,7 @@
* @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 {
// getting diff

162
src/scss/_variables.scss
Unescape View File

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

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

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

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

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

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

@ -15,14 +15,14 @@
align-items: center;
text-decoration: none;
font-family: $plain-ui__font-family;
font-family: $font-family;
font-size: 1rem;
border: 1px solid var(--border);
background-color: var(--background-contrast);
color: var(--text);
border-radius: $plain-ui__border-radius;
border-radius: $border-radius;
transition: background-color 0.1s;
margin-bottom: 0.5em;
@ -30,7 +30,7 @@
min-height: 2.8em;
width: 100%;
@include plain-ui__media-sm() {
@include media-sm() {
width: auto;
}
@ -125,26 +125,26 @@
&:hover {
color: var(--border);
border-color: lighten($plain-ui__primary, 40%);
border-color: lighten($color__primary, 40%);
background-color: transparent;
}
}
&--danger.button--outline {
&:hover {
border-color: lighten($plain-ui__danger, 20%);
border-color: lighten($color__danger, 20%);
}
}
&--info.button--outline {
&:hover {
border-color: lighten($plain-ui__info, 20%);
border-color: lighten($color__info, 20%);
}
}
&--success.button--outline {
&: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 {
margin: $plain-ui__margin;
margin: $margin;
&--valid {
input.field-text, textarea.field-text {
@ -31,7 +31,7 @@
.field-label {
font-size: 1rem;
font-family: $plain-ui__font-family;
font-family: $font-family;
.icon {
vertical-align: text-bottom;
@ -43,14 +43,14 @@
}
input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family;
font-family: $font-family;
font-size: 0.95rem;
width: 100%;
border: 1px solid var(--active);
background-color: var(--background-contrast);
border-radius: $plain-ui__border-radius;
border-radius: $border-radius;
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 {
&__item {

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

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

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

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

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

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

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

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

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

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

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

@ -12,8 +12,8 @@
// paragraphs
p {
margin: $plain-ui__margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
margin: $margin;
@include media-breakpoints('margin', $margin-breakpoints);
}
// Semantic text elements
@ -74,9 +74,9 @@
*
*/
blockquote {
border-left: $plain-ui__border;
border-left: $border;
margin-left: 0;
padding: $plain-ui__padding;
padding: $padding;
p:last-child {
margin-bottom: 0;
@ -91,8 +91,8 @@
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
margin: $margin;
@include media-breakpoints('margin', $margin-breakpoints);
}
ol,
@ -133,15 +133,15 @@
overflow-y: hidden;
overflow-x: auto;
border: $plain-ui__border;
border-radius: $plain-ui__border-radius;
border: $border;
border-radius: $border-radius;
background-color: var(--background-contrast);
margin: $plain-ui__margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
margin: $margin;
@include media-breakpoints('margin', $margin-breakpoints);
padding: $plain-ui__padding;
@include media-breakpoints('padding', $plain-ui__padding-breakpoints);
padding: $padding;
@include media-breakpoints('padding', $padding-breakpoints);
}
}
@ -149,6 +149,6 @@
padding: 0.15rem 0.4rem 0.25rem;
background: var(--primary);
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,
'h2': 2rem,
'h3': 1.8rem,
@ -17,18 +17,18 @@ $plain-ui__heading__font-sizes: (
'h6': 1.2rem
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
$heading__font-sizes__breakpoints: (
$breakpoint__md: 1.2rem
) !default;
$plain-ui__heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default;
$heading__font-weight: bold!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;
$plain-ui__heading__margin-breakpoints: (
$plain-ui__md: 0.7rem 0 1.4rem
$heading__margin: 0.6rem 0 1.2rem !default;
$heading__margin-breakpoints: (
$breakpoint__md: 0.7rem 0 1.4rem
) !default;
h1, .h1,
@ -37,21 +37,21 @@ h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight;
line-height: $plain-ui__heading__line-height;
font-family: $heading__font-family;
font-weight: $heading__font-weight;
line-height: $heading__line-height;
margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
margin: $heading__margin;
@include breakpoints('margin', $heading__margin-breakpoints);
&.highlight {
display: table;
}
}
@each $h, $font-size in $plain-ui__heading__font-sizes {
@each $h, $font-size in $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);
@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 {
@each $var, $color in $plain-ui__colors {
@each $var, $color in $colors {
#{$var}: $color;
}
}
@ -33,16 +33,16 @@ legend {
}
body {
font-family: $plain-ui__font-family;
font-family: $font-family;
color: var(--text);
background-color: var(--body);
direction: $plain-ui__direction;
direction: $direction;
font-size: $plain-ui__font-size;
@include media-breakpoints('font-size', $plain-ui__font-size-breakpoints);
font-size: $font-size;
@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);
}
@ -103,7 +103,7 @@ textarea {
}
fieldset {
margin: $plain-ui__margin;
margin: $margin;
}
// Remove the inheritance of text transform in Firefox
@ -176,7 +176,7 @@ hr {
overflow: visible; // Show the overflow in Edge and IE.
border: 0;
border-top: 1px solid var(--border);
margin: $plain-ui__margin;
margin: $margin;
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
@ -198,7 +198,7 @@ code,
kbd,
pre,
samp {
font-family: $plain-ui__font-family;
font-size: $plain-ui__font-size;
font-family: $font-family;
font-size: $font-size;
// @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, '--', '');
.color-#{$class} {
@ -14,7 +14,7 @@
}
}
@each $name, $color in $plain-ui__colors {
@each $name, $color in $colors {
$class: str-replace($name, '--', '');
.fill-#{$class} {
@ -22,7 +22,7 @@
}
}
@each $name, $color in $plain-ui__colors {
@each $name, $color in $colors {
$class: str-replace($name, '--', '');
.border-color-#{$class} {
@ -30,7 +30,7 @@
}
}
@each $name, $color in $plain-ui__colors {
@each $name, $color in $colors {
$class: str-replace($name, '--', '');
.background-color-#{$class} {

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

@ -6,11 +6,11 @@
*/
.border {
border: $plain-ui__border;
border: $border;
}
.border-round {
border-radius: $plain-ui__border-radius;
border-radius: $border-radius;
}
.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;
}
@ -63,7 +63,7 @@ $plain-ui__z-index: 20;
}
.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
@ -27,23 +27,23 @@ $plain-ui__sizing_steps: 50 !default;
*/
@mixin sizing_breakpoints($class, $style, $i, $value)
{
@include plain-ui__media-xs() {
@include media-xs() {
@include sizing($class, $style, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include media-sm() {
@include sizing($class, $style, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include media-md() {
@include sizing($class, $style, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include media-lg() {
@include sizing($class, $style, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include media-xlg() {
@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);
}
@for $i from 1 through $plain-ui__sizing_steps
@for $i from 1 through $sizing_steps
{
$value: #{($i * 0.5)}rem;
@ -76,7 +76,7 @@ $plain-ui__sizing_steps: 50 !default;
@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;

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

@ -6,15 +6,15 @@
*
*/
$plain-ui__spacing-direction: (
$spacing-direction: (
'top',
'bottom',
'left',
'right'
) !default;
$plain-ui__spacing-gap: 0.25 !default;
$plain-ui__spacing-steps: 10 !default;
$spacing-gap: 0.25 !default;
$spacing-steps: 10 !default;
/**
* 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)
{
@include plain-ui__media-xs() {
@include media-xs() {
@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 plain-ui__media-md() {
@include media-md() {
@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 plain-ui__media-xlg() {
@include media-xlg() {
@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, 1, 1px);
@for $i from 2 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@for $i from 2 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('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, 1, 1px);
@for $i from 0 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@for $i from 0 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('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 plain-ui__media-xs() {
@include media-xs() {
@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 plain-ui__media-md() {
@include media-md() {
@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 plain-ui__media-xlg() {
@include media-xlg() {
@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%,
2: 55%,
3: 20%,
@ -21,28 +21,28 @@ $plain-ui__masonry_sizes: (
5: 33%
) !default;
$plain-ui__masonry_height: 200px !default;
$plain-ui__masonry_height--sm: 300px !default;
$plain-ui__masonry_gap: 15px !default;
$plain-ui__masonry_gap-offset: 10px !default;
$masonry_height: 200px !default;
$masonry_height--sm: 300px !default;
$masonry_gap: 15px !default;
$masonry_gap-offset: 10px !default;
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
gap: $plain-ui__masonry_gap;
gap: $masonry_gap;
&__item {
width: 100%;
height: $plain-ui__masonry_height;
height: $masonry_height;
@include plain-ui__media-sm() {
height: $plain-ui__masonry_height--sm;
@include media-sm() {
height: $masonry_height--sm;
// add width from data
@each $index, $size in $plain-ui__masonry_sizes {
@each $index, $size in $masonry_sizes {
&: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/flex',
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'helpers/colors',
'helpers/typography';
'helpers';

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

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

Write Preview
Loading…
Cancel
Save