mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2025-07-06 09:30:37 +02:00
68 lines
1.9 KiB
SCSS
68 lines
1.9 KiB
SCSS
$form-input-border-radius: $border-radius;
|
|
$form-input-postfix-search-color: $white;
|
|
$form-input-postfix-search-fill-color: $hilight-color;
|
|
$form-input-postfix-search-fill-color-difference: 5%;
|
|
|
|
/* Override foundation styles */
|
|
$input-border-radius: $form-input-border-radius;
|
|
$input-border-style: none;
|
|
$input-border-width: 0;
|
|
$input-prefix-border-type: none;
|
|
$input-prefix-border-width: 0;
|
|
$form-spacing: 0.5rem;
|
|
|
|
input {
|
|
border-radius: $form-input-border-radius;
|
|
font-family: $font-family;
|
|
}
|
|
|
|
span.postfix {
|
|
border-top-right-radius: $border-radius !important;
|
|
border-bottom-right-radius: $border-radius !important;
|
|
}
|
|
|
|
span.prefix {
|
|
border-top-left-radius: $border-radius !important;
|
|
border-bottom-left-radius: $border-radius !important;
|
|
}
|
|
|
|
.postfix.search {
|
|
color: $form-input-postfix-search-color;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
lighten($form-input-postfix-search-fill-color, 15%) 1px,
|
|
lighten(
|
|
$form-input-postfix-search-fill-color,
|
|
$form-input-postfix-search-fill-color-difference
|
|
)
|
|
1px,
|
|
darken(
|
|
$form-input-postfix-search-fill-color,
|
|
$form-input-postfix-search-fill-color-difference
|
|
)
|
|
);
|
|
}
|
|
|
|
.prefix-and-postfix-radius input {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
// Hide X-button from time inputs
|
|
input[type='date']::-webkit-clear-button,
|
|
input[type='time']::-webkit-clear-button {
|
|
display: none;
|
|
}
|
|
|
|
// Hide up and down buttons from time element
|
|
input[type='time']::-webkit-inner-spin-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Use to set default focus outline for input elements where it has been overridden elsewhere */
|
|
@mixin default-focus-outline {
|
|
/* First apply outline that is used in Edge and Firefox */
|
|
outline: 1px dotted #212121;
|
|
|
|
/* Then override outline for webkit browsers like Chrome, this has no effect on other browsers */
|
|
outline: 5px auto -webkit-focus-ring-color; /* stylelint-disable-line declaration-block-no-duplicate-properties */
|
|
}
|