github.com/manicqin/nomad@v0.9.5/ui/app/styles/core/buttons.scss (about) 1 $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); 2 3 .button { 4 font-weight: $weight-bold; 5 box-shadow: $button-box-shadow-standard; 6 border: 1px solid transparent; 7 text-decoration: none; 8 9 &:hover, 10 &.is-hovered { 11 text-decoration: none; 12 } 13 14 &:active, 15 &.is-active, 16 &:focus, 17 &.is-focused { 18 box-shadow: $button-box-shadow-standard; 19 text-decoration: none; 20 } 21 22 &.is-inverted.is-outlined { 23 box-shadow: none; 24 background: transparent; 25 } 26 27 &.is-inline { 28 vertical-align: middle; 29 } 30 31 &.is-compact { 32 padding: 0.25em 0.75em; 33 margin: -0.25em 0; 34 35 &.pull-right { 36 margin-right: -1em; 37 } 38 } 39 40 &.is-borderless { 41 border: 0; 42 box-shadow: none; 43 } 44 45 @each $name, $pair in $colors { 46 $color: nth($pair, 1); 47 $color-invert: nth($pair, 2); 48 49 &.is-#{$name} { 50 border-color: darken($color, 10%); 51 52 &:hover, 53 &.is-hovered { 54 background-color: lighten($color, 5%); 55 border-color: darken($color, 10%); 56 } 57 58 &:active, 59 &.is-active { 60 background-color: darken($color, 5%); 61 border-color: darken($color, 10%); 62 box-shadow: $button-box-shadow-standard; 63 } 64 65 &:focus, 66 &.is-focused { 67 border-color: darken($color, 10%); 68 box-shadow: $button-box-shadow-standard; 69 } 70 71 &.is-outlined { 72 border-color: $grey-lighter; 73 74 &.is-important { 75 border-color: $color; 76 } 77 78 &:hover, 79 &.is-hovered, 80 &:focus, 81 &.is-focused { 82 background-color: transparent; 83 border-color: darken($color, 10%); 84 color: $color; 85 } 86 87 &:active, 88 &.is-active { 89 background-color: transparent; 90 border-color: darken($color, 10%); 91 color: darken($color, 10%); 92 } 93 } 94 95 &.is-inverted.is-outlined { 96 border-color: rgba($color-invert, 0.5); 97 color: rgba($color-invert, 0.9); 98 99 &:hover, 100 &.is-hovered, 101 &:focus, 102 &.is-focused { 103 background-color: transparent; 104 border-color: $color-invert; 105 color: $color-invert; 106 } 107 108 &:active, 109 &.is-active { 110 background-color: rgba($color-invert, 0.1); 111 border-color: $color-invert; 112 color: $color-invert; 113 box-shadow: none; 114 } 115 } 116 } 117 } 118 119 // When an icon in a button should be treated like text, 120 // override the default Bulma behavior 121 .icon.is-text { 122 &:first-child:not(:last-child) { 123 margin-left: 0; 124 margin-right: 0; 125 } 126 &:last-child:not(:first-child) { 127 margin-left: 0; 128 margin-right: 0; 129 } 130 &:first-child:last-child { 131 margin-left: 0; 132 margin-right: 0; 133 } 134 } 135 }