Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 11:24:29 -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

10
sass/elements/box.scss
View File

@@ -6,10 +6,12 @@ $box-radius: $radius-large !default;
$box-shadow: $shadow !default;
$box-padding: 1.25rem !default;
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default;
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0 0 1px $link !default;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
0 0 0 1px $link !default;
.box {
.#{$class-prefix}box {
@extend %block;
background-color: $box-background-color;
@@ -20,7 +22,7 @@ $box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $l
padding: $box-padding;
}
a.box {
a.#{$class-prefix}box {
&:hover,
&:focus {
box-shadow: $box-link-hover-shadow;

73
sass/elements/button.scss
View File

@@ -44,7 +44,20 @@ $button-static-background-color: $scheme-main-ter !default;
$button-static-border-color: $border !default;
$button-colors: $colors !default;
$button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $size-small * 0.875, "medium": $size-small, "large": $size-normal), "tablet-only": ("small": $size-small * 0.875, "normal": $size-small, "medium": $size-normal, "large": $size-medium)) !default;
$button-responsive-sizes: (
"mobile": (
"small": $size-small * 0.75,
"normal": $size-small * 0.875,
"medium": $size-small,
"large": $size-normal,
),
"tablet-only": (
"small": $size-small * 0.875,
"normal": $size-small,
"medium": $size-normal,
"large": $size-medium,
),
) !default;
// The button sizes use mixins so they can be used at different breakpoints
@mixin button-small {
@@ -67,7 +80,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
font-size: $size-large;
}
.button {
.#{$class-prefix}button {
@extend %control;
@extend %unselectable;
@@ -94,7 +107,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
color: inherit;
}
.icon {
.#{$class-prefix}icon {
&,
&.is-small,
&.is-medium,
@@ -104,18 +117,29 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
}
&:first-child:not(:last-child) {
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false);
@include ltr-property(
"margin",
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}),
false
);
@include ltr-property("margin", $button-padding-horizontal * 0.25);
}
&:last-child:not(:first-child) {
@include ltr-property("margin", $button-padding-horizontal * 0.25, false);
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}));
@include ltr-property(
"margin",
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
);
}
&:first-child:last-child {
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
margin-left: calc(
#{-0.5 * $button-padding-horizontal} - #{$button-border-width}
);
margin-right: calc(
#{-0.5 * $button-padding-horizontal} - #{$button-border-width}
);
}
}
@@ -244,7 +268,10 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
&.is-loading {
&::after {
border-color: transparent transparent $color-invert $color-invert !important;
border-color: transparent
transparent
$color-invert
$color-invert !important;
}
}
@@ -272,7 +299,10 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
&:focus,
&.is-focused {
&::after {
border-color: transparent transparent $color-invert $color-invert !important;
border-color: transparent
transparent
$color-invert
$color-invert !important;
}
}
}
@@ -405,13 +435,13 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
}
}
.buttons {
.#{$class-prefix}buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.button {
.#{$class-prefix}button {
margin-bottom: 0.5rem;
&:not(:last-child):not(.is-fullwidth) {
@@ -429,25 +459,25 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
// Sizes
&.are-small {
.button:not(.is-normal):not(.is-medium):not(.is-large) {
.#{$class-prefix}button:not(.is-normal):not(.is-medium):not(.is-large) {
@include button-small;
}
}
&.are-medium {
.button:not(.is-small):not(.is-normal):not(.is-large) {
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-large) {
@include button-medium;
}
}
&.are-large {
.button:not(.is-small):not(.is-normal):not(.is-medium) {
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-medium) {
@include button-large;
}
}
&.has-addons {
.button {
.#{$class-prefix}button {
&:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
@@ -492,7 +522,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
justify-content: center;
&:not(.has-addons) {
.button:not(.is-fullwidth) {
.#{$class-prefix}button:not(.is-fullwidth) {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
@@ -503,7 +533,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
justify-content: flex-end;
&:not(.has-addons) {
.button:not(.is-fullwidth) {
.#{$class-prefix}button:not(.is-fullwidth) {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
@@ -515,13 +545,12 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
@include breakpoint($bp-name) {
@each $size, $value in $bp-sizes {
@if $size != "normal" {
.button.is-responsive.is-#{$size} {
.#{$class-prefix}button.is-responsive.is-#{$size} {
font-size: $value;
}
}
@else {
.button.is-responsive,
.button.is-responsive.is-normal {
} @else {
.#{$class-prefix}button.is-responsive,
.#{$class-prefix}button.is-responsive.is-normal {
font-size: $value;
}
}

6
sass/elements/container.scss
View File

@@ -3,7 +3,7 @@
$container-offset: 2 * $gap !default;
$container-max-width: $fullhd !default;
.container {
.#{$class-prefix}container {
flex-grow: 1;
margin: 0 auto;
position: relative;
@@ -20,28 +20,24 @@ $container-max-width: $fullhd !default;
max-width: $desktop - $container-offset;
}
@include until-widescreen {
&.is-widescreen:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
}
}
@include until-fullhd {
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;
}
}
@include widescreen {
&:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
}
}
@include fullhd {
&:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;

4
sass/elements/content.scss
View File

@@ -22,7 +22,7 @@ $content-table-body-last-row-cell-border-bottom-width: 0 !default;
$content-table-foot-cell-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: $text-strong !default;
.content {
.#{$class-prefix}content {
@extend %block;
// Inline
@@ -236,7 +236,7 @@ $content-table-foot-cell-color: $text-strong !default;
}
}
.tabs {
.#{$class-prefix}tabs {
li + li {
margin-top: 0;
}

10
sass/elements/icon.scss
View File

@@ -4,7 +4,7 @@ $icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default;
.icon {
.#{$class-prefix}icon {
align-items: center;
display: inline-flex;
justify-content: center;
@@ -28,7 +28,7 @@ $icon-text-spacing: 0.25em !default;
}
}
.icon-text {
.#{$class-prefix}icon-text {
align-items: flex-start;
color: inherit;
display: inline-flex;
@@ -36,7 +36,7 @@ $icon-text-spacing: 0.25em !default;
line-height: $icon-dimensions;
vertical-align: top;
.icon {
.#{$class-prefix}icon {
flex-grow: 0;
flex-shrink: 0;
@@ -45,7 +45,6 @@ $icon-text-spacing: 0.25em !default;
margin-right: $icon-text-spacing;
}
@include rtl {
margin-left: $icon-text-spacing;
}
@@ -56,7 +55,6 @@ $icon-text-spacing: 0.25em !default;
margin-left: $icon-text-spacing;
}
@include rtl {
margin-right: $icon-text-spacing;
}
@@ -64,6 +62,6 @@ $icon-text-spacing: 0.25em !default;
}
}
div.icon-text {
div.#{$class-prefix}icon-text {
display: flex;
}

2
sass/elements/image.scss
View File

@@ -2,7 +2,7 @@
$dimensions: 16 24 32 48 64 96 128 !default;
.image {
.#{$class-prefix}image {
display: block;
position: relative;

14
sass/elements/notification.scss
View File

@@ -9,7 +9,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
$notification-colors: $colors !default;
.notification {
.#{$class-prefix}notification {
@extend %block;
background-color: $notification-background-color;
@@ -20,13 +20,11 @@ $notification-colors: $colors !default;
padding: $notification-padding-ltr;
}
@include rtl {
padding: $notification-padding-rtl;
}
a:not(.button):not(.dropdown-item) {
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
color: currentColor;
text-decoration: underline;
}
@@ -44,16 +42,16 @@ $notification-colors: $colors !default;
background: transparent;
}
& > .delete {
& > .#{$class-prefix}delete {
@include ltr-position(0.5rem);
position: absolute;
top: 0.5rem;
}
.title,
.subtitle,
.content {
.#{$class-prefix}title,
.#{$class-prefix}subtitle,
.#{$class-prefix}content {
color: currentColor;
}

10
sass/elements/other.scss
View File

@@ -1,14 +1,14 @@
@import "../utilities/mixins";
.block {
.#{$class-prefix}block {
@extend %block;
}
.delete {
.#{$class-prefix}delete {
@extend %delete;
}
.heading {
.#{$class-prefix}heading {
display: block;
font-size: 11px;
letter-spacing: 1px;
@@ -16,11 +16,11 @@
text-transform: uppercase;
}
.loader {
.#{$class-prefix}loader {
@extend %loader;
}
.number {
.#{$class-prefix}number {
align-items: center;
background-color: $background;
border-radius: $radius-rounded;

14
sass/elements/progress.scss
View File

@@ -8,7 +8,7 @@ $progress-indeterminate-duration: 1.5s !default;
$progress-colors: $colors !default;
.progress {
.#{$class-prefix}progress {
@extend %block;
-moz-appearance: none;
@@ -56,7 +56,11 @@ $progress-colors: $colors !default;
}
&:indeterminate {
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%);
background-image: linear-gradient(
to right,
$color 30%,
$progress-bar-background-color 30%
);
}
}
}
@@ -67,7 +71,11 @@ $progress-colors: $colors !default;
animation-name: moveIndeterminate;
animation-timing-function: linear;
background-color: $progress-bar-background-color;
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%);
background-image: linear-gradient(
to right,
$text 30%,
$progress-bar-background-color 30%
);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;

4
sass/elements/table.scss
View File

@@ -28,7 +28,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
$table-colors: $colors !default;
.table {
.#{$class-prefix}table {
@extend %block;
background-color: $table-background-color;
@@ -196,7 +196,7 @@ $table-colors: $colors !default;
}
}
.table-container {
.#{$class-prefix}table-container {
@extend %block;
@include overflow-touch;

24
sass/elements/tag.scss
View File

@@ -7,13 +7,13 @@ $tag-delete-margin: 1px !default;
$tag-colors: $colors !default;
.tags {
.#{$class-prefix}tags {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.tag {
.#{$class-prefix}tag {
margin-bottom: 0.5rem;
&:not(:last-child) {
@@ -31,13 +31,13 @@ $tag-colors: $colors !default;
// Sizes
&.are-medium {
.tag:not(.is-normal):not(.is-large) {
.#{$class-prefix}tag:not(.is-normal):not(.is-large) {
font-size: $size-normal;
}
}
&.are-large {
.tag:not(.is-normal):not(.is-medium) {
.#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
font-size: $size-medium;
}
}
@@ -45,7 +45,7 @@ $tag-colors: $colors !default;
&.is-centered {
justify-content: center;
.tag {
.#{$class-prefix}tag {
margin-right: 0.25rem;
margin-left: 0.25rem;
}
@@ -54,7 +54,7 @@ $tag-colors: $colors !default;
&.is-right {
justify-content: flex-end;
.tag {
.#{$class-prefix}tag {
&:not(:first-child) {
margin-left: 0.5rem;
}
@@ -66,7 +66,7 @@ $tag-colors: $colors !default;
}
&.has-addons {
.tag {
.#{$class-prefix}tag {
@include ltr-property("margin", 0);
&:not(:first-child) {
@@ -76,7 +76,6 @@ $tag-colors: $colors !default;
border-bottom-left-radius: 0;
}
@include rtl {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@@ -89,7 +88,6 @@ $tag-colors: $colors !default;
border-bottom-right-radius: 0;
}
@include rtl {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -99,7 +97,7 @@ $tag-colors: $colors !default;
}
}
.tag:not(body) {
.#{$class-prefix}tag:not(body) {
align-items: center;
background-color: $tag-background-color;
border-radius: $tag-radius;
@@ -113,7 +111,7 @@ $tag-colors: $colors !default;
padding-right: 0.75em;
white-space: nowrap;
.delete {
.#{$class-prefix}delete {
@include ltr-property("margin", 0.25rem, false);
@include ltr-property("margin", -0.375rem);
}
@@ -153,7 +151,7 @@ $tag-colors: $colors !default;
font-size: $size-medium;
}
.icon {
.#{$class-prefix}icon {
&:first-child:not(:last-child) {
@include ltr-property("margin", -0.375em, false);
@include ltr-property("margin", 0.1875em);
@@ -215,7 +213,7 @@ $tag-colors: $colors !default;
}
}
a.tag {
a.#{$class-prefix}tag {
&:hover {
text-decoration: underline;
}

14
sass/elements/title.scss
View File

@@ -19,8 +19,8 @@ $subtitle-strong-color: $text-strong !default;
$subtitle-strong-weight: $weight-semibold !default;
$subtitle-negative-margin: -1.25rem !default;
.title,
.subtitle {
.#{$class-prefix}title,
.#{$class-prefix}subtitle {
@extend %block;
word-break: break-word;
@@ -38,12 +38,12 @@ $subtitle-negative-margin: -1.25rem !default;
font-size: $title-sup-size;
}
.tag {
.#{$class-prefix}tag {
vertical-align: middle;
}
}
.title {
.#{$class-prefix}title {
color: $title-color;
@if $title-family {
@@ -59,7 +59,7 @@ $subtitle-negative-margin: -1.25rem !default;
font-weight: $title-strong-weight;
}
&:not(.is-spaced) + .subtitle {
&:not(.is-spaced) + .#{$class-prefix}subtitle {
margin-top: $subtitle-negative-margin;
}
@@ -73,7 +73,7 @@ $subtitle-negative-margin: -1.25rem !default;
}
}
.subtitle {
.#{$class-prefix}subtitle {
color: $subtitle-color;
@if $subtitle-family {
@@ -89,7 +89,7 @@ $subtitle-negative-margin: -1.25rem !default;
font-weight: $subtitle-strong-weight;
}
&:not(.is-spaced) + .title {
&:not(.is-spaced) + .#{$class-prefix}title {
margin-top: $subtitle-negative-margin;
}