styles/sass/forms.scss
@import '~mixins.scss';
// Forms.scss
// Base styles for various input types, form layouts, and states
// -------------------------------------------------------------
// TODO: This needs to be moved into the ui-framework
// This allows the DatePicker component to be used in modals
.p-datepicker {
z-index: 1060 !important;
}
$input-width-mini: 4.4rem;
$input-number-width-mini: 6rem;
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin: 0;
}
input[disabled],
textarea[disabled],
button[disabled],
[disabled],
[data-disabled] {
cursor: not-allowed;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
&.separated {
border:1px solid var(--sd-colour-line--light);
border-width: 1px 0;
padding-block-end: 10px;
}
}
// Groups of fields with labels on top (legends)
legend {
display: block;
padding: 0 6px 0 0;
margin-block-end: 10px;
font-size: 12px;
line-height: 31px;
color: $sd-text-light;
border: 0;
text-transform: uppercase;
font-weight: 500;
background-color: transparent;
// Small legend
&.small {
margin-block-end: 10px;
}
//small text
small {
font-size: $baseLineHeight * .75;
color: $grayLight;
}
}
// Set font for forms
// label,
// input,
// button,
// select,
// textarea {
// #font > .shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
// }
input,
button,
select,
textarea {
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
label {
display: block;
margin-block-end: 5px;
}
// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
min-height: $baseLineHeight;
padding: 4px;
margin-block-end: 9px;
font-size: $baseFontSize;
line-height: $baseLineHeight;
border: 1px solid $inputBorder;
@include border-radius(2px);
}
.uneditable-textarea {
width: auto;
height: auto;
}
// Inputs within a label
label input,
label textarea,
label select {
display: block;
}
// Mini reset for unique input types
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
padding: 0;
margin: 2px 0;
display: inline-block;
line-height: normal;
cursor: pointer;
@include border-radius(0);
border: 0 \9; /* IE9 and down */
}
input[type="image"] {
border: 0;
}
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
color: var(--color-text);
&::placeholder {
color: var(--color-text-lighter);
font-style: italic;
}
}
// Reset the file input to browser defaults
input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
border: initial;
background-color: $inputBackground;
background-color: initial;
@include box-shadow(none);
}
// Help out input buttons
input[type="button"],
input[type="reset"],
input[type="submit"] {
width: auto;
height: auto;
}
// Set the height of select and file controls to match text inputs
select {
height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
line-height: 28px;
}
input[type="file"] {
height: 28px;
padding-block-start: 4px;
font-size: 13px;
}
// Reset line-height for IE
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
background-color: $inputBackground;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Remove shadow from image inputs
input[type="image"] {
@include box-shadow(none);
}
// Make textarea height behave
textarea {
height: auto;
}
// Hidden inputs
input[type="hidden"] {
display: none;
}
// legend
.legend {
padding: 0;
color: $grayLight;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
padding: 0 0 10px 0;
}
// CHECKBOXES & RADIOS
// -------------------
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
padding-inline-start: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: inline-start;
margin-inline-start: -18px;
}
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-block-start: 5px; // has to be padding because margin collaspes
}
// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-block-start: 5px;
margin-block-end: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-inline-start: 10px; // space out consecutive inline controls
}
// Custom radio button
.sd-radio {
position: relative;
padding-inline-start: 3px;
input[type="radio"] {
visibility: hidden;
+ .check {
display: inline-block;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 11px;
height: 11px;
@include border-radius(50%);
border: 2px solid $inputBorder;
vertical-align: middle;
margin-inline-start: 0px;
}
&:checked {
+ .check {
border: 2px solid $sd-blue;
&:before {
content: '';
position: absolute;
width: 7px;
height: 7px;
margin: 2px 0 0 2px;
background-color: $sd-blue;
@include border-radius(50%);
@include box-sizing(border-box);
}
}
}
}
&:hover {
input[type="radio"] {
+ .check {
border: 2px solid $grayLight;
}
&:checked {
+ .check {
border: 2px solid $sd-blue;
}
}
}
}
}
// FOCUS STATE
// -----------
// input,
// textarea {
// //@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
// $transition: border linear .2s, box-shadow linear .2s;
// @include transition($transition);
// }
// input:focus,
// textarea:focus {
// border-color: rgba(82,168,236,.8);
// $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
// @include box-shadow($shadow);
// outline: 0;
// outline: thin dotted \9; /* IE6-9 */
// }
// input[type="file"]:focus,
// input[type="radio"]:focus,
// input[type="checkbox"]:focus,
// select:focus {
// @include box-shadow(none); // override for file inputs
// }
// INPUT SIZES
// -----------
input,textarea,select {
width: 100%;
}
// General classes for quick sizes
.input-mini { width: 50px !important; }
.input-small { width: 90px !important; }
.input-medium { width: 150px !important; }
.input-large { width: 210px !important; }
.input-xlarge { width: 270px !important; }
.input-xxlarge { width: 530px !important; }
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
}
// FORM FIELD FEEDBACK STATES
// --------------------------
// HTML5 invalid states
// Shares styles with the .control-group.error above
// input:focus:required:invalid,
// textarea:focus:required:invalid,
// select:focus:required:invalid,
// .field .error {
// color: #b94a48;
// border-color: #ee5f5b;
// &:focus {
// border-color: darken(#ee5f5b, 10%);
// @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
// }
// }
.sd-required {
font-size: 11px;
font-style: italic;
color: var(--sd-editor-colour__txt);
}
.sd-validate {
&:not(.field) label:after {
color: #E51C23 ;
content: '*';
vertical-align: top;
font-size: 12px;
padding-inline-start: 3px;
}
.sd-required {
font-size: 11px;
font-style: italic;
padding-inline-start: 5px;
color: $grayDark;
}
.sd-invalid-text {
display: none;
font-size: 11px;
font-style: italic;
padding-inline-start: 5px;
color: $red;
}
&.sd-invalid {
label span {
color: red;
}
input, textarea, .text-editor, .line-input,
input:focus, textarea:focus, .text-editor:focus,
input:hover, textarea:hover, text-editor:hover {
border-block-end: 1px solid red !important;
border-bottom-color: red !important;
@include box-shadow(none !important);
}
&.field label {
background-color: red;
span {
border-block-end: 0 !important;
color: $white;
}
}
.sd-required {
color: $red;
}
.sd-invalid-text {
display: inline-block;
}
}
&.field {
label span {
border-block-end: 0 !important;
}
}
}
// FORM ACTIONS
// ------------
.form-actions {
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
margin-block-start: $baseLineHeight;
margin-block-end: $baseLineHeight;
background-color: $grayLighter;
border-block-start: 1px solid #ddd;
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
display: block;
background-color: $inputBackground;
border-color: #eee;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
@include placeholder($grayLight);
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
margin-block-end: 5px;
input,
select,
.uneditable-input {
*margin-inline-start: 0;
@include border-radius(0 3px 3px 0);
&:focus {
position: relative;
z-index: 2;
}
}
.uneditable-input {
border-left-color: #ccc;
}
.add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: $baseLineHeight;
padding: 4px 5px;
@include text-normal();
line-height: $baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 $white;
vertical-align: middle;
background-color: $grayLighter;
border: 1px solid #ccc;
}
.add-on {
@include border-radius(3px 0 0 3px);
position: relative;
z-index: 5;
}
.active {
background-color: lighten($green, 30);
border-color: $green;
}
}
.input-prepend {
.add-on,
.btn {
margin-inline-end: -1px;
}
}
.input-append {
input,
select
.uneditable-input {
@include border-radius(3px 0 0 3px);
margin-block-end:0;
}
.uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {
padding-block-end: 3px !important;
margin-inline-start: -4px;
@include border-radius(0 3px 3px 0);
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
@include border-radius(0);
}
.add-on:first-child,
.btn:first-child {
margin-inline-end: -1px;
@include border-radius(3px 0 0 3px);
}
.add-on:last-child,
.btn:last-child {
margin-inline-start: -1px;
@include border-radius(0 3px 3px 0);
}
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
margin-block-end: 0;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-inline label {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-inline .input-append,
.form-inline .input-prepend {
margin-block-end: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-inline .radio,
.form-inline .checkbox {
padding-inline-start: 0;
margin-block-end: 0;
vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: inline-start;
margin-inline-start: 0;
margin-inline-end: 3px;
}
select {
padding: 4px;
}
.inline-input {
border: 0;
margin: 0 !important;
vertical-align: baseline;
@include box-shadow(none);
&:focus {
@include box-shadow(none !important);
@include box-shadow(inset none !important);
}
}
.large-text-input {
height: 37px !important;
font-size: 16px !important;
line-height: 25px !important;
}
/* FORM ELEMENTS */
form, ng-form {
fieldset, .fieldset {
@include clearfix();
.field {
margin-block-end: 24px;
width: 100%;
> .inline-label {
margin-inline-start: 20px;
margin-inline-end: -10px;
}
input[type="text"], select, textarea {
color: var(--color-text);
background-color: var(--sd-colour-panel-bg--000);
border-color: var(--sd-colour-line--medium);
border-radius: var(--b-radius--small);
transition: all 0.2s ease-in-out;
min-height: 3.2rem;
&:hover {
border-color: var(--sd-colour-line--strong);
}
&:active, &:focus {
border-color: var(--sd-colour-interactive);
box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
}
}
}
.multiple {
display: flex;
.field, .flex-field {
flex: 1 1 auto;
margin-block-end: 0;
&:not(.btn) {
padding-inline-end: 20px;
}
&:last-child:not(.btn) {
padding-inline-end: 0;
}
&.no-grow {
flex: 0 1 auto;
}
&.no-shrink {
flex: 1 0 auto;
}
}
.btn {
white-space: nowrap;
}
}
+ legend {
margin-block-start: 20px;
}
+ fieldset, + .fieldset {
margin-block-start: 16px;
}
}
&.form-horizontal {
.field {
> label {
width: 150px;
padding-inline-end: 20px;
text-align: end;
float: inline-start;
}
.control {
margin-inline-start: 170px;
}
}
}
}
.field {
margin-block-end: 24px;
width: 100%;
> .inline-label {
margin-inline-start: 20px;
margin-inline-end: -10px;
}
label:not(.sd-checkbox) {
font-size: 11px;
@include text-semibold();
color: $sd-text-lighter;
text-transform: uppercase;
height: 18px;
letter-spacing: 0.08em;
&.inline-label {
color: $sd-text;
text-transform: none;
font-size: 13px;
line-height: 18px;
display: inline-block;
margin-inline-end: 20px;
font-weight: 400;
letter-spacing: normal;
}
}
.sd-checkbox label {
font-size: 1.3rem;
@include text-normal();
color: inherit;
text-transform: none;
height: auto;
letter-spacing: 0;
}
}
form.flat, .form-flat {
.title {
padding: 0 10px 10px 0;
color: $sd-text;
font-size: 16px;
line-height: 22px;
}
.required-info {
display: none;
font-size: 11px;
color: #999;
float: inline-end;
}
fieldset, .fieldset {
margin-block-end: 20px;
position: relative;
legend, .legend {
padding: 0;
color: $sd-text;
font-size: 12px;
text-transform: uppercase;
@include text-semibold();
padding: 10px 0;
margin-block-start: 20px;
}
.item {
width: 100%;
font-size: 13px;
color: $sd-text;
position: relative;
@include box-sizing(border-box);
height: auto;
line-height: 24px;
padding: 10px 2px;
.required-asteriks {
font-size: 12px;
color: #999;
position: absolute;
inset-inline-end: 10px;
inset-block-start: 8px;
}
label {
color: $sd-text;
min-width: 100px;
margin-inline-end: 10px;
display: inline-block;
}
a {
color: $sd-blue-text;
}
.info-value {
display: inline-block;
vertical-align: middle;
.sdselect-btn {
float: inline-start;
color: $sd-text;
width: auto;
.caret {
margin-inline-start: 5px;
}
}
}
&.password {
.info-value {
-webkit-text-security: disc;
.info-editable {
-webkit-text-security: disc;
}
}
.change-btn {
&:hover {
cursor: pointer;
}
}
}
p.info-editable {
margin: 0;
}
.info-editable {
min-width: 275px;
border-color: rgba(0,0,0,0.10) !important;
border-width: 0 0 1px 0 !important;
border-radius: 0px !important;
font-size: 13px;
text-overflow: ellipsis;
margin-inline-start: -6px;
background-color: transparent;
color: #000 !important;
box-sizing: border-box;
margin-block-start: 0;
transition: 0.3s;
&:hover {
border-color: rgba(0,0,0,0.25) !important;
}
&:focus {
@include box-shadow(0 1px 0 0 rgba(94,169,200,1) !important);
border-color: rgba(94,169,200,1) !important;
}
}
input.info-editable {
min-width: auto;
}
textarea.info-editable {
height: 150px;
width: 100%;
max-width: 100%;
line-height: 18px;
margin-inline-start: 0;
}
select.info-editable {
padding: 0 !important;
border: 1px solid #d0d0d0 !important;
&:focus {
text-decoration: none !important;
}
}
}
&.label-light {
label {
color: $grayLight;
text-transform: uppercase;
font-size: 11px;
@include text-semibold();
}
}
}
}
// sdSlider
[sd-slider].ui-slider {
margin-inline-start: 10px;
border-block-start: 2px solid $sd-blue;
.ui-slider-range {
@include transition(width .1s);
margin-block-start: -2px;
border-block-start: 2px solid $inputBorder;
}
.ui-slider-handle {
width: 12px;
height: 12px;
inset-block-start: -7px;
margin-inline-start: -6px;
@include transition(left .1s);
@include border-radius(50%);
background-color: $sd-blue;
}
.ui-slider-thumb {
font-size: 28px;
text-align: center;
color: white;
position: absolute;
margin-inline-start: -27px;
inset-block-start: -50px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50px;
background-color: $sd-blue;
@include scale(0);
@include translate3d(0,70px,0);
@include transition(all .2s ease-in-out);
&:after {
position: absolute;
content: '';
inset-inline-start: 0;
border-radius: 28px;
inset-block-start: 35px;
border-inline-start: 25px solid transparent;
border-inline-end: 25px solid transparent;
border-top-width: 28px;
border-top-style: solid;
border-top-color: $sd-blue;
@include translate3d(0,-8px,0);
@include transition(all .1s ease-in-out);
}
&.ui-slider-thumb-active {
@include scale(.4);
}
}
.ui-slider-label {
font-size: 8px;
color: #c0c0c0;
margin-block-start: -18px;
text-transform: uppercase;
&.left {
float: inline-start;
}
&.right {
float: inline-end;
}
}
.ui-slider-indicator {
font-size: 0;
line-height: 0;
padding-block-start: 7px;
span {
display: inline-block;
height: 5px;
box-sizing: border-box;
border-inline-start: 1px solid #d1d1d1;
&:last-of-type {
border-inline-end: 1px solid #d1d1d1;
}
}
}
}
.flex-header {
display: flex;
height: 20px;
margin-block-end: 8px;
.line {
height: 1px;
margin: auto 4px auto 0;
background: #dcdcdc;
flex: 1;
}
.flex-space {
height: 1px;
margin: auto 4px auto 0;
background: transparent;
flex: 1;
}
.flex-header-toggle {
border: 0;
padding: 0;
margin: 0 5px 0;
display: flex;
background: transparent;
i {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
&.closed {
i {
@include rotate(-90deg);
margin: auto;
}
}
}
.flex-header-name {
padding: 0 8px 0 0;
margin: auto 0;
font-size: 12px;
line-height: 100%;
@include text-semibold();
text-transform: uppercase;
letter-spacing: 0.06em;
.lighten-text {
color: $gray;
@include text-normal();
}
}
.flex-header-label {
box-sizing: border-box;
height: 16px;
margin: auto 0;
padding: 3px 6px 0;
border-radius: 8px;
color: $white;
background:#bbb;
font-size: 10px;
line-height: 100%;
letter-spacing: 0.06em;
@include text-normal();
}
}
input, textarea, .dropdown__toggle {
&.line-input {
width: 100%;
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0 !important;
border: 0 !important;
border-block-end: 1px solid var(--color-input-border) !important;
background-color: var(--color-input-bg);
padding: 0 0.8rem;
height: 32px;
font-size: 1.4rem;
color: var(--color-text);
&:hover {
border-color: var(--color-input-border-hover) !important;
background-color: var(--color-input-bg--hover) !important;
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive) !important;
border-color: var(--sd-colour-interactive) !important;
background-color: var(--sd-colour-interactive--alpha-20) !important;
}
}
}
textarea {
&.line-input {
padding-block-start: 6px;
}
}
.dropdown__toggle {
&.line-input {
position: relative;
padding: 0 1.6rem 0 0.8rem !important;
line-height: 24px;
text-align: start;
display: flex;
align-items: center;
.dropdown__caret {
margin-inline-start: auto;
margin-block-start: 0;
}
}
}
.sd-terms--boxed {
.dropdown {
width: 100%;
.dropdown__menu {
width: 100%;
}
}
}
//------------- boxed inputs
@mixin boxedInputBase () {
width: 100%;
border: 0;
border-block-end: 1px solid var(--color-input-border) !important;
background-color: var(--color-input-bg);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
padding: 0 0.8rem;
min-height: 3.2rem;
border-radius: 2px 2px 0 0;
font-size: $baseFontSize;
&:hover {
border-color: var(--color-input-border-hover) !important;
background-color: var(--color-input-bg--hover) !important;
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive) !important;
background-color: var(--sd-colour-interactive--alpha-20) !important;
}
}
input, textarea, .dropdown__toggle, [sd-meta-place] {
&.boxed-input {
@include boxedInputBase();
}
}
textarea {
&.boxed-input {
padding-block-start: 6px;
}
}
.boxed-input[sd-meta-terms] {
min-height: 3.2rem;
border-radius: 2px 2px 0 0;
background-color: var(--color-input-bg);
padding: 4px 4px 0 4px;
}
.boxed-input[sd-meta-place] {
min-height: 3.2rem;
padding: 4px 4px 0 4px;
}
.boxed-input {
.dropdown__toggle {
&.line-input {
width: 100%;
border: 0;
border-block-end: 1px solid var(--color-input-border);
background-color: var(--color-input-bg);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
padding: 0 1.6rem 0 0.8rem !important;
min-height: 3.2rem;
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0 !important;
font-size: 1.4rem;
color: var(--color-text);
&:hover {
border-color: var(--color-input-border-hover);
background-color: var(--color-input-bg--hover);
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
}
}
.dropdown__caret {
inset-inline-end: 6px !important;
}
}
.dropdown__menu {
margin-block-start: 1px !important;
width: 100%;
}
.dropdown.open {
.dropdown__toggle {
&.line-input {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
}
}
}
}
.dropdown__toggle {
&.boxed-input {
position: relative;
padding: 0 15px 0 0 !important;
line-height: 24px;
text-align: start;
}
}
// end boxed inputs
// ----------------
.line-select {
position: relative;
select {
position: relative;
z-index: 2;
padding: 0 15px 0 0 !important;
line-height: 24px;
text-align: start;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border-radius: 0 !important;
border: 0 !important;
border-block-end: 1px solid rgba(0,0,0,0.15)!important;
background-color: transparent;
padding: 0;
height:24px;
&:hover {
border-color: rgba(0,0,0,0.3) !important;
background-color: transparent !important;
}
&:focus {
box-shadow: 0 1px 0 0 $sd-blue !important;
border-color: $sd-blue !important;
background-color: transparent !important;
}
}
&::after {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 4px;
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-block-start: -2px;
border-inline-start: 4px solid transparent;
border-inline-end: 4px solid transparent;
border-block-start: 4px solid #000;
opacity: 0.3;
filter: alpha(opacity=30);
content: "";
z-index: 0;
}
&:hover {
&::after {
opacity: 0.6;
filter: alpha(opacity=60);
}
}
}
input {
&.line-input--inline-mini {
text-align: center;
width: $input-width-mini;
}
&[type="number"] {
&.line-input--inline-mini {
width: $input-number-width-mini;
padding-inline-end: 4px;
}
}
}
.sd-line-input {
input.sd-line-input__input.sd-line-input__input--mini {
text-align: center;
width: $input-width-mini;
}
input[type="number"].sd-line-input__input.sd-line-input__input--mini {
width: $input-number-width-mini;
padding-inline-end: 4px;
}
textarea.sd-line-input__input {
resize: none;
}
}
.sd-line-input {
select.sd-line-input__select.sd-line-input__select--mini {
text-align: center;
width: $input-width-mini;
}
}
.helper-text {
display: inline-block;
color: var(--color-text-light);
}
.helper-text--after-icon {
padding-inline-start: 0.5rem;
vertical-align: top;
font-weight: 300;
}
.helper-text--padded {
padding: 0 10px;
}
.label--inline {
text-transform: none;
color: var(--color-text);
display: inline-block;
font-size: 13px;
font-weight: 400;
margin-block-end: 0;
vertical-align: top;
}
.input-group {
padding-block-start: 6px;
}
// line input for contenteditable div
.contenteditable-input {
min-height: 23px;
padding: 3px 0;
background-color: transparent;
border: none;
border-block-end: 1px solid rgba(0,0,0,0.15);
line-height: 16px;
&:hover {
border-color: rgba(0,0,0,0.3);
background-color: transparent;
}
&:focus {
box-shadow: none;
border-color: var(--sd-colour-interactive);
background-color: transparent;
}
&--side-padding {
padding: 3px 6px;
}
}
// Flex fieldset type
.fieldset-flex {
.field {
display: flex;
}
label {
min-width: 100px;
flex: 0 1 auto
}
.controls {
flex: 1 1 auto
}
}
.label-asterisk {
&:after {
content: ' *';
}
}
.char-count {
display: inline-block;
margin-inline-start: 5px;
&.error {
color: $red;
}
}
// TEMP - should go into the UI Framework
.list-row {
padding: 1rem 0;
}
.list-row--dotted {
border-block-end: 1px dotted var(--sd-colour-line--strong);
&:first-child {
border-block-start: 1px dotted var(--sd-colour-line--strong);
}
}
.list-row--flex {
display: flex;
flex-direction: row;
align-items: center;
}
.list-row__item {
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
}
.list-row__item--block {
display: block;
}
.list-row__item--grow {
flex-grow: 1;
}
.list-row--small {
padding: 0 0 1rem 0;
}
.text-label {
display: inline-block;
color: var(--color-text-light);
margin: 0;
}
.column {
padding: 2rem 0 1rem;
clear: both;
}
.column--mb24 {
margin-block-end: 2.4rem;
}
.basic-input {
@include basic-input;
}
.form-group-horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
> * {
flex-grow: 1;
}
> * + * {
margin-inline-start: 1.2rem!important; // line_input has margin-inline-start: 0
}
}
.sd-line-input__select-custom {
display: flex;
height: 32px;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: var(--color-input-bg);
border: none;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
border-block-end: 1px solid var(--color-input-border);
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
padding: 0 0.8rem;
&:hover {
border-color: var(--color-input-border-hover);
background-color: var(--color-input-bg--hover);
}
&:focus-within {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
}
}
.sd-line-input__custom-clear {
position: absolute;
inset-block-start: 22px;
inset-inline-end: 22px;
z-index: 2;
opacity: 0.4 !important;
transition: opacity 0.2s ease;
background: transparent;
&:hover {
opacity: 0.75 !important;
background: transparent !important;
}
}
[class^="gform-input--"] {
border: 1px solid var(--sd-colour-line--light);
border-radius: 3px;
padding-inline-end: 5px;
padding-inline-start: 5px;
transition: all 0.2s ease;
color: var(--color-text);
background-color: var(--sd-colour-bg__searchbar);
&:hover {
border: 1px solid var(--sd-colour-line--strong);
}
&:focus {
border: 1px solid var(--sd-colour-interactive--alpha-70);
box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
}
&[disabled] {
border-color: var(--sd-colour-line--x-light);
background-color: var(--sd-colour-bg__searchbar);
}
}