Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 04:34:30 -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

70
sass/form/file.scss
View File

@@ -13,7 +13,7 @@ $file-name-max-width: 16em !default;
$file-colors: $form-colors !default;
.file {
.#{$class-prefix}file {
@extend %unselectable;
align-items: stretch;
@@ -27,7 +27,7 @@ $file-colors: $form-colors !default;
$color-invert: nth($pair, 2);
&.is-#{$name} {
.file-cta {
.#{$class-prefix}file-cta {
background-color: $color;
border-color: transparent;
color: $color-invert;
@@ -35,7 +35,7 @@ $file-colors: $form-colors !default;
&:hover,
&.is-hovered {
.file-cta {
.#{$class-prefix}file-cta {
background-color: bulmaDarken($color, 2.5%);
border-color: transparent;
color: $color-invert;
@@ -44,7 +44,7 @@ $file-colors: $form-colors !default;
&:focus,
&.is-focused {
.file-cta {
.#{$class-prefix}file-cta {
border-color: transparent;
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
color: $color-invert;
@@ -53,7 +53,7 @@ $file-colors: $form-colors !default;
&:active,
&.is-active {
.file-cta {
.#{$class-prefix}file-cta {
background-color: bulmaDarken($color, 5%);
border-color: transparent;
color: $color-invert;
@@ -74,7 +74,7 @@ $file-colors: $form-colors !default;
&.is-medium {
font-size: $size-medium;
.file-icon {
.#{$class-prefix}file-icon {
.fa {
font-size: 21px;
}
@@ -84,7 +84,7 @@ $file-colors: $form-colors !default;
&.is-large {
font-size: $size-large;
.file-icon {
.#{$class-prefix}file-icon {
.fa {
font-size: 28px;
}
@@ -93,43 +93,43 @@ $file-colors: $form-colors !default;
// Modifiers
&.has-name {
.file-cta {
.#{$class-prefix}file-cta {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.file-name {
.#{$class-prefix}file-name {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&.is-empty {
.file-cta {
.#{$class-prefix}file-cta {
border-radius: $file-radius;
}
.file-name {
.#{$class-prefix}file-name {
display: none;
}
}
}
&.is-boxed {
.file-label {
.#{$class-prefix}file-label {
flex-direction: column;
}
.file-cta {
.#{$class-prefix}file-cta {
flex-direction: column;
height: auto;
padding: 1em 3em;
}
.file-name {
.#{$class-prefix}file-name {
border-width: 0 1px 1px;
}
.file-icon {
.#{$class-prefix}file-icon {
height: 1.5em;
width: 1.5em;
@@ -139,29 +139,29 @@ $file-colors: $form-colors !default;
}
&.is-small {
.file-icon .fa {
.#{$class-prefix}file-icon .fa {
font-size: 14px;
}
}
&.is-medium {
.file-icon .fa {
.#{$class-prefix}file-icon .fa {
font-size: 28px;
}
}
&.is-large {
.file-icon .fa {
.#{$class-prefix}file-icon .fa {
font-size: 35px;
}
}
&.has-name {
.file-cta {
.#{$class-prefix}file-cta {
border-radius: $file-radius $file-radius 0 0;
}
.file-name {
.#{$class-prefix}file-name {
border-radius: 0 0 $file-radius $file-radius;
border-width: 0 1px 1px;
}
@@ -173,11 +173,11 @@ $file-colors: $form-colors !default;
}
&.is-fullwidth {
.file-label {
.#{$class-prefix}file-label {
width: 100%;
}
.file-name {
.#{$class-prefix}file-name {
flex-grow: 1;
max-width: none;
}
@@ -186,11 +186,11 @@ $file-colors: $form-colors !default;
&.is-right {
justify-content: flex-end;
.file-cta {
.#{$class-prefix}file-cta {
border-radius: 0 $file-radius $file-radius 0;
}
.file-name {
.#{$class-prefix}file-name {
border-radius: $file-radius 0 0 $file-radius;
border-width: 1px 0 1px 1px;
order: -1;
@@ -198,7 +198,7 @@ $file-colors: $form-colors !default;
}
}
.file-label {
.#{$class-prefix}file-label {
align-items: stretch;
display: flex;
cursor: pointer;
@@ -207,29 +207,29 @@ $file-colors: $form-colors !default;
position: relative;
&:hover {
.file-cta {
.#{$class-prefix}file-cta {
background-color: bulmaDarken($file-cta-background-color, 2.5%);
color: $file-cta-hover-color;
}
.file-name {
.#{$class-prefix}file-name {
border-color: bulmaDarken($file-name-border-color, 2.5%);
}
}
&:active {
.file-cta {
.#{$class-prefix}file-cta {
background-color: bulmaDarken($file-cta-background-color, 5%);
color: $file-cta-active-color;
}
.file-name {
.#{$class-prefix}file-name {
border-color: bulmaDarken($file-name-border-color, 5%);
}
}
}
.file-input {
.#{$class-prefix}file-input {
height: 100%;
left: 0;
opacity: 0;
@@ -239,8 +239,8 @@ $file-colors: $form-colors !default;
width: 100%;
}
.file-cta,
.file-name {
.#{$class-prefix}file-cta,
.#{$class-prefix}file-name {
@extend %control;
border-color: $file-border-color;
@@ -251,12 +251,12 @@ $file-colors: $form-colors !default;
white-space: nowrap;
}
.file-cta {
.#{$class-prefix}file-cta {
background-color: $file-cta-background-color;
color: $file-cta-color;
}
.file-name {
.#{$class-prefix}file-name {
border-color: $file-name-border-color;
border-style: $file-name-border-style;
border-width: $file-name-border-width;
@@ -267,7 +267,7 @@ $file-colors: $form-colors !default;
text-overflow: ellipsis;
}
.file-icon {
.#{$class-prefix}file-icon {
align-items: center;
display: flex;
height: 1em;