mirror of
https://github.com/grafana/grafana.git
synced 2025-01-06 14:13:11 -06:00
103 lines
2.2 KiB
SCSS
103 lines
2.2 KiB
SCSS
//
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
// Base styles
|
|
// --------------------------------------------------
|
|
|
|
// Core
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
margin-right: 10px;
|
|
font-size: $font-size-base;
|
|
line-height: $line-height-base;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
border: none;
|
|
|
|
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 0 1px 1px rgba(255,255,255,.75));
|
|
@include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
|
|
|
// Hover/focus state
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Focus state for keyboard and accessibility
|
|
&:focus {
|
|
@include tab-focus();
|
|
}
|
|
|
|
// Active state
|
|
&.active,
|
|
&:active {
|
|
background-image: none;
|
|
}
|
|
|
|
// Disabled state
|
|
&.disabled,
|
|
&[disabled] {
|
|
cursor: default;
|
|
background-image: none;
|
|
@include opacity(65);
|
|
}
|
|
}
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
// Large
|
|
.btn-large {
|
|
padding: 6px 20px;
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 2px 10px;
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
.btn-mini {
|
|
padding: 2px 6px;
|
|
margin-right: 0;
|
|
margin-right: 0;
|
|
font-size: $font-size-xs;
|
|
}
|
|
|
|
// Set the backgrounds
|
|
// -------------------------
|
|
.btn-primary {
|
|
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
|
|
}
|
|
// Warning appears are orange
|
|
.btn-warning {
|
|
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
|
|
}
|
|
// Danger and error appear as red
|
|
.btn-danger {
|
|
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
|
|
}
|
|
// Success appears as green
|
|
.btn-success {
|
|
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
|
|
}
|
|
// Info appears as a neutral blue
|
|
.btn-info {
|
|
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
|
|
}
|
|
// Inverse appears as dark gray
|
|
.btn-inverse {
|
|
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
|
|
box-shadow: none;
|
|
border: 1px solid $tight-form-func-highlight-bg;
|
|
}
|
|
|
|
.btn-text {
|
|
color: $btnText;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|