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

adding spacing

Browse Source
release/0.2
Björn 3 years ago
parent dcdbde0946
commit 332c8c7cd0
6 changed files with 2411 additions and 385 deletions
Show Stats Download Patch File Download Diff File

2536
dist/plain-ui.css vendored
View File

File diff suppressed because it is too large Load Diff

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

@ -1,3 +1,11 @@
/**
*
*
*
*
*
*/
@each $name, $color in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
.text-color-#{$name} { .text-color-#{$name} {
color: var(#{$color}); color: var(#{$color});

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

@ -5,29 +5,21 @@
* *
*/ */
@mixin plain-ui__helpers__core() .border {
{ border: $plain-ui__border !important;
/** }
* borders
*
*
*/
.border { .border-round {
border: $plain-ui__border !important; border-radius: $plain-ui__border-radius;
} }
.border-round { .borderless {
border-radius: $plain-ui__border-radius; border: 0 !important;
} }
.borderless {
border: 0 !important;
}
.radiusless { .radiusless {
border-radius: 0 !important; border-radius: 0 !important;
} }
/** /**
* z-index * z-index
@ -110,105 +102,96 @@
font-weight: medium !important; font-weight: medium !important;
} }
.bold { .bold {
font-weight: bolder !important; font-weight: bolder !important;
} }
@each $name, $font-size in $plain-ui__font-sizes { @each $name, $font-size in $plain-ui__font-sizes {
.t-size-#{$name} { .t-size-#{$name} {
font-size: $font-size !important; font-size: $font-size !important;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
}
} }
}
/** /**
* colors * floating
* *
* *
*/ */
/**
* floating
*
*
*/
.float-left { .float-left {
float: left; float: left;
} }
.float-right { .float-right {
float: right; float: right;
} }
.float-none { .float-none {
float: none; float: none;
} }
.centered { .centered {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.clearfix { .clearfix {
@include plain-ui__clearfix(); @include plain-ui__clearfix();
} }
/** /**
* position * position
* *
* *
*/ */
.absolute { .absolute {
position: absolute !important; position: absolute !important;
} }
.fixed { .fixed {
position: fixed !important; position: fixed !important;
} }
.relative { .relative {
position: relative !important; position: relative !important;
} }
/** /**
* *
* *
*/ */
.vertical-align-bottom { .vertical-align-bottom {
vertical-align: bottom; vertical-align: bottom;
} }
.vertical-align-top { .vertical-align-top {
vertical-align: top; vertical-align: top;
} }
.vertical-align-baseline { .vertical-align-baseline {
vertical-align: baseline; vertical-align: baseline;
} }
.marginless { .marginless {
margin: 0 !important; margin: 0 !important;
} }
/** /**
* *
* *
*/ */
.overflow-x-hidden { .overflow-x-hidden {
overflow-x: hidden; overflow-x: hidden;
} }
.overflow-y-hidden { .overflow-y-hidden {
overflow-y: hidden; overflow-y: hidden;
} }
.object-fit-cover { .object-fit-cover {
object-fit: cover; object-fit: cover;
}
} }

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

@ -5,8 +5,8 @@ $plain-ui__spacing-direction: (
'right' 'right'
) !default; ) !default;
$plain-ui__helpers__spacing-gap: 0.25 !default; $plain-ui__spacing-gap: 0.25 !default;
$plain-ui__helpers__spacing-steps: 10 !default; $plain-ui__spacing-steps: 10 !default;
/** /**
* *
@ -19,24 +19,64 @@ $plain-ui__helpers__spacing-steps: 10 !default;
} }
} }
@each $direction in $plain-ui__spacing-direction { @each $direction in $plain-ui__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__helpers__spacing-steps { @for $i from 2 through $plain-ui__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value); @include spacing('m', 'margin', $direction, $i, $value);
@include plain-ui__media-xs() {
@include spacing('m', 'margin', $direction, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include spacing('m', 'margin', $direction, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include spacing('m', 'margin', $direction, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include spacing('m', 'margin', $direction, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include spacing('m', 'margin', $direction, 'xlg-' + $i, $value);
}
} }
} }
@each $direction in $plain-ui__spacing-direction { @each $direction in $plain-ui__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__helpers__spacing-steps { @for $i from 0 through $plain-ui__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value); @include spacing('p', 'padding', $direction, $i, $value);
@include plain-ui__media-xs() {
@include spacing('p', 'padding', $direction, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include spacing('p', 'padding', $direction, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include spacing('p', 'padding', $direction, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include spacing('p', 'padding', $direction, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include spacing('p', 'padding', $direction, 'xlg-' + $i, $value);
}
} }
} }

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

@ -23,17 +23,18 @@ $plain-ui__masonry_sizes: (
$plain-ui__masonry_height: 200px !default; $plain-ui__masonry_height: 200px !default;
$plain-ui__masonry_height--sm: 300px !default; $plain-ui__masonry_height--sm: 300px !default;
$plain-ui__masonry_gap: 15px !default;
$plain-ui__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;
&__item { &__item {
width: 100%; width: 100%;
height: $plain-ui__masonry_height; height: $plain-ui__masonry_height;
padding-left: 1px;
padding-bottom: 1px;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
height: $plain-ui__masonry_height--sm; height: $plain-ui__masonry_height--sm;
@ -41,7 +42,7 @@ $plain-ui__masonry_height--sm: 300px !default;
// add width from data // add width from data
@each $index, $size in $plain-ui__masonry_sizes { @each $index, $size in $plain-ui__masonry_sizes {
&:nth-child(4n+#{$index}) { &:nth-child(4n+#{$index}) {
width: #{$size}; width: calc(#{$size} - #{$plain-ui__masonry_gap-offset});
} }
} }
} }

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

@ -31,8 +31,6 @@
'helpers/spacing', 'helpers/spacing',
'helpers/colors'; 'helpers/colors';
@include plain-ui__helpers__core();
@include plain-ui__component__media(); @include plain-ui__component__media();
@include plain-ui__component__table(); @include plain-ui__component__table();
@include plain-ui__component__slider(); @include plain-ui__component__slider();

Write Preview
Loading…
Cancel
Save