577 lines
12 KiB
SCSS
577 lines
12 KiB
SCSS
@import 'data_uris';
|
|
|
|
$error-color: red !default;
|
|
$button-background: #37a7da !default;
|
|
$button-color: text-color($button-background) !default;
|
|
$button-border: 1px solid transparent !default;
|
|
$button-hover-background: $button-background !default;
|
|
$button-hover-color: $button-color !default;
|
|
$button-border-radius: $border-radius !default;
|
|
|
|
$widget-background: white !default;
|
|
$widget-color: $font-color !default;
|
|
$widget-border: 1px solid #AAA !default;
|
|
$widget-border-radius: 0 !default;
|
|
$widget-focus-background: $widget-background !default;
|
|
$widget-focus-border: $widget-border !default;
|
|
$widget-focus-color: $widget-color !default;
|
|
$widget-focus-outline: none !default;
|
|
$widget-focus-outline-offset: 0 !default;
|
|
$widget-focus-box-shadow: none !default;
|
|
|
|
$button-focus-outline: $widget-focus-outline !default;
|
|
$button-focus-outline-offset: $widget-focus-outline-offset !default;
|
|
|
|
$widget-custom-radio-checkbox: false !default;
|
|
$widget-custom-radio-checkbox-color: $button-background !default;
|
|
$widget-unique-checkbox-position: bottom !default; // also possible: left
|
|
|
|
// $form-style: global style of form elements; possible values are:
|
|
// classic: nothing special.
|
|
// light: light bottom border, no other border.
|
|
$form-style: classic !default;
|
|
|
|
// buttons orders and alignment
|
|
// work only for wcs forms
|
|
// order :
|
|
// 3 buttons : submit (form validation or next page), cancel, previous;
|
|
// put button in the desired order (ex: previous, submit, cancel);
|
|
// optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
|
|
$buttons-order: null !default;
|
|
$buttons-alignment: null !default; // any flexbox justify-content value;
|
|
|
|
input, select, button, textarea {
|
|
font-size: 100%;
|
|
font-family: $font-family;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
input, select {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
form div.widget {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
div.error {
|
|
color: black;
|
|
font-weight: bold;
|
|
background: transparent url(/static/dialog-warning.png) top left no-repeat;
|
|
padding-left: 22px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
|
|
span.required {
|
|
margin-left: 0.3em;
|
|
position: relative;
|
|
top: -0.1em;
|
|
}
|
|
|
|
div.widget div.title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.buttons {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
div.buttons div {
|
|
display: inline-block;
|
|
|
|
& input[name="submit"] {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
%button {
|
|
background: $button-background;
|
|
color: $button-color;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
border: $button-border;
|
|
border-radius: $button-border-radius;
|
|
transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
|
|
margin-right: 1.5em;
|
|
vertical-align: middle;
|
|
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 5px #777;
|
|
background: $button-hover-background;
|
|
color: $button-hover-color;
|
|
}
|
|
|
|
&:disabled {
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
cursor: not-allowed;
|
|
background: grayscale($button-background);
|
|
color: grayscale($button-color);
|
|
border-color: grayscale(extract-color($button-border));
|
|
}
|
|
|
|
&:focus {
|
|
@if $button-focus-outline == none {
|
|
outline: 1px dotted $button-background;
|
|
} @else {
|
|
outline: $button-focus-outline;
|
|
outline-offset: $button-focus-outline-offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
%cancel-button {
|
|
@extend %button;
|
|
}
|
|
|
|
.fargo-pick-popup button,
|
|
button.ui-button,
|
|
a#a2-continue,
|
|
div.gru-content button,
|
|
input[type=submit],
|
|
div.buttons input {
|
|
@extend %button;
|
|
}
|
|
|
|
div.gru-content button.cancel-button,
|
|
div.buttons .cancel-button button {
|
|
@extend %cancel-button;
|
|
}
|
|
|
|
div.gru-content form.disabled-during-submit {
|
|
// this class is added to forms in w.c.s. when a button is clicked.
|
|
div.buttons {
|
|
cursor: wait;
|
|
button {
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
|
|
background: $widget-background;
|
|
color: $widget-color;
|
|
border: $widget-border;
|
|
border-radius: $widget-border-radius;
|
|
box-sizing: border-box;
|
|
margin: 0.2em 0px;
|
|
padding: 0.4em 0.7em 0.4em 0.7em;
|
|
max-width: 100%;
|
|
transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
|
|
&:focus:not([readonly]) {
|
|
background-color: $widget-focus-background;
|
|
border: $widget-focus-border;
|
|
color: $widget-focus-color;
|
|
box-shadow: $widget-focus-box-shadow;
|
|
}
|
|
&:focus {
|
|
outline: $widget-focus-outline;
|
|
outline-offset: $widget-focus-outline-offset;
|
|
}
|
|
}
|
|
|
|
select option {
|
|
background: none;
|
|
color: black;
|
|
}
|
|
|
|
input[readonly], select[readonly], textarea[readonly] {
|
|
border-width: 0 0 1px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
select[readonly] {
|
|
background-image: none;
|
|
}
|
|
|
|
select {
|
|
@include vendor-prefix('appearance', 'none');
|
|
padding-right: 4em;
|
|
background-image: url($data_uri_arrow-down);
|
|
background-position: right 1.3rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem auto;
|
|
&::-ms-expand {
|
|
// remove the arrow of select element in IE
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
margin-right: 0.7em;
|
|
margin-bottom: 0.7em;
|
|
&:focus {
|
|
@if $widget-focus-outline == none {
|
|
outline: $widget-border;
|
|
outline-style: dotted;
|
|
@if extract-color($widget-border) == transparent {
|
|
outline-color: #444;
|
|
}
|
|
} @else {
|
|
outline: $widget-focus-outline;
|
|
outline-offset: $widget-focus-outline-offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.content label {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
div.widget div.content ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
span.helptext,
|
|
div.hint {
|
|
display: block;
|
|
font-size: 80%;
|
|
}
|
|
|
|
form p label {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.a2-block form input,
|
|
div.a2-block form select {
|
|
width: 100%;
|
|
}
|
|
|
|
div.a2-block form input[type=checkbox],
|
|
div.a2-block form input[type=radio] {
|
|
width: auto;
|
|
}
|
|
|
|
div.a2-block form button,
|
|
div.a2-block form input[type=submit] {
|
|
width: auto;
|
|
min-width: 12em;
|
|
@media screen and (max-width: $very-small-limit) {
|
|
min-width: 8em;
|
|
}
|
|
}
|
|
|
|
div.a2-block ul#id_edit-profile-title {
|
|
margin-left: 1em;
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 2em;
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
form ul.errorlist {
|
|
padding: 0;
|
|
margin: 2em 0 0 0;
|
|
list-style: none;
|
|
|
|
& li::before {
|
|
content: "\f06a";
|
|
font-family: FontAwesome;
|
|
padding-right: 0.7em;
|
|
}
|
|
}
|
|
|
|
body .ui-front {
|
|
z-index: 1000;
|
|
}
|
|
|
|
// select2
|
|
div.select2-container,
|
|
span.select2-container {
|
|
min-width: 20em;
|
|
margin: 0.2em 0px;
|
|
padding-bottom: 1px;
|
|
a.select2-choice {
|
|
padding: 0.1em 0.7em;
|
|
}
|
|
span.select2-selection--single,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
box-sizing: content-box;
|
|
padding: 0.2em 0 0.2em 0;
|
|
background: $widget-background;
|
|
color: $widget-color;
|
|
border-radius: $widget-border-radius;
|
|
border: $widget-border;
|
|
}
|
|
&.select2-container--focus,
|
|
&.select2-container--open {
|
|
span.select2-selection--single,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
background: $widget-focus-background;
|
|
border: $widget-focus-border;
|
|
}
|
|
}
|
|
&.select2-container--focus span.select2-selection--single {
|
|
outline: $widget-focus-outline;
|
|
outline-offset: $widget-focus-outline-offset;
|
|
}
|
|
.select2-choices,
|
|
.select2-choice {
|
|
box-shadow: none;
|
|
}
|
|
.select2-search--dropdown input,
|
|
.select2-search--dropdown input:active,
|
|
.select2-search--dropdown input:focus {
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.select2-selection--single .select2-selection__rendered {
|
|
padding-right: 50px;
|
|
}
|
|
.select2-selection--single .select2-selection__arrow {
|
|
background-image: url($data_uri_arrow-down);
|
|
background-position: right 1.3rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem auto;
|
|
width: 50px;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
b {
|
|
display: none;
|
|
}
|
|
}
|
|
.select2-selection--single .select2-selection__clear {
|
|
}
|
|
.select2-dropdown {
|
|
border: $widget-border;
|
|
&.select2-dropdown--below {
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.select2-container.select2-drop-above .select2-choice {
|
|
background: white;
|
|
border-radius: 0;
|
|
}
|
|
|
|
div.select2-drop {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
div.select2-search {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@if $widget-custom-radio-checkbox == true {
|
|
.CheckboxWidget,
|
|
.CheckboxesWidget,
|
|
.RadiobuttonsWidget {
|
|
label {
|
|
position: relative;
|
|
}
|
|
input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
+ span {
|
|
padding-left: 1.2rem;
|
|
&::before {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
margin: auto;
|
|
height: 0.66rem;
|
|
width: 0.66rem;
|
|
background: transparent;
|
|
top: 0.33rem;
|
|
left: 0;
|
|
border: 1px solid $widget-custom-radio-checkbox-color;
|
|
}
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
margin: auto;
|
|
height: calc(0.66rem - 2px);
|
|
width: calc(0.66rem - 2px);
|
|
background: transparent;
|
|
transition: background 0.2s linear;
|
|
top: calc(0.33rem + 2px);
|
|
left: 2px;
|
|
}
|
|
}
|
|
&:checked + span::after {
|
|
background: $widget-custom-radio-checkbox-color;
|
|
}
|
|
&[disabled]:checked + span::after {
|
|
background: grayscale($widget-custom-radio-checkbox-color);
|
|
}
|
|
|
|
&:focus + span {
|
|
&::before {
|
|
box-shadow: $widget-focus-box-shadow;
|
|
}
|
|
@if $widget-focus-outline == none {
|
|
outline: $widget-border;
|
|
@if extract-color($widget-border) == transparent {
|
|
outline-color: #444;
|
|
}
|
|
outline-style: dotted;
|
|
} @else {
|
|
outline: $widget-focus-outline;
|
|
outline-offset: $widget-focus-outline-offset;
|
|
}
|
|
}
|
|
&:active + span {
|
|
&::before {
|
|
top: calc(0.33rem - 4px);
|
|
left: -4px;
|
|
border: 5px solid $widget-custom-radio-checkbox-color;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.CheckboxWidget {
|
|
div.content {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.RadiobuttonsWidget {
|
|
input + span {
|
|
&::before {
|
|
border-radius: 16px;
|
|
}
|
|
&::after {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $widget-unique-checkbox-position == left {
|
|
div.CheckboxWidget {
|
|
position: relative;
|
|
div.title {
|
|
margin-left: 1.5rem;
|
|
}
|
|
div.content {
|
|
@if $widget-custom-radio-checkbox == true {
|
|
position: static;
|
|
}
|
|
label {
|
|
margin-right: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.hint, .error {
|
|
margin-left: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $form-style == light {
|
|
form p label,
|
|
label {
|
|
font-weight: normal;
|
|
color: lighten($font-color, 20%);
|
|
}
|
|
input, input[type="text"], input[type="email"], input[type="password"],
|
|
input[type="url"], input[type="tel"], input[type="number"],
|
|
input[type="search"], input[type="file"], input[type="date"],
|
|
input[type="datetime-local"], input[type="month"], input[type="time"],
|
|
input[type="week"], textarea, select {
|
|
border-width: 0 0 1px 0;
|
|
&:focus:not([readonly]) {
|
|
border-width: 0 0 1px 0;
|
|
border-bottom-color: $button-background;
|
|
}
|
|
}
|
|
div.widget-with-error {
|
|
input, input[type="text"], input[type="email"],
|
|
input[type="password"], input[type="url"], input[type="tel"],
|
|
input[type="number"], input[type="search"], input[type="file"],
|
|
input[type="date"], input[type="datetime-local"],
|
|
input[type="month"], input[type="time"], input[type="week"],
|
|
textarea, select {
|
|
border-bottom-color: $error-color;
|
|
}
|
|
}
|
|
div.error {
|
|
color: $error-color;
|
|
font-weight: normal;
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
background: none;
|
|
}
|
|
form div.widget {
|
|
// increase bottom margin as the single border pushes away the
|
|
// widget from the label and we have to compensate.
|
|
margin-bottom: 1.8em;
|
|
}
|
|
div.select2-container,
|
|
span.select2-container {
|
|
span.select2-selection--single,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
&.select2-container--focus,
|
|
&.select2-container--open {
|
|
span.select2-selection--single,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
background: $widget-focus-background;
|
|
border: $widget-focus-border;
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Buttons order & alignment configuration
|
|
@if $buttons-order or $buttons-alignment {
|
|
div.buttons {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-ms-flex-pack: $buttons-alignment;
|
|
justify-content: $buttons-alignment;
|
|
|
|
@each $btn, $grow in $buttons-order {
|
|
$i: index($buttons-order, $btn);
|
|
@if $grow {
|
|
$i: index($buttons-order, $btn $grow);
|
|
}
|
|
|
|
.#{$btn}-button {
|
|
-ms-flex-order: $i;
|
|
order: $i;
|
|
@if ($grow == 'grow') {
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
// always hidden, exclude to flex-child
|
|
.savedraft-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|