// Licensed to the Apache Software Foundation (ASF) under one // or more contributor license agreements. See the NOTICE file // distributed with this work for additional information // regarding copyright ownership. The ASF licenses this file // to you 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. /* form.scss */ .form-horizontal { .control-label-sm { padding-top: 3px; } .control-label-sm-pl { @extend .control-label-sm; padding-left: 10px; } .control-label-sm-pr { @extend .control-label-sm; padding-right: 10px; } } .form-group { .required:after { content: "*"; padding-left: 1%; color: $red; } .control-label { &.text-left { text-align: left; } &.text-right { text-align: right; } } .form-control { //Instead of the line below you could use @include border-radius($radius, $vertical-radius) background-color: $color_white_lilac_approx; border: 1px $color_mystic_approx solid; &[disabled] { background-color: $color_gallery_approx; } &:focus { border-color: $color_bali_hai_approx; outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx; } } } .form-color { .form-group span[class^="select2-selection select2-selection--"], .form-control { background-color: $color_form_control !important; } } .sidebar-wrapper { z-index: 9 !important; .form-control { background-color: $white; border: 1px $white solid; } } .well { background-color: $white; border: 1px solid $color_mystic_approx; &.no-left-right-border { border-left: 0px; border-right: 0px; padding: 16px 0px; } } textarea { resize: none; &:focus { outline: none !important; } } label { font-weight: 600; } button { &:focus { outline: none !important; } &[disabled] { .fa { opacity: .65; } } } .btn { //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 4px; &:hover { text-decoration: none; } } .btn.btn-only-icon { border: none; background: none; &.btn-atlas { color: $color_jungle_green_approx; } } [class^="col-md-"], [class^="col-sm-"] { .btn.checkbox-inline, .btn.radio-inline { padding-left: 19px; } } .btn-primary { color: $white; background-color: $color_blue_bayoux_approx; border-color: $color_blue_bayoux_approx; &:hover { color: $white; background-color: $color_pickled_bluewood_approx; border-color: $color_pickled_bluewood_approx; } } .btn-success { color: $white; background-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx; &:hover { color: $white; background-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx; } &:focus { color: $white; background-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx; } } .btn-info { color: $white; background-color: $color_picton_blue_approx; border-color: $color_picton_blue_approx; &:hover { color: $white; background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } &:focus { color: $white; background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } } .btn-warning { color: $white; background-color: $color_yellow_sea_approx; border-color: $color_yellow_sea_approx; &:hover { color: $white; background-color: $color_gamboge_approx; border-color: $color_gamboge_approx; } &:focus { color: $white; background-color: $color_gamboge_approx; border-color: $color_gamboge_approx; } } .btn-danger { color: $white; background-color: $color_trinidad_approx; border-color: $color_trinidad_approx; &:hover { color: $white; background-color: $color_grenadier_approx; border-color: $color_grenadier_approx; } &:focus { color: $white; background-color: $color_grenadier_approx; border-color: $color_grenadier_approx; } } .btn-atlas { padding: 10px 20px; background-color: $color_keppel_approx; color: $white; margin-bottom: 10px; border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) transition: all 0.3s ease; margin: 2px; &:hover { @include btn-action-effect('default'); background-color: $transparent; } &:focus { @include btn-action-effect('default'); background-color: $transparent; } &.btn-sm { padding: 2px 6px; } &.btn-xs { padding: 0px 5px; } &.btn-md { padding: 6px 10px; } } .btn-inline { .btn-action { margin: 0px 3px 3px 0px; display: inline-block; } } .btn-fixed-width { .btn-icon { min-width: 100px; &.propagte-classification { >span { width: 98px; } } >span { @include ellipsis(); float: left; width: 76px; padding: 2px 5px !important; } >i { float: right; line-height: 15px; } } } .btn-action { @extend .btn-atlas; @include btn-action-effect('default'); border-radius: 4px; font-size: 14px; background-color: $transparent; &.active { @include btn-action-hover-effect('default'); } &:hover { @include btn-action-hover-effect('default'); color: $white !important; } &:focus { @include btn-action-effect('default'); } &.btn-sm { padding: 2px 6px; } &.btn-xs { padding: 0px 5px; } &.btn-md { padding: 5px 10px; } &.btn-blue { @include btn-action-effect('blue'); &.active { @include btn-action-hover-effect('blue'); } &:hover { @include btn-action-hover-effect('blue'); } &:focus { @include btn-action-effect('blue'); } &.btn-icon { @include btn-action-effect('blue'); color: $tag_color !important; &:hover { color: $color_havelock_blue_approx; background-color: $transparent; } >span { &:hover { @include btn-action-hover-effect('blue'); } } i.fa { &:hover { @include btn-action-hover-effect('blue'); } } } } &.btn-disabled { border: 1px $action_gray solid; color: $action_gray; cursor: default; i.fa { position: relative; right: -5px; } &:hover { color: $white; background-color: $action_gray; } } &.btn-icon { padding: 0px; overflow: hidden; background-color: $transparent; &:hover { color: $color_keppel_approx; background-color: $transparent; } >span { padding: 5px; &.active { color: $white; background-color: $tag_color; } &:hover { @include btn-action-hover-effect('default'); } } i.fa { position: relative; padding: 5px; cursor: pointer; &:hover { @include btn-action-hover-effect('default'); } } } &.btn-icon-pd { i.fa { padding: 5px; cursor: pointer; } } } .btn-group { .btn-atlas, .btn-action { margin: 0px; } &.no-border-button { .btn { font-size: 15px; line-height: 15px; padding: 8px 20px; &:not(:last-child) { border: 0px; border-right: 1px solid; } } } } .pagination>.active { >a { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; &:focus { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } &:hover { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } } >span { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; &:focus { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } &:hover { background-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx; } } } .deleteBtn { border-color: $color_mountain_mist_approx; color: $color_mountain_mist_approx; cursor: default; margin: 0px 10px; &:hover { border-color: $color_mountain_mist_approx; color: $color_mountain_mist_approx !important; background-color: $transparent; } &:focus { border-color: $color_mountain_mist_approx; color: $color_mountain_mist_approx; background-color: $transparent; } } .block { display: block !important; } .list-style-disc { list-style: disc; } .has-feedback.align-left { .form-control { padding-left: 32.5px; padding-right: 12px; } .form-control-feedback { top: 10px; left: 0px; height: 14px } } .has-feedback.align-left-right-icon { position: relative; .form-control.icon-input { padding-left: 32.5px; padding-right: 61px; } .icon-group { right: 0px; //overflow: hidden; position: absolute; top: 50%; width: 56px; } .form-control-feedback { top: calc(50% - 7px); height: 14px; width: 28px; &:first-child { left: 0; } &.clearable { overflow: hidden; padding-left: 35px; transition: padding 0.4s; pointer-events: all; cursor: pointer; &.in { padding-left: 0; } } } } .create-entity-form { &.all { .attribute-dash-box { &.alloptional { display: block; } } } .attribute-dash-box { border-style: dashed; border-width: 2px; border-spacing: 8px; border-radius: 12px; border-color: $attribute-dash-box; position: relative; padding: 18px 10px 0px 10px; margin-top: 25px; span.required:after { content: "*"; padding-left: 1%; color: $red; } &.alloptional { display: none; } .attribute-type-label { background: $white; padding: 5px 10px; position: absolute; top: -16px; } } } .parent-node .tagActions { display: none; position: absolute; right: 0px; .listTerm { display: inline-block; margin: 5px; } .listTerm a { color: #686868; } } /* clears the 'X' from Internet Explorer */ input[type=text]::-ms-clear { display: none; width: 0; height: 0; } input[type=text]::-ms-reveal { display: none; width: 0; height: 0; }