IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

transparent toggle style and new button group style

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-12-07 17:15:46 +01:00
parent 79933299c7
commit bfbb44af03
13 changed files with 93 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
public/sass/mixins/_mixins.scss
View File

@@ -1,6 +1,6 @@
@mixin clearfix() {
&::after {
content: "";
content: '';
display: table;
clear: both;
}
@@ -19,6 +19,10 @@
outline-offset: -2px;
}
@mixin no-focus() {
outline: none;
}
// Center-align a block level element
// ----------------------------------
@mixin center-block() {
@@ -265,20 +269,10 @@
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
@mixin background($color: $white, $alpha: 1) {
background-color: hsla(
hue($color),
saturation($color),
lightness($color),
$alpha
);
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
@mixin border($color: $white, $alpha: 1) {
border-color: hsla(
hue($color),
saturation($color),
lightness($color),
$alpha
);
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
@include background-clip(padding-box);
}
}
@@ -294,66 +288,37 @@
// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
background-color: $endColor;
background-image: linear-gradient(
to right,
$startColor,
$endColor
); // Standard, IE10
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
background-repeat: repeat-x;
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
background-color: mix($startColor, $endColor, 60%);
background-image: linear-gradient(
to bottom,
$startColor,
$endColor
); // Standard, IE10
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
background-repeat: repeat-x;
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
background-color: $endColor;
background-repeat: repeat-x;
background-image: linear-gradient(
$deg,
$startColor,
$endColor
); // Standard, IE10
background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
}
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-image: linear-gradient(
to right,
$startColor,
$midColor $colorStop,
$endColor
);
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-image: linear-gradient(
$startColor,
$midColor $colorStop,
$endColor
);
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
background-color: $outerColor;
background-image: -webkit-gradient(
radial,
center center,
0,
center center,
460,
from($innerColor),
to($outerColor)
);
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
@@ -380,11 +345,7 @@
@mixin left-brand-border-gradient() {
border: none;
border-image: linear-gradient(
rgba(255, 213, 0, 1) 0%,
rgba(255, 68, 0, 1) 99%,
rgba(255, 68, 0, 1) 100%
);
border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
border-image-slice: 1;
border-style: solid;
border-top: 0;