Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix select colors

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-11 09:59:47 +01:00
parent 13027e4aad
commit 3babdbc850
4 changed files with 110 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/css/bulma-docs.css
View File

@@ -20,18 +20,21 @@
user-select: none;
}
.select:not(.is-multiple)::after, .navbar-link::after {
border: 1px solid transparent;
.select:not(.is-multiple):not(.is-loading)::after, .navbar-link::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.5em;
height: 0.625em;
margin-top: -0.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 0.5em;
width: 0.625em;
}
.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
@@ -3120,11 +3123,9 @@ a.box:active {
height: 2.25em;
}
.select:not(.is-multiple)::after {
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #3273dc;
margin-top: -0.375em;
right: 1.125em;
top: 50%;
z-index: 4;
}
@@ -3213,86 +3214,166 @@ a.box:active {
padding: 0.5em 1em;
}
.select:hover::after {
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: #363636;
}
.select.is-white:not(:hover)::after {
border-color: white;
}
.select.is-white select {
border-color: white;
}
.select.is-white select:hover, .select.is-white select.is-hovered {
border-color: #f2f2f2;
}
.select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}
.select.is-black:not(:hover)::after {
border-color: #0a0a0a;
}
.select.is-black select {
border-color: #0a0a0a;
}
.select.is-black select:hover, .select.is-black select.is-hovered {
border-color: black;
}
.select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active {
box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
}
.select.is-light:not(:hover)::after {
border-color: whitesmoke;
}
.select.is-light select {
border-color: whitesmoke;
}
.select.is-light select:hover, .select.is-light select.is-hovered {
border-color: #e8e8e8;
}
.select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active {
box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
}
.select.is-dark:not(:hover)::after {
border-color: #363636;
}
.select.is-dark select {
border-color: #363636;
}
.select.is-dark select:hover, .select.is-dark select.is-hovered {
border-color: #292929;
}
.select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active {
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
}
.select.is-primary:not(:hover)::after {
border-color: #00d1b2;
}
.select.is-primary select {
border-color: #00d1b2;
}
.select.is-primary select:hover, .select.is-primary select.is-hovered {
border-color: #00b89c;
}
.select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active {
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}
.select.is-link:not(:hover)::after {
border-color: #3273dc;
}
.select.is-link select {
border-color: #3273dc;
}
.select.is-link select:hover, .select.is-link select.is-hovered {
border-color: #2366d1;
}
.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.select.is-info:not(:hover)::after {
border-color: #209cee;
}
.select.is-info select {
border-color: #209cee;
}
.select.is-info select:hover, .select.is-info select.is-hovered {
border-color: #118fe4;
}
.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
}
.select.is-success:not(:hover)::after {
border-color: #23d160;
}
.select.is-success select {
border-color: #23d160;
}
.select.is-success select:hover, .select.is-success select.is-hovered {
border-color: #20bc56;
}
.select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active {
box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
}
.select.is-warning:not(:hover)::after {
border-color: #ffdd57;
}
.select.is-warning select {
border-color: #ffdd57;
}
.select.is-warning select:hover, .select.is-warning select.is-hovered {
border-color: #ffd83d;
}
.select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
}
.select.is-danger:not(:hover)::after {
border-color: #ff3860;
}
.select.is-danger select {
border-color: #ff3860;
}
.select.is-danger select:hover, .select.is-danger select.is-hovered {
border-color: #ff1f4b;
}
.select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
}
@@ -6703,9 +6784,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
transform: translateY(0);
}
.navbar-link::after {
margin-top: -0.375em;
right: 1.125em;
top: 50%;
}
.navbar-menu {
flex-grow: 1;

2
sass/components/navbar.sass
View File

@@ -322,9 +322,7 @@ a.navbar-item,
transform: translateY(0)
.navbar-link
&::after
margin-top: -0.375em
right: 1.125em
top: 50%
.navbar-menu
flex-grow: 1
flex-shrink: 0

25
sass/elements/form.sass
View File

@@ -149,11 +149,10 @@ $help-size: $size-small !default
vertical-align: top
&:not(.is-multiple)
height: 2.25em
&:not(.is-multiple):not(.is-loading)
&::after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
&.is-rounded
select
@@ -178,19 +177,25 @@ $help-size: $size-small !default
option
padding: 0.5em 1em
// States
&:hover
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name} select
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small

9
sass/utilities/mixins.sass
View File

@@ -141,17 +141,20 @@
@extend %unselectable
%arrow
border: 1px solid transparent
border: 3px solid transparent
border-radius: 2px
border-right: 0
border-top: 0
content: " "
display: block
height: 0.5em
height: 0.625em
margin-top: -0.4375em
pointer-events: none
position: absolute
top: 50%
transform: rotate(-45deg)
transform-origin: center
width: 0.5em
width: 0.625em
=arrow($color)
@extend %arrow