File: /home/rtbrisc/public_html/admin/main/webarch/scss/modules/form_elements.scss
label,
input,
button,
select,
textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
input,
button,
select,
textarea {
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.uneditable-input,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-appearance: none !important;
color: #282323;
outline: 0;
height: 16px;
padding: 6px 11px !important;
line-height: 15px;
font-size: 13px;
font-weight: normal;
vertical-align: top;
background-color: $color-white ;
min-height: 37px;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #e5e9ec;
transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
input {
border: 1px solid #cecece;
&.no-boarder {
border: none;
}
&.dark {
background-color: #e5e9ec;
border: none;
}
&.error {
border: 1px solid #f35958;
}
}
textarea {
height: auto;
padding-left: 12px !important;
padding-top: 10px !important;
}
.uneditable-input.focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.m-uneditable-input:focus {
border-color: $input-active-bordrer-color;
background-color: $input-active-background-color;
outline: 0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px;
line-height: normal;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select,
input[type="file"] {
height: 34px !important;
line-height: 30px;
}
select {
width: 220px;
background-color: $color-white;
background-image: none !important;
border: 1px solid #e5e5e5;
outline: none;
min-height: 35px;
&.xsmall {
width: 64px !important;
}
&.small {
width: 134px !important;
}
&.medium {
width: 220px !important;
}
&.large {
width: 334px !important;
}
}
select[multiple],
select[size] {
height: auto !important;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[class*="span"] {
float: none;
height: 34px !important;
margin-left: 0;
}
select[class*="span"],
textarea[class*="span"] {
float: none;
margin-left: 0;
}
.input-lg {
border-radius: 3px !important;
font-size: 18px !important;
height: 45px !important;
line-height: 1.33 !important;
}
.input-sm {
font-size: 13px !important;
min-height: 29px !important;
}
.input-prepend,
.input-append {
border: 0;
display: inline-block;
}
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 $color-white;
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
}
.input-append .add-on > .halflings-icon,
.input-prepend .add-on > i,
.input-prepend .add-on > .fa {
margin-top: 5px;
margin-left: 3px;
}
.input-append .add-on > .halflings-icon
.input-append .add-on > i,
.input-append .add-on > .fa {
margin-top: 5px;
margin-left: 0px;
}
.input-append ,
.input-append :focus {
border-right: 0 !important;
}
.input-append input[class*="span"],
.input-prepend input[class*="span"],
.input-append input,.input-prepend input {
display: inline-block !important;
width: 100%;
float: left;
}
.xsmall {
width: 50px !important;
}
.small {
width: 120px !important;
}
.medium {
width: 206px !important;
}
.large {
width: 320px !important;
}
.huge {
width: 480px !important;
font-size: 24px !important;
height: 36px !important;
line-height: 36px !important;
padding: 22px 8px !important;
}
.radio, .checkbox {
margin-bottom: 0;
margin-top: 0;
padding-left: 0px;
}
.radio {
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
margin-bottom: 6px;
color: #777a80;
&:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 2.5px;
background-color: $color-white ;
border: 1px solid #c2c6cb;
border-radius: 99px;
}
&:after {
font-size: 13px;
content: "";
text-align: center;
display: inline-block;
width: 17px;
height: 17px;
position: absolute;
-o-transform: scale(0);
-ms-transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
border-radius: 99px;
left: 0px;
top: 1px;
background-color: #6f7b8a;
border: 1px solid #6f7b8a;
}
}
input[type=radio] {
display: none;
}
input[type=radio][disabled] {
& + label {
opacity: 0.65;
}
}
&.radio-success {
label {
&:after {
background-color: $color-success;
border: 1px solid $color-success;
}
}
input[type=radio]:checked {
& + label {
&:before {
border: 1px solid $color-success;
}
}
}
}
&.radio-primary {
label {
&:after {
background-color: $color-primary;
border: 1px solid $color-primary;
}
}
input[type=radio]:checked {
& + label {
&:before {
border: 1px solid $color-primary;
}
}
}
}
&.radio-info {
label {
&:after {
background-color: $color-info;
border: 1px solid $color-info;
}
input[type=radio]:checked {
& + :before {
border: 1px solid $color-info;
}
}
}
}
&.radio-warning {
label {
&:after {
background-color: $color-warning;
border: 1px solid $color-warning;
}
}
input[type=radio]:checked {
& + label {
&:before {
border: 1px solid $color-warning;
}
}
}
}
&.radio-danger {
label {
&:after {
background-color: #F35958;
border: 1px solid #F35958;
}
}
input[type=radio]:checked {
& + label {
&:before {
border: 1px solid #F35958;
}
}
}
}
input[type=radio]:checked {
& + label {
color: #4d5056;
&:after {
-o-transform: scale(0.63);
-ms-transform: scale(0.63);
-moz-transform: scale(0.63);
-webkit-transform: scale(0.63);
transform: scale(0.63);
line-height: 18px;
-o-transition: -o-transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-ms-transition: -ms-transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-moz-transition: -moz-transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-webkit-transition: -webkit-transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-o-transition: transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-ms-transition: transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-moz-transition: transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-webkit-transition: transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
transition: transform .1s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330);
}
&:before {
border: 1px solid #8e9095;
}
}
}
}
.checkbox {
input[type=radio][disabled] {
& + label {
&:after {
background-color: #eceff3;
}
}
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
margin-bottom: 6px;
color: #777a80;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
margin-bottom: 10px;
direction: ltr;
&:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 10px;
position: absolute;
left: 0px;
top: 1.4px;
background-color: $color-white ;
border: 1px solid #c2c6cb;
border-radius: 3px;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
&::after {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 3.2px;
top: 0px;
font-size: 11px;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
&:after {
border-radius: 3px;
}
}
input[type=checkbox] {
display: none;
}
&.checkbox-circle {
label {
&:after {
border-radius: 99px;
}
&:before {
border-radius: 99px;
}
}
}
input[type=checkbox]:checked {
& + label {
color: #4d5056;
&::after {
font-family: 'FontAwesome';
content: "\F00C";
}
}
}
input[type=checkbox][disabled] {
& + label {
opacity: 0.65;
&:before {
background-color: #eceff3;
}
}
}
&.check-success {
input[type=checkbox]:checked {
& + label {
&:before {
background-color: $color-success;
border: 1px solid $color-success;
}
&::after {
color: $color-white ;
}
}
}
}
&.check-primary {
input[type=checkbox]:checked {
& + label {
&:before {
background-color: $color-primary;
border: 1px solid $color-primary;
}
&::after {
color: $color-white ;
}
}
}
}
&.check-info {
input[type=checkbox]:checked {
& + label {
&:before {
background-color: $color-info;
border: 1px solid $color-info;
}
&::after {
color: $color-white ;
}
}
}
}
&.check-warning {
input[type=checkbox]:checked {
& + label {
&:before {
background-color: $color-warning;
border: 1px solid $color-warning;
}
&::after {
color: $color-white ;
}
}
}
}
&.check-danger {
input[type=checkbox]:checked {
& + label {
&:before {
background-color: $color-danger;
border: 1px solid $color-danger;
}
&::after {
color: $color-white ;
}
}
}
}
}
table {
td {
.checkbox {
label {
padding-left: 0px;
}
}
}
th {
.checkbox {
label {
padding-left: 0px;
}
}
}
&.fc-border-separate {
margin-top: 20px;
}
}
.star {
label {
display: inline-block;
cursor: pointer;
position: relative;
font-size: 18px;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
margin-bottom: 10px;
&:before {
font-family: 'FontAwesome';
content: "\F005";
display: inline-block;
margin-right: 10px;
position: absolute;
left: 0px;
top: -4px;
font-size: 18px;
color: #97a3b3;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked {
& + label {
&:before {
color: #ffd200;
}
}
}
}
.wysihtml5-toolbar {
li {
padding-left: 0px;
}
}
.bootstrap-tagsinput {
border: 1px solid #E5E9EC;
border-radius: 3px;
box-shadow: none;
width: 100%;
transition: background 0.2s linear 0s;
&.active-element {
background-color: #f4f5f7;
}
input {
border: none;
margin-bottom: 0px;
min-height: 25px;
}
.tag {
vertical-align: middle;
padding: 4px 9px;
margin-top: 3px;
display: inline-block;
}
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active,.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: none;
}
form {
margin: 0;
legend {
margin: 15px 0px 10px 0px !important;
}
}
.column-seperation {
& > div[class*="col-"] {
border-right: 1px solid #ddd;
}
& > div[class*="col-"]:last-child {
border-right: 0px;
}
}
.form-no-horizontal-spacing {
.row-fluid {
[class*="span"] {
}
.side-label {
border-right: 1px solid #dddddd;
}
}
.error {
margin-bottom: 10px;
}
}
input.placeholder,
textarea.placeholder {
color: #aaa !important;
}
.help-block {
margin-top: 10px;
}
.form-inline {
input {
margin-bottom: 0px !important;
}
}
.form-label {
margin-top: 2px;
.required {
color: #e02222;
font-size: 12px;
padding-left: 2px;
}
}
.help-inline {
margin-top: 6px;
}
.help-small {
font-size: 12px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.success {
.help-inline {
&.ok {
&:before {
content: "\f00c";
font-size: 16px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
}
}
}
}
form legend,.form-view legend {
margin-bottom: 15px !important;
}
.controls > .radio .checker,
.controls > .checkbox .checker {
margin-right: 2px !important;
}
.controls > .radio,
.controls > .checkbox {
display: inline-block;
padding: 0 !important;
margin: 0 !important;
margin-top: 8px !important;
margin-right: 15px !important;
}
.controls > .radio.line,
.controls > .checkbox.line {
display: block;
padding: 0 !important;
margin: 0 !important;
margin-top: 5px !important;
}
.controls {
.inline {
margin-top: 8px;
}
}
.form-view {
.control-group {
margin-top: 0px;
margin-bottom: 5px;
}
}
.uploader {
margin-top: 2px !important;
}
.hint {
padding: 5px 0px 0px 10px;
}
.form {
form {
margin: 0px !important;
padding: 0px !important;
}
.form-actions {
background-color: $base-light-five !important;
margin-top: 0px !important;
margin-top: 40px;
padding-left: 190px;
}
}
.form-actions {
background-color: $base-light-five;
border: 0px;
margin-bottom: 20px;
margin-top: 20px;
padding: 19px 20px 20px;
&:after {
clear: both;
}
}
.form-actions:before, .form-actions:after {
content: "";
display: table;
line-height: 0;
}
.form-horizontal {
display: inline-block;
margin-right: 10px;
position: relative;
top: -4px;
&.form-bordered {
.control-group {
margin: 0;
padding: 0;
border-bottom: 1px solid #eee;
&:first-child {
border-bottom: 1px solid #eee !important;
}
&.last {
border-bottom: 0;
}
.controls {
padding: 10px;
position: relative;
border-left: 1px solid #eee;
.chosen-container {
min-height: 32px;
.help-block {
clear: both;
padding-top: 10px !important;
}
}
}
.control-label {
margin-top: 10px;
}
}
&.form-row-stripped {
.control-group {
&:nth-child(even) {
background-color: #fcfcfc;
}
}
.m-wrap {
background: $color-white !important;
}
}
&.form-label-stripped {
.control-group {
&:nth-child(even) {
background-color: #fcfcfc;
.controls {
background-color: $color-white;
}
}
}
}
}
}
.form-horizontal.form-bordered .help-inline,
.form-horizontal.form-bordered .help-block {
padding-left: 0;
}
.grid.box .form .form-actions,
.grid.solid .form .form-actions {
margin-left: -10px !important;
margin-right: -10px !important;
margin-bottom: -10px !important;
}
.wizard-steps {
display: block;
list-style: none outside none;
padding: 0;
position: relative;
width: 100%;
li {
display: block;
float: left;
max-width: 25%;
min-width: 25%;
text-align: center;
padding-left: 0;
&:before {
border-top: 6px solid #55606E;
content: "";
display: block;
font-size: 0;
overflow: hidden;
position: relative;
top: 13px;
right: 1px;
width: 100%;
z-index: 1;
}
&:first-child {
&:before {
left: 50%;
max-width: 50%;
}
}
&:last-child {
&:before {
max-width: 50%;
width: 50%;
}
}
&.complete {
.step {
background-color: $color-primary;
padding: 1px 6px;
border: 4px solid #55606e;
}
}
.step {
background-color: $color-primary-grey;
border-radius: 32px 32px 32px 32px;
color: $color-white;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 12px;
padding: 4px 9px;
position: relative;
text-align: center;
z-index: 2;
transition: all 0.2s linear 0s;
i {
font-size: 10px;
font-weight: normal;
position: relative;
top: -1.5px;
}
}
.title {
color: #B1BCC5;
display: block;
font-size: 13px;
line-height: 15px;
max-width: 100%;
position: relative;
table-layout: fixed;
text-align: center;
top: 20px;
word-wrap: break-word;
z-index: 104;
}
}
}
.wizard-steps a:hover,.wizard-steps a:active,.wizard-steps a:focus {
text-decoration: none;
}
.wizard-steps li.active .step,.wizard-steps li.active.complete .step {
background-color: $color-success;
color: $color-white;
font-weight: bold;
padding: 10px 15px;
border: none;
font-size: 16px;
}
.wizard-steps li.complete .title, .wizard-steps li.active .title {
color: #2B3D53;
}
.step-content {
margin-left: 60px;
margin-top: 40px;
.step-pane {
display: none;
min-height: 267px;
}
.active {
display: block;
}
}
.wizard-actions {
display: block;
list-style: none outside none;
padding: 0;
position: relative;
width: 100%;
li {
display: inline;
}
}
.tab-content {
overflow: auto;
position: relative;
z-index: 10;
background-color: $color-white ;
overflow: hidden;
margin-bottom: 18px;
&.transparent {
background-color: transparent;
}
}
.form-group {
margin-bottom: 20px;
.form-label {
color: #55606e;
display: inline-block;
margin-right: 8px;
}
.help {
color: #A7ABB1;
font-size: 12px;
}
.controls {
margin-top: 8px;
}
}
.form-control {
border: 1px solid #E5E9EC;
font-size: 13px;
}
.form-row input, .form-row select, .form-row textarea, .form-row select2 {
margin-bottom: 10px;
}
.form-row {
.radio {
margin-bottom: 7px;
}
&:last-child {
margin-bottom: 0;
}
}
.slide-primary,.slide-success {
display: inline-block;
}
.slide-primary {
.ios-switch {
.on-background {
background-image: none;
background-color: $color-primary;
}
}
}
.slide-success {
.ios-switch {
.on-background {
background-image: none;
background-color: $color-success;
}
}
}
.select2-container {
.select2-choice {
background-image: none;
border-radius: 2px;
border: 1px solid #e5e9ec;
padding: 3px 9px;
transition: border 0.2s linear 0s;
height: 35px;
.select2-arrow {
background: transparent;
border-left: 0px;
b {
background: none;
&:before {
font-family: 'FontAwesome';
content: "\f0d7";
position: relative;
top: 2px;
right: 5px;
font-size: 12px;
}
}
}
}
&.select2-drop-above {
.select2-choice {
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
}
}
.select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices {
background-image: none;
border: 1px solid #e5e9ec;
background: #f4f5f7;
}
.select2-dropdown-open {
.select2-choice {
.select2-arrow {
b {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
}
}
}
.select2-drop {
&.select2-drop-above {
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: none;
&.select2-drop-active {
border: 1px solid #e5e9ec;
border-bottom: none;
border-radius: 2px;
padding-top: 0px;
}
}
}
.select2-container-active .select2-choice, .select2-container-active .select2-choices {
box-shadow: none;
border: 1px solid #e5e9ec;
background: #f4f5f7;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.select2-search {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
input {
background: $color-white !important;
vertical-align: baseline;
line-height: 28px;
border-radius: 2px;
border: none;
font-size: 12px;
border: 1px solid #999999;
}
}
.select2-results {
margin: 3px 10px 10px 3px;
li {
color: #6F7B8A;
&.select2-result-with-children {
& > .select2-result-label {
color: #282323;
}
}
}
.select2-highlighted {
background: $color-success;
border-radius: 3px;
.select2-result-label {
color: $color-white ;
}
}
}
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {
background: none;
color: #6F7B8A;
font-size: 12px;
padding-left: 8px;
padding-top: 0px;
position: relative;
top: -5px;
}
.select2-drop-active {
border: 1px solid #e5e9ec;
border-bottom: none;
border-top: none;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
padding-top: 5px;
}
.select2-container-multi {
.select2-choices {
background-image: none;
border: 1px solid #dae0e4;
border-radius: 2px;
.select2-search-choice {
background-color: #e8edf1;
background-image: none;
border: none;
box-shadow: none;
color: inherit;
border-radius: 8px;
margin: 8px -5px 7px 10px;
padding: 4px 8px 4px 21px;
direction:ltr;
}
}
&.select2-container-active {
.select2-choices {
border: 1px solid #dae0e4;
box-shadow: none;
}
.select2-search-choice {
background-color: $color-white !important;
}
}
.select2-search-choice-close {
left: 6px;
}
}
.select2-search-choice-close {
background: none;
top: 4px;
right: 0;
&:hover {
text-decoration: none;
}
&:before {
font-family: 'FontAwesome';
content: "\f00d";
font-size: 12px;
color: #94a1b2;
}
}
.select2-drop-multi .select2-results .select2-no-results, .select2-drop-multi .select2-results .select2-searching, .select2-drop-multi .select2-results .select2-selection-limit {
top: 0px;
}
.select2 {
&.form-control {
padding: 0;
box-shadow: none;
border: 0;
}
}
.input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child > .dropdown-toggle {
border-radius: 0 2px 2px 0;
}
.input-prepend.inside .add-on:first-child, .input-prepend .btn:first-child {
background-color: $color-white ;
border: 1px solid #e5e9ec;
position: relative;
left: 3px;
border-radius: 2px;
padding-left: 8px;
padding-right: 4px;
padding-top: 4px;
top: 0px;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s,color 0.2s linear 0s, box-shadow 0.2s linear 0s, background 0.2s linear 0s;
color: #9ea9b2;
}
.input-prepend.inside.no-boarder .add-on:first-child, .input-prepend.no-boarder .btn:first-child {
border: none;
}
.input-append .add-on, .input-prepend .add-on {
position: absolute;
background-color: $color-primary-grey;
color: #5E5E5E;
text-shadow: none;
border: $color-primary-grey;
border-radius: 0 2px 2px 0;
height: 37px;
min-width: 34px;
padding-right: 10px;
padding-left: 10px;
padding-top: 6px;
}
.input-append {
.add-on {
.arrow {
background-color: transparent !important;
position: absolute;
left: -6px;
color: $color-primary-grey;
z-index: 100;
font-size: 26px;
&:before {
font-family: 'FontAwesome';
content: "\f0d9 ";
}
}
}
&.primary {
.add-on {
.arrow {
color: $color-primary;
}
}
}
&.success {
.add-on {
.arrow {
color: $color-success ;
}
}
}
&.info {
.add-on {
.arrow {
color: $color-info ;
}
}
}
&.warning {
.add-on {
.arrow {
color: $color-warning;
}
}
}
&.danger {
.add-on {
.arrow {
color: $color-danger;
}
}
}
input[class*="span"] {
padding-left: 16px;
border-right: 0px;
-webkit-border-radius: 2px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius: 2px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
border-radius: 2px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.form-control {
display: inline-block;
}
}
.input-append.primary .add-on, .input-prepend .add-on {
background-color: $color-primary;
color: $color-white ;
}
.input-append.success .add-on, .input-prepend .add-on {
background-color: $color-success ;
color: $color-white ;
display: inline-block;
float: left;
}
.input-append.info .add-on, .input-prepend .add-on {
background-color: $color-info;
color: $color-white ;
}
.input-append.warning .add-on, .input-prepend .add-on {
background-color: $color-warning;
color: $color-white ;
}
.input-append.danger .add-on, .input-prepend .add-on {
background-color: $color-danger;
color: $color-white ;
}
.input-focus {
background-color: #f4f5f7 !important;
color: #56646e !important;
}
.no-boarder {
.input-focus {
border: none !important;
}
}
.input-prepend {
input[class*="span"] {
padding-left: 16px;
border-left: 0px;
-webkit-border-radius: 2px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius: 2px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-radius: 2px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
}
.input-with-icon {
position: relative;
input {
padding-left: 32px !important;
}
i {
color: #e5e9ec;
display: block;
position: absolute;
margin: 9px 2px 4px 10px;
width: 16px;
height: 16px;
font-size: 16px;
text-align: center;
}
&.right {
input {
padding-left: 12px !important;
padding-right: 33px !important;
}
i {
right: 8px;
float: right;
}
}
}
.input-group-addon {
border: 1px solid #E5E9EC;
color: #9EA9B2;
font-size: 14px;
padding: 6px 10px;
border-radius: 3px;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s,color 0.2s linear 0s, box-shadow 0.2s linear 0s, background 0.2s linear 0s;
i {
position: relative;
top: 1px;
}
&.primary {
background-color: $color-primary;
border: 1px solid $color-primary;
color: $color-white ;
background-color: $color-primary;
border: 1px solid $color-primary;
color: $color-white ;
.arrow {
color: $color-primary;
}
}
&.success {
background-color: $color-success;
color: $color-white ;
.arrow {
color: $color-success;
}
}
&.info {
background-color: #1f3853;
color: $color-white ;
.arrow {
color: #1f3853;
}
}
&.warning {
background-color: #fbb05e;
color: $color-white ;
background-color: #fbb05e;
color: $color-white ;
.arrow {
color: #fbb05e;
}
}
&.danger {
background-color: #f35958;
color: $color-white ;
.arrow {
color: #f35958;
}
}
.arrow {
position: relative;
right: -6px;
color: $color-primary-grey;
z-index: 100;
&:before {
font-family: 'FontAwesome';
content: "\f0da";
font-size: 23px;
position: absolute;
left: 17px;
top: -2px;
}
}
&:last-child {
.arrow {
&:before {
font-family: 'FontAwesome';
content: "\f0d9";
font-size: 23px;
position: absolute;
left: -23px;
top: -2px;
}
}
input {
border-left: 0px;
}
}
}
.transparent {
.input-group-addon {
background-color: $color-white ;
padding: 8px 1px 10px 9px;
}
}
.transparent.input-group .form-control:first-child, .transparent .input-group-addon:first-child, .transparent .input-group-btn:first-child>.btn, .transparent .input-group-btn:first-child>.dropdown-toggle, .transparent .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
border-right:0px;
border-left:1px solid #e5e9ec;
}
.transparent .input-group .form-control:last-child, .transparent .input-group-addon:last-child, .transparent .input-group-btn:last-child>.btn, .transparent .input-group-btn:last-child>.dropdown-toggle, .transparent .input-group-btn:first-child>.btn:not(:first-child) {
padding: 6px 10px;
}
.datepicker {
padding: 10px 16px;
border-radius: 2px;
font-size: 12px;
thead {
tr {
.datepicker-switch {
color: #6f7b8a;
font-size: 13px;
}
.prev {
color: $color-success;
content: '';
font-size: 0px;
&:before {
color: $color-success;
font-family: 'FontAwesome';
content: "\f053";
font-size: 13px;
}
}
.next {
color: $color-success;
content: '';
font-size: 0px;
&:before {
color: $color-success;
font-family: 'FontAwesome';
content: "\f054";
font-size: 13px;
}
}
.dow {
color: $color-success;
text-transform: uppercase;
font-size: 11px;
}
}
}
tbody {
tr {
.odd {
color: #d0d3d8;
}
}
}
table {
tr {
td {
&.day {
&:hover {
background: #eeeeee;
opacity: 0.65;
}
}
span {
border-radius: 4px 4px 4px 4px;
}
}
}
}
}
.datepicker th, .datepicker td {
padding: 5.5px !important;
}
.datepicker table tr td.old, .datepicker table tr td.new {
color: #d0d3d8;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
background-image: none;
text-shadow: none;
font-weight: 600;
}
.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
background-color: #e5e9ec;
background-image: none;
color: $color-white ;
}
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled.disabled:hover, .datepicker table tr td.active[disabled], .datepicker table tr td.active[disabled]:hover, .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled[disabled]:hover {
background-color: $color-success;
}
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
background-image: none;
border: none;
text-shadow: none;
}
.datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active[disabled], .datepicker table tr td span.active[disabled]:hover, .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active.disabled[disabled]:hover {
background-color: $color-success;
}
.datepicker-inline {
width: auto;
}
.error {
font-size: 12px;
color: #f35958;
display: block;
}
.error-control {
input {
border: 1px solid $color-danger;
}
select{
border: 1px solid $color-danger;
}
textarea{
border: 1px solid $color-danger;
}
.select2-container .select2-choice{
border: 1px solid $color-danger;
}
&.input-with-icon{
.select2-container{
.select2-choice {
.select2-arrow b:before{
content: "\f12a";
color: $color-danger;
}
}
}
}
&.input-with-icon{
.select2-container{
.select2-choice {
.select2-arrow b{
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
}
i {
color: $color-danger;
}
}
.success-control {
input {
border: 1px solid $color-green;
}
select{
border: 1px solid $color-green;
}
textarea{
border: 1px solid $color-green;
}
.select2-container .select2-choice{
border: 1px solid $color-green;
}
&.input-with-icon{
.select2-container{
.select2-choice {
.select2-arrow b:before{
content: "\f00c";
color: $color-green;
}
}
}
}
&.input-with-icon{
.select2-container{
.select2-choice {
.select2-arrow b{
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
}
i {
color: $color-green;
}
}