Cédric Krier
901c4c4206
Override variable in theme does not work because it is imported under html[theme="default"]. issue9689 review326281002
591 lines
12 KiB
Plaintext
591 lines
12 KiB
Plaintext
/* This file is part of Tryton. The COPYRIGHT file at the top level of
|
|
this repository contains the full copyright notices and license terms. */
|
|
/* The MIT License (MIT)
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in
|
|
all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
THE SOFTWARE.
|
|
*/
|
|
|
|
.navbar {
|
|
border: none;
|
|
.box-shadow(0 1px 2px rgba(0,0,0,.3));
|
|
}
|
|
|
|
#btn(@class, @bg) {
|
|
.btn-@{class} {
|
|
|
|
&:focus,
|
|
&:hover,
|
|
&:active:hover {
|
|
background-color: darken(@bg, 6%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: darken(@bg, 12%);
|
|
#gradient > .radial(darken(@bg, 12%) 10%, @bg 11%);
|
|
background-size: 1000% 1000%;
|
|
.box-shadow(2px 2px 4px rgba(0,0,0,.4));
|
|
}
|
|
}
|
|
}
|
|
|
|
#btn(default, @btn-default-bg);
|
|
#btn(primary, @btn-primary-bg);
|
|
#btn(success, @btn-success-bg);
|
|
#btn(info, @btn-info-bg);
|
|
#btn(warning, @btn-warning-bg);
|
|
#btn(danger, @btn-danger-bg);
|
|
#btn(link, #fff);
|
|
|
|
.btn {
|
|
text-transform: uppercase;
|
|
border: none;
|
|
.box-shadow(1px 1px 4px rgba(0,0,0,.4));
|
|
.transition(all 0.4s);
|
|
|
|
&-link {
|
|
border-radius: @btn-border-radius-base;
|
|
.box-shadow(none);
|
|
color: @btn-default-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.box-shadow(none);
|
|
color: @btn-default-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&-default {
|
|
|
|
&.disabled {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
color: rgba(0, 0, 0, 0.4);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-hover {
|
|
> tbody > tr,
|
|
> tbody > tr > th,
|
|
> tbody > tr > td {
|
|
.transition(all 0.2s);
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
border: transparent;
|
|
|
|
&[disabled],
|
|
&[readonly],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
textarea,
|
|
textarea.form-control,
|
|
input.form-control,
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=email],
|
|
input[type=number],
|
|
[type=text].form-control,
|
|
[type=password].form-control,
|
|
[type=email].form-control,
|
|
[type=tel].form-control,
|
|
[contenteditable].form-control {
|
|
padding: 0 5px;
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
.box-shadow(inset 0 -1px 0 #ddd);
|
|
|
|
&:focus {
|
|
.box-shadow(inset 0 -2px 0 @brand-primary);
|
|
}
|
|
|
|
&[disabled],
|
|
&[readonly] {
|
|
.box-shadow(none);
|
|
border-bottom: 2px dotted #ddd;
|
|
}
|
|
|
|
&.input {
|
|
&-sm {
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
&-lg {
|
|
font-size: @font-size-large;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group-lg > .form-control,
|
|
.input-group-lg > .input-group-addon {
|
|
padding: 0 5px;
|
|
}
|
|
.input-group-sm > .form-control,
|
|
.input-group-sm > .input-group-addon {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.input-group-addon {
|
|
background-color: transparent;
|
|
border: transparent;
|
|
border-radius: 0;
|
|
|
|
&.input-sm {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.input-lg {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
select,
|
|
select.form-control {
|
|
border: 0;
|
|
border-radius: 0;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
|
|
background-size: 13px;
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
.box-shadow(inset 0 -1px 0 #ddd);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
|
|
&::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
&.input {
|
|
&-sm {
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
&-lg {
|
|
font-size: @font-size-large;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
.box-shadow(inset 0 -2px 0 @brand-primary);
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
|
|
}
|
|
|
|
&[multiple] {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.radio,
|
|
.radio-inline,
|
|
.checkbox,
|
|
.checkbox-inline {
|
|
label {
|
|
padding-left: 25px;
|
|
input {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
margin-left: -25px;
|
|
}
|
|
}
|
|
|
|
input[type="radio"],
|
|
.radio input[type="radio"],
|
|
.radio-inline input[type="radio"] {
|
|
position: relative;
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
left: 50%;
|
|
margin: auto;
|
|
margin-left: -9px;
|
|
border-radius: 50%;
|
|
.transition(240ms);
|
|
}
|
|
|
|
&.form-control:before,
|
|
&.form-control:after {
|
|
top: 6px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
background-color: @brand-primary;
|
|
.scale(0);
|
|
}
|
|
|
|
&:after {
|
|
position: relative;
|
|
border: 2px solid @gray;
|
|
}
|
|
|
|
&:checked:before {
|
|
.scale(0.5);
|
|
}
|
|
|
|
&:disabled:checked:before {
|
|
background-color: @gray-light;
|
|
}
|
|
|
|
&:checked:after {
|
|
border-color: @brand-primary;
|
|
}
|
|
|
|
&:disabled:after,
|
|
&[readonly]:after,
|
|
&:disabled:checked:after,
|
|
&[readonly]:checked:after {
|
|
border-color: @gray-light;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
.checkbox input[type="checkbox"],
|
|
.checkbox-inline input[type="checkbox"] {
|
|
position: relative;
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus:before {
|
|
border-color: @brand-primary;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: auto;
|
|
border: 2px solid @gray;
|
|
border-radius: 2px;
|
|
.transition(240ms);
|
|
}
|
|
|
|
&.form-control:before {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&:checked:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 50%;
|
|
display: table;
|
|
width: 6px;
|
|
height: 12px;
|
|
margin: auto;
|
|
margin-left: -3px;
|
|
border: 2px solid #fff;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
.rotate(45deg);
|
|
}
|
|
|
|
&.form-control:after {
|
|
top: 6px;
|
|
}
|
|
|
|
&:indeterminate:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
transform: translate(0, -50%);
|
|
width: 14px;
|
|
height: 2px;
|
|
background: #fff;
|
|
}
|
|
|
|
&:checked:before,
|
|
&:indeterminate:before {
|
|
background-color: @brand-primary;
|
|
border-color: @brand-primary;
|
|
}
|
|
|
|
&:disabled:before,
|
|
&[readonly]:before {
|
|
border-color: @gray-light;
|
|
}
|
|
|
|
&:disabled:checked:before,
|
|
&[readonly]:checked:before {
|
|
background-color: @gray-light;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.form-boolean, .dict-boolean, .editabletree-boolean {
|
|
input[type=checkbox] {
|
|
width: default;
|
|
}
|
|
}
|
|
|
|
.has-warning {
|
|
input:not([type=checkbox]),
|
|
.form-control,
|
|
input.form-control[readonly],
|
|
input[type=text][readonly],
|
|
[type=text].form-control[readonly],
|
|
input:not([type=checkbox]):focus,
|
|
.form-control:focus {
|
|
border-bottom: none;
|
|
.box-shadow(inset 0 -2px 0 @brand-warning);
|
|
}
|
|
}
|
|
|
|
.has-error {
|
|
input:not([type=checkbox]),
|
|
.form-control,
|
|
input.form-control[readonly],
|
|
input[type=text][readonly],
|
|
[type=text].form-control[readonly],
|
|
input:not([type=checkbox]):focus,
|
|
.form-control:focus {
|
|
border-bottom: none;
|
|
.box-shadow(inset 0 -2px 0 @brand-danger);
|
|
}
|
|
}
|
|
|
|
.has-success {
|
|
input:not([type=checkbox]),
|
|
.form-control,
|
|
input.form-control[readonly],
|
|
input[type=text][readonly],
|
|
[type=text].form-control[readonly],
|
|
input:not([type=checkbox]):focus,
|
|
.form-control:focus {
|
|
border-bottom: none;
|
|
.box-shadow(inset 0 -2px 0 @brand-success);
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
> li > a,
|
|
> li > a:focus {
|
|
margin-right: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
color: @navbar-default-link-color;
|
|
.box-shadow(inset 0 -1px 0 #ddd);
|
|
.transition(all 0.2s);
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
.box-shadow(inset 0 -2px 0 @brand-primary);
|
|
color: @brand-primary;
|
|
}
|
|
}
|
|
|
|
& > li.active > a,
|
|
& > li.active > a:focus {
|
|
border: none;
|
|
.box-shadow(inset 0 -2px 0 @brand-primary);
|
|
color: @brand-primary;
|
|
|
|
&:hover {
|
|
border: none;
|
|
color: @brand-primary;
|
|
}
|
|
}
|
|
|
|
& > li.disabled > a {
|
|
.box-shadow(inset 0 -1px 0 #ddd);
|
|
}
|
|
|
|
&.nav-justified {
|
|
|
|
& > li > a,
|
|
& > li > a:hover,
|
|
& > li > a:focus,
|
|
& > .active > a,
|
|
& > .active > a:hover,
|
|
& > .active > a:focus {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
margin-top: 0;
|
|
border: none;
|
|
.box-shadow(0 1px 4px rgba(0,0,0,.3));
|
|
}
|
|
|
|
.alert {
|
|
border: none;
|
|
color: #fff;
|
|
|
|
&-success {
|
|
background-color: @brand-success;
|
|
}
|
|
|
|
&-info {
|
|
background-color: @brand-info;
|
|
}
|
|
|
|
&-warning {
|
|
background-color: @brand-warning;
|
|
}
|
|
|
|
&-danger {
|
|
background-color: @brand-danger;
|
|
}
|
|
|
|
a:not(.close):not(.btn),
|
|
.alert-link {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
padding: 4px 6px 4px;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
z-index: 1;
|
|
border-radius: 0;
|
|
|
|
.box-shadow(none);
|
|
|
|
&-bar {
|
|
.box-shadow(none);
|
|
|
|
&:last-child {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
&:last-child {
|
|
&:before {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
background-color: lighten(@progress-bar-bg, 35%);
|
|
}
|
|
}
|
|
|
|
&-success:last-child.progress-bar:before {
|
|
background-color: lighten(@brand-success, 35%);
|
|
}
|
|
|
|
&-info:last-child.progress-bar:before {
|
|
background-color: lighten(@brand-info, 45%);
|
|
}
|
|
&-warning:last-child.progress-bar:before {
|
|
background-color: lighten(@brand-warning, 35%);
|
|
}
|
|
|
|
&-danger:last-child.progress-bar:before {
|
|
background-color: lighten(@brand-danger, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.close {
|
|
font-size: 34px;
|
|
font-weight: 300;
|
|
line-height: inherit;
|
|
opacity: 0.6;
|
|
.transition(all 0.2s);
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.well {
|
|
border-radius: 0;
|
|
.box-shadow(none);
|
|
}
|
|
|
|
.panel {
|
|
border: none;
|
|
border-radius: 2px;
|
|
.box-shadow(0 1px 4px rgba(0,0,0,.3));
|
|
|
|
&-heading {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&-footer {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
border: none;
|
|
.box-shadow(0 1px 4px rgba(0,0,0,.3));
|
|
}
|
|
|
|
.carousel {
|
|
&-caption {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|