Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add CSS class name prefix

Browse Source
This commit is contained in:
Jeremy Thomas
2022-11-23 22:53:56 +00:00
parent f75e9fcec2
commit 7de49012b7
50 changed files with 20999 additions and 9088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
sass/grid/columns.scss
View File

@@ -2,111 +2,111 @@
$column-gap: 0.75rem !default;
.column {
.#{$class-prefix}column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: $column-gap;
.columns.is-mobile > &.is-narrow {
.#{$class-prefix}columns.is-mobile > &.is-narrow {
flex: none;
width: unset;
}
.columns.is-mobile > &.is-full {
.#{$class-prefix}columns.is-mobile > &.is-full {
flex: none;
width: 100%;
}
.columns.is-mobile > &.is-three-quarters {
.#{$class-prefix}columns.is-mobile > &.is-three-quarters {
flex: none;
width: 75%;
}
.columns.is-mobile > &.is-two-thirds {
.#{$class-prefix}columns.is-mobile > &.is-two-thirds {
flex: none;
width: 66.6666%;
}
.columns.is-mobile > &.is-half {
.#{$class-prefix}columns.is-mobile > &.is-half {
flex: none;
width: 50%;
}
.columns.is-mobile > &.is-one-third {
.#{$class-prefix}columns.is-mobile > &.is-one-third {
flex: none;
width: 33.3333%;
}
.columns.is-mobile > &.is-one-quarter {
.#{$class-prefix}columns.is-mobile > &.is-one-quarter {
flex: none;
width: 25%;
}
.columns.is-mobile > &.is-one-fifth {
.#{$class-prefix}columns.is-mobile > &.is-one-fifth {
flex: none;
width: 20%;
}
.columns.is-mobile > &.is-two-fifths {
.#{$class-prefix}columns.is-mobile > &.is-two-fifths {
flex: none;
width: 40%;
}
.columns.is-mobile > &.is-three-fifths {
.#{$class-prefix}columns.is-mobile > &.is-three-fifths {
flex: none;
width: 60%;
}
.columns.is-mobile > &.is-four-fifths {
.#{$class-prefix}columns.is-mobile > &.is-four-fifths {
flex: none;
width: 80%;
}
.columns.is-mobile > &.is-offset-three-quarters {
.#{$class-prefix}columns.is-mobile > &.is-offset-three-quarters {
@include ltr-property("margin", 75%, false);
}
.columns.is-mobile > &.is-offset-two-thirds {
.#{$class-prefix}columns.is-mobile > &.is-offset-two-thirds {
@include ltr-property("margin", 66.6666%, false);
}
.columns.is-mobile > &.is-offset-half {
.#{$class-prefix}columns.is-mobile > &.is-offset-half {
@include ltr-property("margin", 50%, false);
}
.columns.is-mobile > &.is-offset-one-third {
.#{$class-prefix}columns.is-mobile > &.is-offset-one-third {
@include ltr-property("margin", 33.3333%, false);
}
.columns.is-mobile > &.is-offset-one-quarter {
.#{$class-prefix}columns.is-mobile > &.is-offset-one-quarter {
@include ltr-property("margin", 25%, false);
}
.columns.is-mobile > &.is-offset-one-fifth {
.#{$class-prefix}columns.is-mobile > &.is-offset-one-fifth {
@include ltr-property("margin", 20%, false);
}
.columns.is-mobile > &.is-offset-two-fifths {
.#{$class-prefix}columns.is-mobile > &.is-offset-two-fifths {
@include ltr-property("margin", 40%, false);
}
.columns.is-mobile > &.is-offset-three-fifths {
.#{$class-prefix}columns.is-mobile > &.is-offset-three-fifths {
@include ltr-property("margin", 60%, false);
}
.columns.is-mobile > &.is-offset-four-fifths {
.#{$class-prefix}columns.is-mobile > &.is-offset-four-fifths {
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
.columns.is-mobile > &.is-#{$i} {
.#{$class-prefix}columns.is-mobile > &.is-#{$i} {
flex: none;
width: percentage(divide($i, 12));
}
.columns.is-mobile > &.is-offset-#{$i} {
.#{$class-prefix}columns.is-mobile > &.is-offset-#{$i} {
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
@@ -215,7 +215,6 @@ $column-gap: 0.75rem !default;
}
}
@include tablet {
&.is-narrow,
&.is-narrow-tablet {
@@ -342,7 +341,6 @@ $column-gap: 0.75rem !default;
}
}
@include touch {
&.is-narrow-touch {
flex: none;
@@ -447,7 +445,6 @@ $column-gap: 0.75rem !default;
}
}
@include desktop {
&.is-narrow-desktop {
flex: none;
@@ -552,7 +549,6 @@ $column-gap: 0.75rem !default;
}
}
@include widescreen {
&.is-narrow-widescreen {
flex: none;
@@ -657,7 +653,6 @@ $column-gap: 0.75rem !default;
}
}
@include fullhd {
&.is-narrow-fullhd {
flex: none;
@@ -763,7 +758,7 @@ $column-gap: 0.75rem !default;
}
}
.columns {
.#{$class-prefix}columns {
@include ltr-property("margin", -$column-gap, false);
@include ltr-property("margin", -$column-gap);
@@ -788,7 +783,7 @@ $column-gap: 0.75rem !default;
margin-top: 0;
& > .column {
& > .#{$class-prefix}column {
margin: 0;
padding: 0 !important;
}
@@ -821,7 +816,6 @@ $column-gap: 0.75rem !default;
}
}
@include desktop {
// Modifiers
&.is-desktop {
@@ -831,13 +825,13 @@ $column-gap: 0.75rem !default;
}
@if $variable-columns {
.columns.is-variable {
.#{$class-prefix}columns.is-variable {
--columnGap: 0.75rem;
@include ltr-property("margin", calc(-1 * var(--columnGap)), false);
@include ltr-property("margin", calc(-1 * var(--columnGap)));
> .column {
> .#{$class-prefix}column {
padding-left: var(--columnGap);
padding-right: var(--columnGap);
}
@@ -853,56 +847,48 @@ $column-gap: 0.75rem !default;
}
}
@include tablet {
&.is-#{$i}-tablet {
--columnGap: #{$i * 0.25rem};
}
}
@include tablet-only {
&.is-#{$i}-tablet-only {
--columnGap: #{$i * 0.25rem};
}
}
@include touch {
&.is-#{$i}-touch {
--columnGap: #{$i * 0.25rem};
}
}
@include desktop {
&.is-#{$i}-desktop {
--columnGap: #{$i * 0.25rem};
}
}
@include desktop-only {
&.is-#{$i}-desktop-only {
--columnGap: #{$i * 0.25rem};
}
}
@include widescreen {
&.is-#{$i}-widescreen {
--columnGap: #{$i * 0.25rem};
}
}
@include widescreen-only {
&.is-#{$i}-widescreen-only {
--columnGap: #{$i * 0.25rem};
}
}
@include fullhd {
&.is-#{$i}-fullhd {
--columnGap: #{$i * 0.25rem};

4
sass/grid/tiles.scss
View File

@@ -2,7 +2,7 @@
$tile-spacing: 0.75rem !default;
.tile {
.#{$class-prefix}tile {
align-items: stretch;
display: block;
flex-basis: 0;
@@ -36,7 +36,7 @@ $tile-spacing: 0.75rem !default;
&.is-vertical {
flex-direction: column;
& > .tile.is-child:not(:last-child) {
& > .#{$class-prefix}tile.is-child:not(:last-child) {
margin-bottom: 1.5rem !important;
}
}