Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | //## Flat UI Color Variations |
| 2 | |||
| 3 | /*** |
||
| 4 | Custom color buttons |
||
| 5 | ***/ |
||
| 6 | |||
| 7 | @each $name, $colors in $component-colors { |
||
| 8 | .bg-#{$name} { |
||
| 9 | background: map-get($colors, base) !important; |
||
| 10 | } |
||
| 11 | |||
| 12 | .bg-#{$name}-opacity { |
||
| 13 | background: rgba(map-get($colors, base), 0.8) !important; |
||
| 14 | } |
||
| 15 | |||
| 16 | .bg-hover-#{$name}:hover { |
||
| 17 | background: map-get($colors, base) !important; |
||
| 18 | } |
||
| 19 | |||
| 20 | .font-#{$name} { |
||
| 21 | color: map-get($colors, base) !important; |
||
| 22 | } |
||
| 23 | |||
| 24 | .bg-font-#{$name} { |
||
| 25 | color: map-get($colors, font) !important; |
||
| 26 | } |
||
| 27 | |||
| 28 | .border-#{$name} { |
||
| 29 | border-color: map-get($colors, base) !important; |
||
| 30 | } |
||
| 31 | |||
| 32 | .border-top-#{$name} { |
||
| 33 | border-top-color: map-get($colors, base) !important; |
||
| 34 | } |
||
| 35 | |||
| 36 | .border-bottom-#{$name} { |
||
| 37 | border-bottom-color: map-get($colors, base) !important; |
||
| 38 | } |
||
| 39 | |||
| 40 | .border-left-#{$name} { |
||
| 41 | border-left-color: map-get($colors, base) !important; |
||
| 42 | } |
||
| 43 | |||
| 44 | .border-right-#{$name} { |
||
| 45 | border-right-color: map-get($colors, base) !important; |
||
| 46 | } |
||
| 47 | |||
| 48 | // pseudo classes |
||
| 49 | .bg-before-#{$name}:before, |
||
| 50 | .bg-after-#{$name}:after { |
||
| 51 | background: map-get($colors, base) !important; |
||
| 52 | } |
||
| 53 | |||
| 54 | .border-before-#{$name}:before, |
||
| 55 | .border-after-#{$name}:after { |
||
| 56 | border-color: map-get($colors, base) !important; |
||
| 57 | } |
||
| 58 | |||
| 59 | .border-top-before-#{$name}:before, |
||
| 60 | .border-top-after-#{$name}:after { |
||
| 61 | border-top-color: map-get($colors, base) !important; |
||
| 62 | } |
||
| 63 | |||
| 64 | .border-bottom-before-#{$name}:before, |
||
| 65 | .border-bottom-after-#{$name}:after { |
||
| 66 | border-bottom-color: map-get($colors, base) !important; |
||
| 67 | } |
||
| 68 | |||
| 69 | .border-left-before-#{$name}:before, |
||
| 70 | .border-left-after-#{$name}:after { |
||
| 71 | border-left-color: map-get($colors, base) !important; |
||
| 72 | } |
||
| 73 | |||
| 74 | .border-right-before-#{$name}:before, |
||
| 75 | .border-right-after-#{$name}:after { |
||
| 76 | border-right-color: map-get($colors, base) !important; |
||
| 77 | } |
||
| 78 | } |
||
| 79 | |||
| 80 | /*** |
||
| 81 | Color library demo |
||
| 82 | ***/ |
||
| 83 | |||
| 84 | .color-demo { |
||
| 85 | border: 1px solid #eee; |
||
| 86 | margin: 0 0 20px 0; |
||
| 87 | cursor: pointer; |
||
| 88 | |||
| 89 | .color-view { |
||
| 90 | padding: 35px 10px; |
||
| 91 | text-align: center; |
||
| 92 | font-size: 18px; |
||
| 93 | } |
||
| 94 | |||
| 95 | .color-info { |
||
| 96 | border-top: 1px solid #eee; |
||
| 97 | padding: 10px 10px; |
||
| 98 | text-align: center; |
||
| 99 | } |
||
| 100 | } |