702 lines
15 KiB
SCSS
702 lines
15 KiB
SCSS
@import 'data_uris';
|
|
|
|
$form-accent-color: null !default;
|
|
$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: 1px dotted #333 !default;
|
|
$widget-focus-outline-offset: 0 !default;
|
|
$widget-box-shadow: null !default;
|
|
$widget-padding: 0.625rem 1rem !default;
|
|
$widget-focus-box-shadow: none !default;
|
|
|
|
$button-focus-outline: $widget-focus-outline !default;
|
|
$button-focus-outline-offset: $widget-focus-outline-offset !default;
|
|
$cancel-button-style: "%button" !default; // "%button" || "%inverted-button" || .custom-selector
|
|
|
|
$widget-custom-radio-checkbox: false !default;
|
|
$widget-custom-radio-checkbox-color: $button-background !default;
|
|
$widget-custom-radio-checkbox-border-color: $widget-custom-radio-checkbox-color !default;
|
|
$widget-custom-radio-checkbox-marker-color: $widget-custom-radio-checkbox-color !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;
|
|
|
|
|
|
%custom-radio-checkbox-widget {
|
|
label {
|
|
position: relative;
|
|
}
|
|
input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
+ span {
|
|
padding-left: 1.2rem;
|
|
&::before {
|
|
box-sizing: content-box;
|
|
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-border-color;
|
|
}
|
|
&::after {
|
|
box-sizing: content-box;
|
|
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-marker-color;
|
|
}
|
|
&[disabled]:checked + span::after {
|
|
background: grayscale($widget-custom-radio-checkbox-marker-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-border-color;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
%custom-radio-widget {
|
|
input + span {
|
|
&::before {
|
|
border-radius: 100%;
|
|
}
|
|
&::after {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
form {
|
|
accent-color: $form-accent-color;
|
|
}
|
|
|
|
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;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
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;
|
|
text-align: center;
|
|
color: $button-color;
|
|
padding: $widget-padding;
|
|
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);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 5px #777;
|
|
background: $button-hover-background;
|
|
color: $button-hover-color;
|
|
}
|
|
|
|
&:disabled {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
%inverted-button {
|
|
@extend %button;
|
|
background-color: $button-color;
|
|
color: $button-background;
|
|
@if (extract-color($button-border) == transparent)
|
|
and (lightness($button-color) > 90%) {
|
|
border: 1px solid $button-background;
|
|
} @else {
|
|
border: $button-border;
|
|
}
|
|
&:hover {
|
|
background: $button-hover-color;
|
|
color: $button-hover-background;
|
|
}
|
|
}
|
|
|
|
%cancel-button {
|
|
@extend #{$cancel-button-style};
|
|
}
|
|
|
|
.fargo-pick-popup button,
|
|
button.ui-button,
|
|
a#a2-continue,
|
|
.gru-content button,
|
|
input[type=submit],
|
|
div.buttons input {
|
|
@extend %button;
|
|
}
|
|
|
|
.gru-content button.cancel-button,
|
|
div.buttons .cancel-button button {
|
|
@extend %cancel-button;
|
|
}
|
|
|
|
.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="search"], textarea, select {
|
|
background: $widget-background;
|
|
color: $widget-color;
|
|
border: $widget-border;
|
|
border-radius: $widget-border-radius;
|
|
margin: 0.2em 0px;
|
|
padding: $widget-padding;
|
|
max-width: 100%;
|
|
transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
|
|
box-shadow: $widget-box-shadow;
|
|
&: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-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
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"] {
|
|
padding: 0;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CheckboxesWidget,
|
|
.RadiobuttonsWidget {
|
|
.content label {
|
|
display: block;
|
|
}
|
|
&.widget-inline-radio .content label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
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%;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
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 div#title + div.content {
|
|
margin-left: 0;
|
|
padding-left: 1em;
|
|
span {
|
|
margin-right: 2em;
|
|
}
|
|
}
|
|
|
|
div.a2-block #id_do_not_ask_again + span {
|
|
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,
|
|
span.select2-selection--multiple,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
box-sizing: border-box;
|
|
padding: $widget-padding;
|
|
background: $widget-background;
|
|
color: $widget-color;
|
|
border-radius: $widget-border-radius;
|
|
border: $widget-border;
|
|
height: auto;
|
|
.select2-selection__choice {
|
|
margin: 0 0.5rem 0 0;
|
|
border: none;
|
|
}
|
|
}
|
|
span.select2-selection--multiple {
|
|
min-height: 0;
|
|
.select2-selection__rendered {
|
|
display: block;
|
|
}
|
|
}
|
|
.select2-search--inline .select2-search__field {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
border: none;
|
|
}
|
|
&.select2-container--focus,
|
|
&.select2-container--open {
|
|
span.select2-selection--single,
|
|
span.select2-selection--multiple,
|
|
a.select2-choice,
|
|
a.select2-choice div {
|
|
background: $widget-focus-background;
|
|
border: $widget-focus-border;
|
|
color: $widget-focus-color;
|
|
span {
|
|
color: $widget-focus-color;
|
|
}
|
|
}
|
|
}
|
|
&.select2-container--focus span.select2-selection--single,
|
|
&.select2-container--focus span.select2-selection--multiple {
|
|
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;
|
|
color: #333;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.select2-selection--single .select2-selection__rendered {
|
|
padding-right: 0px;
|
|
min-height: 1.2em;
|
|
line-height: inherit;
|
|
}
|
|
.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 {
|
|
margin-right: 2em;
|
|
}
|
|
.select2-dropdown {
|
|
border: $widget-border;
|
|
&.select2-dropdown--below {
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
}
|
|
.select2-results {
|
|
.loading-results {
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: 0;
|
|
color: black;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
.loading-results:last-child {
|
|
position: static;
|
|
display: block;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.BlockWidget .list-add {
|
|
clear: both;
|
|
}
|
|
|
|
@if $widget-custom-radio-checkbox == true {
|
|
.django-checkbox-input,
|
|
.django-radio-select,
|
|
.CheckboxWidget,
|
|
.CheckboxesWidget,
|
|
.RadiobuttonsWidget {
|
|
@extend %custom-radio-checkbox-widget;
|
|
}
|
|
|
|
.CheckboxWidget {
|
|
div.content {
|
|
position: relative;
|
|
}
|
|
}
|
|
.django-radio-select,
|
|
.RadiobuttonsWidget {
|
|
@extend %custom-radio-widget;
|
|
}
|
|
}
|
|
|
|
@if $widget-unique-checkbox-position == left {
|
|
div.django-checkbox-input,
|
|
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 {
|
|
.quixote:not(#wf-actions) div.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
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 {
|
|
order: $i;
|
|
@if ($grow == 'grow') {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
// always hidden, exclude to flex-child
|
|
.savedraft-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* force alignment for blocks defining grid elements within grids */
|
|
.BlockSubWidget.widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* mark forms optional fields and hide the required ones */
|
|
.widget-optional span.optional {
|
|
display: none;
|
|
}
|
|
|
|
.pk-mark-optional-fields {
|
|
.widget-required {
|
|
span.required {
|
|
@include sr-only();
|
|
}
|
|
}
|
|
.widget-optional:not(.django-checkbox-input) span.optional {
|
|
display: inline;
|
|
font-style: italic;
|
|
}
|
|
}
|