mirror of https://github.com/grafana/grafana
Chore: Migrate `_forms` styles to emotion globals (#92690)
migrate _forms styles to emotion globalspull/92761/head
Ashley Harrison
9 months ago
committed by
GitHub
parent
1f01a679f6
commit
a59474cf13
@ -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