| // Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| // use this file except in compliance with the License. You may obtain a copy of |
| // the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, software |
| // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| // License for the specific language governing permissions and limitations under |
| // the License. |
| |
| @import "variables.less"; |
| @import "icons.less"; |
| |
| input[type="text"], |
| input[type="password"] { |
| .border-radius(0); |
| padding: 12px; |
| border: 1px solid #ccc; |
| height: auto; |
| font-size: 16px; |
| margin-top: 0; |
| } |
| |
| input[type="checkbox"], |
| input[type="radio"] { |
| box-sizing: border-box; |
| padding: 0; |
| } |
| |
| input[type="file"], |
| input[type="checkbox"], |
| input[type="radio"], |
| select { |
| margin: 0 0 1em 0; |
| } |
| |
| /*form elements and buttons*/ |
| .btn-group { |
| > .btn + .dropdown-toggle, |
| > .btn:first-child, |
| > .btn:last-child, |
| > .dropdown-toggle { |
| .border-radius(0); |
| background-image: none; |
| text-shadow: none; |
| } |
| } |
| |
| button:focus { |
| outline: 0 !important; |
| } |
| |
| .btn { |
| .box-shadow(none); |
| .border-radius(@baseBorderRadius); |
| background-image: none; |
| text-shadow: none; |
| background-repeat: no-repeat; |
| padding: 10px; |
| margin-top: 0; |
| .icon { |
| margin-right: 0.2em; |
| } |
| &.btn-small { |
| padding: 5px 10px; |
| .icon { |
| margin-right: 0; |
| font-size: inherit; |
| } |
| } |
| &.btn-mini { |
| padding: 3px 8px; |
| .icon { |
| margin-right: 0; |
| font-size: inherit; |
| } |
| } |
| } |
| .btn-primary, |
| .btn-success { |
| color: @buttonText; |
| background-color: @primaryGreen; |
| border-color: @primaryGreen; |
| &:disabled { |
| background-color: @primaryGreenDisabled; |
| border-color: @primaryGreenDisabled; |
| color: @buttonTextDisabled; |
| pointer-events: none; |
| } |
| } |
| |
| .btn-secondary { |
| color: @buttonText; |
| background-color: @secondaryBlue; |
| border-color: @secondaryBlue; |
| &:disabled { |
| color: @buttonTextDisabled; |
| background-color: @secondaryBlueDisabled; |
| border-color: @secondaryBlueDisabled; |
| pointer-events: none; |
| } |
| } |
| |
| .btn-tertiary { |
| color: @secondaryBlue; |
| background-color: @buttonText; |
| border: 2px solid @secondaryBlue; |
| &:disabled { |
| color: @secondaryBlueDisabled; |
| background-color: @primaryGreenDisabled; |
| border-color: @buttonTextDisabled; |
| pointer-events: none; |
| } |
| } |
| |
| .btn-warning, |
| .btn-danger { |
| color: @buttonText; |
| background-color: @dangerRed; |
| border-color: @dangerRed; |
| &:disabled { |
| color: @buttonTextDisabled; |
| background-color: @dangerDisabled; |
| border-color: @dangerDisabled; |
| pointer-events: none; |
| } |
| } |
| |
| .btn-success:hover, |
| .btn-primary:hover, |
| .btn-secondary:hover, |
| .btn-tertiary:hover, |
| .btn-warning:hover, |
| .btn-danger:hover { |
| background-color: @hoverHighlight; |
| border-color: @hoverHighlight; |
| } |
| |
| .form-actions { |
| background: none; |
| border: none; |
| } |
| |
| .input-append, |
| .input-prepend { |
| .add-on { |
| font-size: 18px; |
| padding: 14px 5px 30px; |
| } |
| .btn .icon { |
| font-size: 16px; |
| margin-right: 0; |
| } |
| } |
| |
| .row-fluid .input-append [class*="span"], |
| .input-prepend input[class*="span"] { |
| width: auto; |
| } |
| |
| .form-inline { |
| input[type="password"], |
| input[type="text"] { |
| width: auto; |
| } |
| } |
| .checkbox { |
| label { |
| display: inline-block; |
| padding-left: 30px; |
| } |
| } |
| |
| label { |
| margin-right: 15px; |
| padding-left: 0; |
| display: block; |
| cursor: pointer; |
| position: relative; |
| font-size: 14px; |
| &.inline { |
| display: inline-block; |
| } |
| } |
| .help-block { |
| font-size: 12px; |
| } |
| |
| a.help-link { |
| color: @secondaryBlue; |
| text-decoration: none; |
| &:hover { |
| color: @hoverHighlight; |
| } |
| } |
| |
| input[type="text"].error { |
| border: red 1px solid; |
| } |
| |
| form.view-query-update, |
| form.view-query-save { |
| max-width: 100%; |
| } |
| |
| .custom-inputs { |
| input[type="radio"], |
| input[type="checkbox"] { |
| display: none; |
| } |
| |
| .checkbox label:before { |
| border-radius: 12px; |
| background-color: rgba(255, 255, 255, 0.1); |
| border: 2px solid rgba(255, 255, 255, 0.1); |
| transition: linear 0.2s, box-shadow linear 0.2s; |
| -moz-transition: linear 0.2s, box-shadow linear 0.2s; |
| -webkit-transition: linear 0.2s, box-shadow linear 0.2s; |
| } |
| |
| .controls > .radio:first-child, |
| .controls > .checkbox:first-child { |
| padding-top: 15px; |
| } |
| |
| .radio.inline, |
| .checkbox.inline { |
| display: inline-block; |
| padding-top: 15px; |
| margin-bottom: 12px; |
| vertical-align: middle; |
| } |
| |
| input[type="checkbox"] + label:hover:before { |
| border: 2px solid @white; |
| transition: linear 0.2s, box-shadow linear 0.2s; |
| -moz-transition: linear 0.2s, box-shadow linear 0.2s; |
| -webkit-transition: linear 0.2s, box-shadow linear 0.2s; |
| } |
| |
| /* if the checkbox is disabled, we don't want the red border on hover */ |
| input[type="checkbox"]:disabled + label:hover:before { |
| border: none; |
| } |
| |
| /* if the checkbox is disabled, we don't want the white border on hover */ |
| input[type="checkbox"]:disabled + label:hover:before { |
| border: none; |
| } |
| |
| input[type="checkbox"]:checked + label { |
| .fonticon-ok; |
| } |
| input[type="checkbox"]:checked + label:before { |
| font-family: @fauxtonFont; |
| font-size: 12px; |
| background-color: inherit; |
| border: 2px solid #7c8085; |
| color: @linkColor; |
| text-align: center; |
| line-height: 19px; |
| box-shadow: none; |
| display: inline-block; |
| } |
| |
| label:before { |
| content: ""; |
| display: inline-block; |
| width: 22px; |
| height: 22px; |
| margin-right: 10px; |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| background-color: #7c8085; |
| } |
| |
| .radio label:before { |
| border-radius: 8px; |
| } |
| |
| input[type="radio"]:checked + label:before { |
| content: "\2022"; |
| color: #f3f3f3; |
| font-size: 30px; |
| text-align: center; |
| line-height: 18px; |
| } |
| |
| label.drop-down { |
| &:before { |
| display: none; |
| } |
| } |
| } |
| |
| div.add-dropdown { |
| position: absolute; |
| top: 2px; |
| right: 0; |
| .dropdown-menu { |
| left: -110px; |
| padding-bottom: 0; |
| width: 148px; |
| min-width: 0; |
| top: 38px; |
| .box-shadow(@boxShadow); |
| &.arrow:before { |
| right: 4px; |
| } |
| a { |
| background-color: @brandDark1; |
| color: @navIconColor; |
| &:hover { |
| background-color: @hoverHighlight; |
| color: white; |
| } |
| } |
| li a { |
| padding: 10px 15px 10px 12px; |
| } |
| } |
| .dropdown-toggle { |
| border-top: none !important; |
| text-decoration: none; |
| } |
| > a { |
| border-bottom: none; |
| text-decoration: none; |
| font-size: 16px; |
| } |
| } |
| |
| input.errorHighlight { |
| -webkit-animation: errorBlinkBG 1s; |
| animation: errorBlinkBG 1s; |
| } |
| |
| .two-sides-toggle-button { |
| font-size: 15px; |
| padding: 0 11px; |
| |
| button.btn { |
| padding: 10px 15px; |
| background-color: #fff; |
| color: #888; |
| &.active:first-child { |
| border-right-radius: 10px; |
| } |
| &:hover { |
| background-color: @hoverHighlight; |
| color: #fff; |
| .box-shadow(none); |
| } |
| &.active { |
| /** |
| * The Reselect Components dropdown will go under the btn group on active |
| * since its relatively positioned before this component which is also relatively |
| * positioned. Based on the stacking context, no amount of z-index applied |
| * to the dropdown will overcome the activated btns z-index set in Bootstrap. |
| * The fix is to apply a z-index of !important here to override boostraps styling |
| * so the dropdown can go over the activated button. |
| */ |
| z-index: 1 !important; |
| background-color: @brandHighlight; |
| color: #ffffff; |
| .box-shadow(none); |
| } |
| } |
| } |