mirror of https://github.com/grafana/grafana.git
Chore: Migrate `_forms` styles to emotion globals (#92690)
migrate _forms styles to emotion globals
This commit is contained in:
Ashley Harrison
GitHub
parent
1f01a679f6
commit
a59474cf13
|
|
@ -18,15 +18,75 @@ export function getFormElementStyles(theme: GrafanaTheme2) {
|
|||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
textarea: {
|
||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
||||
'input, textarea': {
|
||||
'&::placeholder': {
|
||||
color: theme.colors.text.disabled,
|
||||
},
|
||||
},
|
||||
|
||||
// not a big fan of number fields
|
||||
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button': {
|
||||
WebkitAppearance: 'none',
|
||||
margin: 0,
|
||||
},
|
||||
'input[type="number"]': {
|
||||
MozAppearance: 'textfield',
|
||||
},
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
'select, input[type="file"]': {
|
||||
height:
|
||||
theme.components.height
|
||||
.md /* In IE7, the height of the select element cannot be changed by height, only font-size */,
|
||||
lineHeight: theme.components.height.md,
|
||||
},
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select: {
|
||||
width: '220px', // default input width + 10px of padding that doesn't get applied
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
backgroundColor: theme.components.input.background, // Chrome on Linux and Mobile Safari need background-color
|
||||
},
|
||||
|
||||
'select[multiple], select[size], textarea': {
|
||||
height: 'auto',
|
||||
},
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
'select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus': {
|
||||
// WebKit
|
||||
outline: '5px auto -webkit-focus-ring-color',
|
||||
outlineOffset: '-2px',
|
||||
},
|
||||
|
||||
// Reset width of input images, buttons, radios, checkboxes
|
||||
"input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']":
|
||||
{
|
||||
width: 'auto', // Override of generic input selector
|
||||
},
|
||||
|
||||
// Disabled and read-only inputs
|
||||
'input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]': {
|
||||
cursor: 'not-allowed',
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
},
|
||||
|
||||
// Explicitly reset the colors here
|
||||
'input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly]':
|
||||
{
|
||||
cursor: 'not-allowed',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
'input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus':
|
||||
{
|
||||
WebkitBoxShadow: `0 0 0px 1000px ${theme.components.input.background} inset !important`,
|
||||
WebkitTextFillColor: theme.components.input.text,
|
||||
boxShadow: `0 0 0px 1000px ${theme.components.input.background} inset`,
|
||||
border: `1px solid ${theme.components.input.background}`,
|
||||
},
|
||||
|
||||
'.gf-form': {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
|
|
@ -367,5 +427,8 @@ export function getFormElementStyles(theme: GrafanaTheme2) {
|
|||
marginBottom: theme.spacing(3),
|
||||
borderTop: `3px solid ${theme.colors.success.main}`,
|
||||
},
|
||||
'.input-small': {
|
||||
width: '90px',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2568,3 +2568,37 @@ button.close {
|
|||
color: $text-muted;
|
||||
min-width: 47px;
|
||||
}
|
||||
|
||||
.input-mini {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.input-medium {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
input[type='checkbox'].cr1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-option label.cr1 {
|
||||
display: inline-block;
|
||||
margin: 5px 0 1px 0;
|
||||
}
|
||||
|
||||
label.cr1 {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
clear: none;
|
||||
text-indent: 2px;
|
||||
margin: 0 0 0px 0;
|
||||
padding: 0 0 0 20px;
|
||||
vertical-align: top;
|
||||
background: url($checkboxImageUrl) left top no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox'].cr1:checked + label {
|
||||
background: url($checkboxImageUrl) 0px -18px no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// BASE
|
||||
@import 'base/reboot';
|
||||
@import 'base/forms';
|
||||
@import 'base/grid';
|
||||
@import 'base/font_awesome';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,252 +0,0 @@
|
|||
@use 'sass:color';
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.text-help,
|
||||
.form-control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
&.radio label,
|
||||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label,
|
||||
.custom-control {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: color.adjust($color, $lightness: 40%);
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Reset height since textareas have rows
|
||||
// Set font for forms
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type='file'] {
|
||||
height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type='file']:focus,
|
||||
input[type='radio']:focus,
|
||||
input[type='checkbox']:focus {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// not a big fan of number fields
|
||||
input[type='number']::-webkit-outer-spin-button,
|
||||
input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
// Placeholder
|
||||
// -------------------------
|
||||
|
||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
||||
input,
|
||||
textarea {
|
||||
&::placeholder {
|
||||
color: $input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini {
|
||||
width: 60px;
|
||||
}
|
||||
.input-small {
|
||||
width: 90px;
|
||||
}
|
||||
.input-medium {
|
||||
width: 150px;
|
||||
}
|
||||
.input-large {
|
||||
width: 210px;
|
||||
}
|
||||
.input-xlarge {
|
||||
width: 270px;
|
||||
}
|
||||
.input-xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $input-bg-disabled;
|
||||
}
|
||||
|
||||
// Explicitly reset the colors here
|
||||
input[type='radio'][disabled],
|
||||
input[type='checkbox'][disabled],
|
||||
input[type='radio'][readonly],
|
||||
input[type='checkbox'][readonly] {
|
||||
cursor: $cursor-disabled;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type='text'].input-fluid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
-moz-box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input[type='checkbox'].cr1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-option label.cr1 {
|
||||
display: inline-block;
|
||||
margin: 5px 0 1px 0;
|
||||
}
|
||||
|
||||
label.cr1 {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
clear: none;
|
||||
text-indent: 2px;
|
||||
margin: 0 0 0px 0;
|
||||
padding: 0 0 0 20px;
|
||||
vertical-align: top;
|
||||
background: url($checkboxImageUrl) left top no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox'].cr1:checked + label {
|
||||
background: url($checkboxImageUrl) 0px -18px no-repeat;
|
||||
}
|
||||
|
||||
.gf-fluid-input {
|
||||
border: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-right: 10px;
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
padding: 5px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 5px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control feedback states
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
padding-right: $space-xl;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right calc($input-height / 4);
|
||||
background-size: calc($input-height / 2) calc($input-height / 2);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.has-success {
|
||||
@include form-control-validation($brand-success);
|
||||
|
||||
.form-control-success {
|
||||
background-image: $form-icon-success;
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include form-control-validation($brand-warning);
|
||||
|
||||
.form-control-warning {
|
||||
background-image: $form-icon-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
@include form-control-validation($brand-danger);
|
||||
|
||||
.form-control-danger {
|
||||
background-image: $form-icon-danger;
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
-webkit-box-shadow: 0 0 0px 1000px $input-bg inset !important;
|
||||
-webkit-text-fill-color: $input-color !important;
|
||||
box-shadow: 0 0 0px 1000px $input-bg inset;
|
||||
border: 1px solid $input-bg;
|
||||
}
|
||||
Loading…
Reference in New Issue