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

2584
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 {
.text-color-#{$name} {
color: var(#{$color});

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

@ -5,29 +5,21 @@
*
*/
@mixin plain-ui__helpers__core()
{
/**
* borders
*
*
*/
.border {
.border {
border: $plain-ui__border !important;
}
}
.border-round {
.border-round {
border-radius: $plain-ui__border-radius;
}
}
.borderless {
.borderless {
border: 0 !important;
}
}
.radiusless {
.radiusless {
border-radius: 0 !important;
}
}
/**
* z-index
@ -110,105 +102,96 @@
font-weight: medium !important;
}
.bold {
.bold {
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} {
font-size: $font-size !important;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
}
}
/**
* colors
*
*
*/
}
/**
/**
* floating
*
*
*/
.float-left {
.float-left {
float: left;
}
}
.float-right {
.float-right {
float: right;
}
}
.float-none {
.float-none {
float: none;
}
}
.centered {
.centered {
margin-left: auto;
margin-right: auto;
}
}
.clearfix {
.clearfix {
@include plain-ui__clearfix();
}
}
/**
/**
* position
*
*
*/
.absolute {
.absolute {
position: absolute !important;
}
}
.fixed {
.fixed {
position: fixed !important;
}
}
.relative {
.relative {
position: relative !important;
}
}
/**
/**
*
*
*/
.vertical-align-bottom {
.vertical-align-bottom {
vertical-align: bottom;
}
}
.vertical-align-top {
.vertical-align-top {
vertical-align: top;
}
}
.vertical-align-baseline {
.vertical-align-baseline {
vertical-align: baseline;
}
}
.marginless {
.marginless {
margin: 0 !important;
}
}
/**
/**
*
*
*/
.overflow-x-hidden {
.overflow-x-hidden {
overflow-x: hidden;
}
}
.overflow-y-hidden {
.overflow-y-hidden {
overflow-y: hidden;
}
}
.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'
) !default;
$plain-ui__helpers__spacing-gap: 0.25 !default;
$plain-ui__helpers__spacing-steps: 10 !default;
$plain-ui__spacing-gap: 0.25 !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, 1, 1px);
@for $i from 2 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@for $i from 2 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@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);
}
}
@each $direction in $plain-ui__spacing-direction {
@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
{
@include spacing('p', 'padding', $direction, 0, 0);
@include spacing('p', 'padding', $direction, 1, 1px);
@for $i from 0 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@for $i from 0 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@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--sm: 300px !default;
$plain-ui__masonry_gap: 15px !default;
$plain-ui__masonry_gap-offset: 10px !default;
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
gap: $plain-ui__masonry_gap;
&__item {
width: 100%;
height: $plain-ui__masonry_height;
padding-left: 1px;
padding-bottom: 1px;
@include plain-ui__media-sm() {
height: $plain-ui__masonry_height--sm;
@ -41,7 +42,7 @@ $plain-ui__masonry_height--sm: 300px !default;
// add width from data
@each $index, $size in $plain-ui__masonry_sizes {
&: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/colors';
@include plain-ui__helpers__core();
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__slider();

Write Preview
Loading…
Cancel
Save