@import "var";
|
|
|
|
// colored buttons
|
|
.btn {
|
|
&:hover {
|
|
}
|
|
}
|
|
.btn-small {
|
|
font-size: 0.9*@baseFontSize;
|
|
padding: .4em .9em;
|
|
}
|
|
.btn-medium {
|
|
font-size: @baseFontSize;
|
|
padding: .4em .9em;
|
|
}
|
|
.btn-large {
|
|
font-size: 1.2*@baseFontSize;
|
|
}
|
|
|
|
.btn-green {
|
|
background-color: @btnGreenColor;
|
|
border: 1px solid @btnGreenColor;
|
|
&:hover {
|
|
background-color: @btnHoverGreenColor;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
.btn-blue {
|
|
background-color: @btnBlueColor;
|
|
border: 1px solid @btnBlueColor;
|
|
&:hover {
|
|
background-color: @btnHoverBlueColor;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
.btn-red {
|
|
color: #FFF;
|
|
background-color: @btnRedColor;
|
|
border: 1px solid @btnRedColor;
|
|
&:hover {
|
|
background-color: @btnHoverRedColor;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
.btn-orange {
|
|
background-color: @btnOrangeColor;
|
|
border: 1px solid @btnOrangeColor;
|
|
&:hover {
|
|
background-color: @btnHoverOrangeColor;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
.btn-black {
|
|
background-color: @btnBlackColor;
|
|
border: 1px solid @btnBlackColor;
|
|
&:hover {
|
|
background-color: @btnHoverBlackColor;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
.btn-gray {
|
|
background-color: @btnGrayColor;
|
|
color: @baseFontColor;
|
|
border: 1px solid @btnGrayBorderColor;
|
|
&:hover {
|
|
background-color: @btnGrayHoverColor;
|
|
color: @baseFontColor;
|
|
}
|
|
}
|
|
|
|
// status buttons
|
|
|
|
.btn-active {
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
|
|
}
|
|
.btn-header {
|
|
margin-top: -1px;
|
|
color: white;
|
|
padding: 0 10px;
|
|
}
|
|
.btn-link {
|
|
overflow: visible;
|
|
color: white;
|
|
padding: .6em 1.2em;
|
|
}
|
|
.btn-radius {
|
|
border-radius: .25em;
|
|
}
|
|
.btn-left-radius {
|
|
border-top-left-radius: .25em;
|
|
border-bottom-left-radius: .25em;
|
|
}
|
|
.btn-right-radius {
|
|
border-top-right-radius: .25em;
|
|
border-bottom-right-radius: .25em;
|
|
}
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: content-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-disabled {
|
|
opacity: .6;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
background-image: none !important;
|
|
border: none;
|
|
&:hover {
|
|
background-image: none !important;
|
|
color: @btnHoverFontColor;
|
|
}
|
|
}
|
|
|
|
// input form elements
|
|
|
|
.ipt {
|
|
&:focus {
|
|
border-color: @iptFocusBorderColor;
|
|
}
|
|
}
|
|
|
|
.ipt-radius {
|
|
border-radius: .25em;
|
|
}
|
|
|
|
.ipt-small {
|
|
font-size: .8*@baseFontSize;
|
|
}
|
|
|
|
.ipt-large {
|
|
font-size: 1.2*@baseFontSize;
|
|
}
|
|
|
|
.ipt-disabled,
|
|
input[disabled] {
|
|
background-color: @iptDisabledColor !important;
|
|
&:focus {
|
|
background-color: @iptDisabledColor !important;
|
|
}
|
|
color: #888;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ipt-readonly,
|
|
input[readonly] {
|
|
&:focus {
|
|
background-color: @iptDisabledColor !important;
|
|
}
|
|
}
|
|
|
|
.ipt-error {
|
|
border-color: @iptErrorBorderColor !important;
|
|
background-color: @iptErrorFocusColor !important;
|
|
}
|
|
|
|
.form {
|
|
label {
|
|
margin-right: 1em;
|
|
}
|
|
.help {
|
|
color: @formHelpFontColor;
|
|
padding-top: .6em;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.form-stack {
|
|
label {
|
|
display: block;
|
|
}
|
|
.field {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.form-align {
|
|
label,
|
|
.form-label {
|
|
display: inline-block;
|
|
width: 120px;
|
|
text-align: right;
|
|
margin-right: 1em;
|
|
}
|
|
.field {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
label.req {
|
|
&:after {
|
|
content: "*";
|
|
color: @labelRedColor;
|
|
}
|
|
}
|