mirror of
https://github.com/grafana/grafana.git
synced 2025-07-29 23:32:30 +08:00
Chore: Migrate gf-form classes to emotion globals (#91632)
* migrate gf-form classes to emotion globals * should be sm due to the different way the breakpoints work
This commit is contained in:
Ashley Harrison
@ -7574,6 +7574,34 @@ exports[`no gf-form usage`] = {
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/themes/GlobalStyles/forms.ts:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
|
||||
@ -27,5 +27,345 @@ export function getFormElementStyles(theme: GrafanaTheme2) {
|
||||
{
|
||||
width: 'auto', // Override of generic input selector
|
||||
},
|
||||
'.gf-form': {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
marginBottom: theme.spacing(0.5),
|
||||
|
||||
'&--offset-1': {
|
||||
marginLeft: theme.spacing(2),
|
||||
},
|
||||
|
||||
'&--grow': {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
'&--flex-end': {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
|
||||
'&--align-center': {
|
||||
alignContent: 'center',
|
||||
},
|
||||
|
||||
'&--alt': {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
|
||||
'.gf-form-label': {
|
||||
padding: '4px 0',
|
||||
},
|
||||
},
|
||||
},
|
||||
'.gf-form--has-input-icon': {
|
||||
position: 'relative',
|
||||
marginRight: theme.spacing(0.5),
|
||||
|
||||
'.gf-form-input-icon': {
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
fontSize: theme.typography.size.lg,
|
||||
left: '10px',
|
||||
color: theme.colors.text.disabled,
|
||||
},
|
||||
|
||||
'> input': {
|
||||
paddingLeft: '35px',
|
||||
|
||||
'&:focus + .gf-form-input-icon': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
},
|
||||
|
||||
'.Select--multi .Select-multi-value-wrapper, .Select-placeholder': {
|
||||
paddingLeft: '30px',
|
||||
},
|
||||
},
|
||||
|
||||
'.gf-form-disabled': {
|
||||
color: theme.colors.text.secondary,
|
||||
|
||||
'.gf-form-select-wrapper::after': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
|
||||
'a, .gf-form-input': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
},
|
||||
|
||||
'.gf-form-group': {
|
||||
marginBottom: theme.spacing(5),
|
||||
},
|
||||
'.gf-form-inline': {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignContent: 'flex-start',
|
||||
|
||||
'&--nowrap': {
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
|
||||
'&--xs-view-flex-column': {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'nowrap',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
|
||||
'.select-container': {
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
|
||||
'.gf-form-spacing': {
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
},
|
||||
|
||||
'.gf-form-button-row': {
|
||||
paddingTop: theme.spacing(3),
|
||||
'a, button': {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
'.gf-form-label': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
flexShrink: 0,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
fontSize: theme.typography.size.sm,
|
||||
backgroundColor: theme.colors.background.secondary,
|
||||
height: '32px',
|
||||
lineHeight: '32px',
|
||||
marginRight: theme.spacing(0.5),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
justifyContent: 'space-between',
|
||||
border: 'none',
|
||||
|
||||
'&--grow': {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
'&--transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
textAlign: 'right',
|
||||
paddingLeft: 0,
|
||||
},
|
||||
|
||||
'&--variable': {
|
||||
color: theme.colors.primary.text,
|
||||
background: theme.components.panel.background,
|
||||
border: `1px solid ${theme.components.panel.borderColor}`,
|
||||
},
|
||||
|
||||
'&--btn': {
|
||||
border: 'none',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
'&:hover': {
|
||||
background: theme.colors.background.secondary,
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
},
|
||||
|
||||
'&:disabled': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
},
|
||||
'.gf-form-label + .gf-form-label': {
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
'.gf-form-pre': {
|
||||
display: 'block !important',
|
||||
flexGrow: 1,
|
||||
margin: 0,
|
||||
marginRight: theme.spacing(0.5),
|
||||
border: `1px solid transparent`,
|
||||
borderLeft: 'none',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
},
|
||||
'.gf-form-textarea': {
|
||||
maxWidth: '650px',
|
||||
},
|
||||
'.gf-form-input': {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '32px',
|
||||
padding: theme.spacing(0, 1),
|
||||
fontSize: theme.typography.size.md,
|
||||
lineHeight: '18px',
|
||||
color: theme.components.input.text,
|
||||
backgroundColor: theme.components.input.background,
|
||||
backgroundImage: 'none',
|
||||
backgroundClip: 'padding-box',
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
marginRight: theme.spacing(0.5),
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
// text areas should be scrollable
|
||||
'&textarea': {
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'pre-wrap',
|
||||
padding: `6px ${theme.spacing(1)}`,
|
||||
minHeight: '32px',
|
||||
height: 'auto',
|
||||
},
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
'&::-ms-expand': {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
'&:focus': {
|
||||
borderColor: theme.colors.primary.border,
|
||||
outline: 'none',
|
||||
},
|
||||
|
||||
// Placeholder
|
||||
'&::placeholder': {
|
||||
color: theme.colors.text.disabled,
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&:disabled, &[readonly]': {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
'&.gf-size-auto': {
|
||||
width: 'auto',
|
||||
},
|
||||
|
||||
'&--dropdown': {
|
||||
paddingRight: theme.spacing(3),
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '36%',
|
||||
right: '11px',
|
||||
fontSize: '11px',
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.colors.text.primary,
|
||||
font: `normal normal normal ${theme.typography.size.sm}/1 FontAwesome`,
|
||||
content: '"\f0d7"',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&--has-help-icon': {
|
||||
paddingRight: theme.spacing(4),
|
||||
},
|
||||
},
|
||||
'.gf-form-select-wrapper': {
|
||||
position: 'relative',
|
||||
backgroundColor: theme.components.input.background,
|
||||
marginRight: theme.spacing(0.5),
|
||||
|
||||
'.gf-form-select-icon': {
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
top: '50%',
|
||||
marginTop: '-7px',
|
||||
|
||||
'+ .gf-form-input': {
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
paddingLeft: theme.spacing(4),
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
option: {
|
||||
// Firefox
|
||||
color: theme.v1.palette.black,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'.gf-form-input': {
|
||||
marginRight: 0,
|
||||
lineHeight: '32px',
|
||||
},
|
||||
|
||||
'select.gf-form-input': {
|
||||
textIndent: '0.01px',
|
||||
textOverflow: "''",
|
||||
paddingRight: theme.spacing(4),
|
||||
appearance: 'none',
|
||||
|
||||
'&:-moz-focusring': {
|
||||
outline: 'none',
|
||||
color: 'transparent',
|
||||
textShadow: `0 0 0 ${theme.colors.text.primary}`,
|
||||
},
|
||||
|
||||
'&.ng-empty': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '36%',
|
||||
right: '11px',
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.colors.text.primary,
|
||||
font: `normal normal normal ${theme.typography.size.sm}/1 FontAwesome`,
|
||||
content: '"\f0d7"',
|
||||
pointerEvents: 'none',
|
||||
fontSize: '11px',
|
||||
},
|
||||
|
||||
'&--has-help-icon': {
|
||||
'&::after': {
|
||||
right: theme.spacing(4),
|
||||
},
|
||||
},
|
||||
},
|
||||
'.gf-form--v-stretch': {
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
|
||||
'.gf-form-btn': {
|
||||
padding: theme.spacing(0, 1),
|
||||
marginRight: theme.spacing(0.5),
|
||||
lineHeight: '18px',
|
||||
fontSize: theme.typography.size.sm,
|
||||
flexShrink: 0,
|
||||
flexGrow: 0,
|
||||
},
|
||||
'.gf-form-help-icon': {
|
||||
flexGrow: 0,
|
||||
color: theme.colors.text.secondary,
|
||||
|
||||
'&:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
},
|
||||
'.cta-form': {
|
||||
position: 'relative',
|
||||
padding: theme.spacing(3),
|
||||
backgroundColor: theme.colors.background.secondary,
|
||||
marginBottom: theme.spacing(3),
|
||||
borderTop: `3px solid ${theme.colors.success.main}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
@use 'sass:map';
|
||||
@use 'sass:color';
|
||||
@use 'sass:list';
|
||||
|
||||
// Gradients
|
||||
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
||||
@ -2250,3 +2251,51 @@ div.flot-text {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-dropdown-typeahead {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: $space-sm;
|
||||
background-color: transparent;
|
||||
color: $input-color;
|
||||
font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
|
||||
content: '\f0d7';
|
||||
pointer-events: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-help-icon {
|
||||
flex-grow: 0;
|
||||
color: $text-color-weak;
|
||||
|
||||
&--bold {
|
||||
color: $text-color-emphasis;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&--right-absolute {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&--right-normal {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&--header {
|
||||
margin-bottom: $space-xxs;
|
||||
}
|
||||
|
||||
&--small-padding {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
|
||||
// COMPONENTS
|
||||
@import 'components/buttons';
|
||||
@import 'components/gf-form';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/dashboard_grid';
|
||||
|
||||
|
||||
@ -1,484 +0,0 @@
|
||||
@use 'sass:list';
|
||||
$input-border: 1px solid $input-border-color;
|
||||
|
||||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
border-color: $input-border-focus;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
margin-bottom: $space-xs;
|
||||
|
||||
&--offset-1 {
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
&--grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&--flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&--align-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
&--alt {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.gf-form-label {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form--has-input-icon {
|
||||
position: relative;
|
||||
margin-right: $space-xs;
|
||||
|
||||
.gf-form-input-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
font-size: $font-size-lg;
|
||||
left: 10px;
|
||||
color: $input-color-placeholder;
|
||||
}
|
||||
|
||||
> input {
|
||||
padding-left: 35px;
|
||||
|
||||
&:focus + .gf-form-input-icon {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.Select--multi .Select-multi-value-wrapper,
|
||||
.Select-placeholder {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-disabled {
|
||||
color: $text-color-weak;
|
||||
|
||||
.gf-form-select-wrapper::after {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
a,
|
||||
.gf-form-input {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-group {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
.gf-form-inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
&--nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&--xs-view-flex-column {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
@include media-breakpoint-down(xs) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.select-container {
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.gf-form-spacing {
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-button-row {
|
||||
padding-top: $spacer * 1.5;
|
||||
a,
|
||||
button {
|
||||
margin-right: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $input-padding;
|
||||
flex-shrink: 0;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: $font-size-sm;
|
||||
background-color: $input-label-bg;
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
margin-right: $space-xs;
|
||||
border-radius: $input-border-radius;
|
||||
justify-content: space-between;
|
||||
border: none;
|
||||
|
||||
&--grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $critical;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
&--variable {
|
||||
color: $variable;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
}
|
||||
|
||||
&--dashlink {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
}
|
||||
|
||||
&--justify-left {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
&--btn {
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
background: $list-item-hover-bg;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-label + .gf-form-label {
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.gf-form-pre {
|
||||
display: block !important;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
margin-right: $space-xs;
|
||||
border: $border-width solid transparent;
|
||||
border-left: none;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
|
||||
.gf-form-textarea {
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
.gf-form-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
padding: $input-padding;
|
||||
font-size: $font-size-md;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
margin-right: $space-xs;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// text areas should be scrollable
|
||||
@at-root textarea#{&} {
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
padding: 6px $space-sm;
|
||||
min-height: $input-height;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-color-placeholder;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-bg-disabled;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
&.gf-size-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&--dropdown {
|
||||
padding-right: $space-lg;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: 11px;
|
||||
font-size: 11px;
|
||||
background-color: transparent;
|
||||
color: $text-color;
|
||||
font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
|
||||
content: '\f0d7';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&--plaintext {
|
||||
white-space: unset;
|
||||
}
|
||||
|
||||
&--has-help-icon {
|
||||
padding-right: $space-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-hint {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gf-form-hint-text {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.gf-form-select-wrapper {
|
||||
position: relative;
|
||||
background-color: $input-bg;
|
||||
margin-right: $space-xs;
|
||||
|
||||
.gf-form-select-icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: $input-padding;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
|
||||
+ .gf-form-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-left: $space-xl;
|
||||
background-color: transparent;
|
||||
|
||||
option {
|
||||
// Firefox
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-input {
|
||||
margin-right: 0;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
select.gf-form-input {
|
||||
text-indent: 0.01px;
|
||||
text-overflow: '';
|
||||
padding-right: $space-xl;
|
||||
appearance: none;
|
||||
|
||||
&:-moz-focusring {
|
||||
outline: none;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $text-color;
|
||||
}
|
||||
|
||||
&.ng-empty {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: 11px;
|
||||
background-color: transparent;
|
||||
color: $text-color;
|
||||
font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
|
||||
content: '\f0d7';
|
||||
pointer-events: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&--has-help-icon {
|
||||
&::after {
|
||||
right: $space-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form--v-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.gf-form-btn {
|
||||
padding: $input-padding;
|
||||
margin-right: $space-xs;
|
||||
line-height: $input-line-height;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.natural-language-input {
|
||||
&input[type='number'] {
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
margin: -6px -5px 0 5px;
|
||||
padding: $space-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-dropdown-typeahead {
|
||||
//margin-right: $space-xs; ?
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: $space-sm;
|
||||
background-color: transparent;
|
||||
color: $input-color;
|
||||
font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
|
||||
content: '\f0d7';
|
||||
pointer-events: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-help-icon {
|
||||
flex-grow: 0;
|
||||
color: $text-color-weak;
|
||||
|
||||
&--bold {
|
||||
color: $text-color-emphasis;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&--right-absolute {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&--right-normal {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&--header {
|
||||
margin-bottom: $space-xxs;
|
||||
}
|
||||
|
||||
&--small-padding {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
select.gf-form-input ~ .gf-form-help-icon {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.gf-form-icon--right-absolute {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
top: 10px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.cta-form {
|
||||
position: relative;
|
||||
padding: $space-lg;
|
||||
background-color: $empty-list-cta-bg;
|
||||
margin-bottom: $space-lg;
|
||||
border-top: 3px solid $green-base;
|
||||
}
|
||||
|
||||
.cta-form__close {
|
||||
background: transparent;
|
||||
padding: 4px 8px 4px 9px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
font-size: $font-size-md;
|
||||
|
||||
&:hover {
|
||||
color: $text-color-strong;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-form__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cta-form__bar-header {
|
||||
font-size: $font-size-h4;
|
||||
padding-right: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user