mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Migrate _button SCSS styles to emotion globals (#92135)
migrate button styles to emotion globals
This commit is contained in:
Ashley Harrison
GitHub
parent
f26258984a
commit
4d82139a33
@ -2,6 +2,37 @@ import { css } from '@emotion/react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
function buttonBackgroundMixin(
|
||||
startColor: string,
|
||||
endColor: string,
|
||||
textColor = '#fff',
|
||||
textShadow = '0px 1px 0 rgba(0, 0, 0, 0.1)'
|
||||
) {
|
||||
return {
|
||||
backgroundColor: startColor,
|
||||
backgroundImage: `linear-gradient(to bottom, ${startColor}, ${endColor})`,
|
||||
backgroundRepeat: 'repeat-x',
|
||||
color: textColor,
|
||||
textShadow: textShadow,
|
||||
borderColor: startColor,
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
'&:hover, &:focus, &:active, &.active, &.disabled, &[disabled]': {
|
||||
color: textColor,
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: startColor,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function buttonSizeMixin(paddingY: string, paddingX: string, fontSize: string, borderRadius: string) {
|
||||
return {
|
||||
padding: `${paddingY} ${paddingX}`,
|
||||
fontSize: fontSize,
|
||||
borderRadius: borderRadius,
|
||||
};
|
||||
}
|
||||
|
||||
export function getUtilityClassStyles(theme: GrafanaTheme2) {
|
||||
return css({
|
||||
'.highlight-word': {
|
||||
@ -38,5 +69,73 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
|
||||
justifyContent: 'center',
|
||||
justifyItems: 'center',
|
||||
},
|
||||
'.btn': {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
lineHeight: theme.typography.body.lineHeight,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
height: `${theme.spacing.gridSize * theme.components.height.md}px`,
|
||||
...buttonSizeMixin(
|
||||
theme.spacing(0),
|
||||
theme.spacing(2),
|
||||
`${theme.typography.fontSize}px`,
|
||||
theme.shape.radius.default
|
||||
),
|
||||
|
||||
'&, &:active, &.active': {
|
||||
'&:focus, &.focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
'&:focus, &:hover': {
|
||||
textDecoration: 'none',
|
||||
},
|
||||
'&.focus': {
|
||||
textDecoration: 'none',
|
||||
},
|
||||
'&:active, &.active': {
|
||||
backgroundImage: 'none',
|
||||
outline: 0,
|
||||
},
|
||||
'&.disabled, &[disabled], &:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
opacity: 0.65,
|
||||
boxShadow: 'none',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
'.btn-small': {
|
||||
...buttonSizeMixin(theme.spacing(0.5), theme.spacing(1), theme.typography.size.sm, theme.shape.radius.default),
|
||||
height: `${theme.spacing.gridSize * theme.components.height.sm}px`,
|
||||
},
|
||||
// Deprecated, only used by old plugins
|
||||
'.btn-mini': {
|
||||
...buttonSizeMixin(theme.spacing(0.5), theme.spacing(1), theme.typography.size.sm, theme.shape.radius.default),
|
||||
height: `${theme.spacing.gridSize * theme.components.height.sm}px`,
|
||||
},
|
||||
'.btn-success, .btn-primary': {
|
||||
...buttonBackgroundMixin(theme.colors.primary.main, theme.colors.primary.shade),
|
||||
},
|
||||
'.btn-danger': {
|
||||
...buttonBackgroundMixin(theme.colors.error.main, theme.colors.error.shade),
|
||||
},
|
||||
'.btn-secondary': {
|
||||
...buttonBackgroundMixin(theme.colors.secondary.main, theme.colors.secondary.shade, theme.colors.text.primary),
|
||||
},
|
||||
'.btn-inverse': {
|
||||
...buttonBackgroundMixin(
|
||||
theme.isDark ? theme.v1.palette.dark6 : theme.v1.palette.gray5,
|
||||
theme.isDark ? theme.v1.palette.dark5 : theme.v1.palette.gray4,
|
||||
theme.colors.text.primary
|
||||
),
|
||||
'&': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
@import 'utils/widths';
|
||||
|
||||
// COMPONENTS
|
||||
@import 'components/buttons';
|
||||
@import 'components/dropdown';
|
||||
|
||||
// ANGULAR
|
||||
|
||||
@ -1,415 +0,0 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0, 0, 0, 0.25)) {
|
||||
background-color: color.mix($primaryColor, $secondaryColor, 60%);
|
||||
background-image: linear-gradient(to bottom, $primaryColor, $secondaryColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
color: $text-color;
|
||||
text-shadow: $textShadow;
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
@if $enable-hover-media-query {
|
||||
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
|
||||
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
@include hover {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
@include gradientBar($startColor, $endColor, $text-color, $textShadow);
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
color: $text-color;
|
||||
background-image: none;
|
||||
background-color: $startColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
//box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
|
||||
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color) {
|
||||
color: $white;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid $white;
|
||||
|
||||
@include hover {
|
||||
color: $white;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $white;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $white;
|
||||
background-color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $white;
|
||||
background-color: color.adjust($color, $lightness: -17%);
|
||||
border-color: color.adjust($color, $lightness: -25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: color.adjust($color, $lightness: 20%);
|
||||
}
|
||||
@include hover {
|
||||
border-color: color.adjust($color, $lightness: 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
font-size: $font-size-base;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: $height-md + px;
|
||||
|
||||
@include button-size($btn-padding-y, $space-md, $font-size-base, $border-radius-sm);
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--radius-left-0 {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&--radius-right-0 {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
@include button-size($btn-padding-y-lg, $space-lg, $font-size-lg, $border-radius-sm);
|
||||
font-weight: normal;
|
||||
height: $height-lg + px;
|
||||
|
||||
.gicon {
|
||||
//font-size: 31px;
|
||||
margin-right: $space-sm;
|
||||
filter: brightness(100);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
|
||||
height: $height-sm + px;
|
||||
}
|
||||
|
||||
// Deprecated, only used by old plugins
|
||||
.btn-mini {
|
||||
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
|
||||
height: #{height-sm}px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: $btn-link-color;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
// -------------------------
|
||||
.btn-success,
|
||||
.btn-primary {
|
||||
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
|
||||
}
|
||||
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
|
||||
}
|
||||
|
||||
// Info appears as a neutral blue
|
||||
.btn-secondary {
|
||||
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl, $text-color);
|
||||
// Inverse appears as dark gray
|
||||
}
|
||||
.btn-inverse {
|
||||
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
|
||||
//background: $card-background;
|
||||
/* stylelint-disable-next-line */
|
||||
& {
|
||||
box-shadow: $card-shadow;
|
||||
}
|
||||
//border: 1px solid $tight-form-func-highlight-bg;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
@include button-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
@include button-outline-variant($btn-secondary-bg-hl);
|
||||
}
|
||||
.btn-outline-inverse {
|
||||
@include button-outline-variant($btn-inverse-bg);
|
||||
}
|
||||
.btn-outline-danger {
|
||||
@include button-outline-variant($btn-danger-bg);
|
||||
}
|
||||
|
||||
.btn-outline-disabled {
|
||||
@include button-outline-variant($gray-1);
|
||||
/* stylelint-disable-next-line */
|
||||
& {
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:focus {
|
||||
color: $gray-1;
|
||||
background-color: transparent;
|
||||
border-color: $gray-1;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra padding
|
||||
.btn-p-x-2 {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// No horizontal padding
|
||||
.btn-p-x-0 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// External services
|
||||
// Usage:
|
||||
// <div class="btn btn-service btn-service--facebook">Button text</div>
|
||||
|
||||
$btn-service-icon-width: 35px;
|
||||
.btn-service {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@each $service, $data in $external-services {
|
||||
$serviceBgColor: map.get($data, bgColor);
|
||||
$serviceBorderColor: map.get($data, borderColor);
|
||||
|
||||
.btn-service--#{$service} {
|
||||
background-color: $serviceBgColor;
|
||||
border: 1px solid $serviceBorderColor;
|
||||
|
||||
.btn-service-icon {
|
||||
font-size: 24px; // Override
|
||||
border-right: 1px solid $serviceBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-service-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
padding-left: $space-sm;
|
||||
padding-right: $space-sm;
|
||||
width: $btn-service-icon-width;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-service--grafanacom {
|
||||
.btn-service-icon {
|
||||
background-image: url(../img/grafana_mask_icon_white.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-service--azuread {
|
||||
.btn-service-icon {
|
||||
background-image: url(../img/microsoft_auth_icon.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-service--okta {
|
||||
.btn-service-icon {
|
||||
background-image: url(../img/okta_logo_white.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
//Toggle button
|
||||
|
||||
.toggle-btn {
|
||||
background: $input-label-bg;
|
||||
color: $text-color-weak;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 2px 0 0 2px;
|
||||
margin: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: color.adjust($input-label-bg, $lightness: 5%);
|
||||
color: $link-color;
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Button animations
|
||||
|
||||
.btn-loading span {
|
||||
animation-name: blink;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.btn-loading span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.btn-loading span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
font-size: 14;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
font-size: 18;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
font-size: 14;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user