Added CSS spacing helpers + Fixed issue #1

This commit is contained in:
Sagi Dayan 2020-01-24 12:30:56 -05:00
parent a0441acdf9
commit 452d3c5b25
3 changed files with 288 additions and 3 deletions

View file

@ -6631,3 +6631,243 @@ label.panel-block {
opacity: 0; }
100% {
opacity: 0; } }
.m-none {
margin: 0; }
.p-none {
padding: 0; }
.m-t-none {
margin-top: 0; }
.p-t-none {
padding-top: 0; }
.m-r-none {
margin-right: 0; }
.p-r-none {
padding-right: 0; }
.m-b-none {
margin-bottom: 0; }
.p-b-none {
padding-bottom: 0; }
.m-l-none {
margin-left: 0; }
.p-l-none {
padding-left: 0; }
.m-xxs {
margin: 0.75rem; }
.p-xxs {
padding: 0.75rem; }
.m-t-xxs {
margin-top: 0.75rem; }
.p-t-xxs {
padding-top: 0.75rem; }
.m-r-xxs {
margin-right: 0.75rem; }
.p-r-xxs {
padding-right: 0.75rem; }
.m-b-xxs {
margin-bottom: 0.75rem; }
.p-b-xxs {
padding-bottom: 0.75rem; }
.m-l-xxs {
margin-left: 0.75rem; }
.p-l-xxs {
padding-left: 0.75rem; }
.m-xs {
margin: 0.25rem; }
.p-xs {
padding: 0.25rem; }
.m-t-xs {
margin-top: 0.25rem; }
.p-t-xs {
padding-top: 0.25rem; }
.m-r-xs {
margin-right: 0.25rem; }
.p-r-xs {
padding-right: 0.25rem; }
.m-b-xs {
margin-bottom: 0.25rem; }
.p-b-xs {
padding-bottom: 0.25rem; }
.m-l-xs {
margin-left: 0.25rem; }
.p-l-xs {
padding-left: 0.25rem; }
.m-sm {
margin: 0.5rem; }
.p-sm {
padding: 0.5rem; }
.m-t-sm {
margin-top: 0.5rem; }
.p-t-sm {
padding-top: 0.5rem; }
.m-r-sm {
margin-right: 0.5rem; }
.p-r-sm {
padding-right: 0.5rem; }
.m-b-sm {
margin-bottom: 0.5rem; }
.p-b-sm {
padding-bottom: 0.5rem; }
.m-l-sm {
margin-left: 0.5rem; }
.p-l-sm {
padding-left: 0.5rem; }
.m-md {
margin: 1rem; }
.p-md {
padding: 1rem; }
.m-t-md {
margin-top: 1rem; }
.p-t-md {
padding-top: 1rem; }
.m-r-md {
margin-right: 1rem; }
.p-r-md {
padding-right: 1rem; }
.m-b-md {
margin-bottom: 1rem; }
.p-b-md {
padding-bottom: 1rem; }
.m-l-md {
margin-left: 1rem; }
.p-l-md {
padding-left: 1rem; }
.m-lg {
margin: 2rem; }
.p-lg {
padding: 2rem; }
.m-t-lg {
margin-top: 2rem; }
.p-t-lg {
padding-top: 2rem; }
.m-r-lg {
margin-right: 2rem; }
.p-r-lg {
padding-right: 2rem; }
.m-b-lg {
margin-bottom: 2rem; }
.p-b-lg {
padding-bottom: 2rem; }
.m-l-lg {
margin-left: 2rem; }
.p-l-lg {
padding-left: 2rem; }
.m-xl {
margin: 4rem; }
.p-xl {
padding: 4rem; }
.m-t-xl {
margin-top: 4rem; }
.p-t-xl {
padding-top: 4rem; }
.m-r-xl {
margin-right: 4rem; }
.p-r-xl {
padding-right: 4rem; }
.m-b-xl {
margin-bottom: 4rem; }
.p-b-xl {
padding-bottom: 4rem; }
.m-l-xl {
margin-left: 4rem; }
.p-l-xl {
padding-left: 4rem; }
.m-xxl {
margin: 8rem; }
.p-xxl {
padding: 8rem; }
.m-t-xxl {
margin-top: 8rem; }
.p-t-xxl {
padding-top: 8rem; }
.m-r-xxl {
margin-right: 8rem; }
.p-r-xxl {
padding-right: 8rem; }
.m-b-xxl {
margin-bottom: 8rem; }
.p-b-xxl {
padding-bottom: 8rem; }
.m-l-xxl {
margin-left: 8rem; }
.p-l-xxl {
padding-left: 8rem; }

View file

@ -127,3 +127,49 @@
opacity: 0
}
}
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
('none', 0),
('xxs', 0.75),
('xs', 0.25),
('sm', 0.5),
('md', 1),
('lg', 2),
('xl', 4),
('xxl', 8),
);
$positions: (
('t', 'top'),
('r', 'right'),
('b', 'bottom'),
('l', 'left')
);
@function sizeValue($key, $value) {
@return if($key == 'none', 0, $value + $sizeUnit);
}
@each $size in $sizes {
$sizeKey: nth($size, 1);
$sizeValue: nth($size, 2);
.#{$marginKey}#{$separator}#{$sizeKey} {
margin: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$sizeKey} {
padding: sizeValue($sizeKey, $sizeValue);
}
@each $position in $positions {
$posKey: nth($position, 1);
$posValue: nth($position, 2);
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
}
}

View file

@ -64,16 +64,15 @@
</div>
<p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
</div>
<div class="field">
<div class="field m-b-xxs">
<label class="label has-text-light">Confirm Password</label>
<div class="control has-icons-left">
<input class="input" type="password" placeholder="confirm password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
<p class="help is-danger">{{ '' }}</p>
</div>
</nav>
<nav class="level">