| /** |
| * 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. |
| */ |
| @import 'variables'; |
| |
| // Mixins |
| .flex-vertical-align { |
| display: flex; |
| align-items: center; |
| } |
| |
| .default-flex { |
| .flex-vertical-align; |
| justify-content: space-around; |
| } |
| |
| .stretch-flex { |
| align-items: stretch; |
| display: flex; |
| } |
| |
| .common-hexagon(@side, @color) { |
| display: block; |
| position: absolute; |
| margin: (@side / 3.464101615) 0; |
| width: @side; |
| height: @side / 1.732050808; |
| background-color: @color; |
| |
| &:before, &:after { |
| display: block; |
| position: absolute; |
| width: 0; |
| border-left: (@side / 2) solid transparent; |
| border-right: (@side / 2) solid transparent; |
| content: ''; |
| } |
| |
| &:before { |
| bottom: 100%; |
| border-bottom: (@side / 3.464101615) solid @color; |
| } |
| |
| &:after { |
| top: 100%; |
| border-top: (@side / 3.464101615) solid @color; |
| } |
| } |
| |
| .clickable-item { |
| cursor: pointer; |
| color: @link-color; |
| |
| &:hover { |
| color: @link-hover-color; |
| } |
| } |
| |
| .full-size { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| .dropdown-list-default { |
| line-height: 1; |
| border-radius: @dropdown-border-radius; |
| font-size: 14px; |
| min-width: @dropdown-min-width; |
| background: #FFF; |
| color: #666; |
| border: 1px solid #CFD3D7; |
| padding: 5px 0; |
| margin: 2px 0 0; |
| text-align: left; |
| list-style: none; |
| box-shadow: 0 6px 12px rgba(0, 0, 0, .175); |
| } |
| |
| .dropdown-item-default { |
| display: block; |
| color: #333; |
| cursor: pointer; |
| |
| &.active > a, &:hover { |
| color: #262626; |
| text-decoration: none; |
| background-color: #F5F5F5; |
| } |
| } |
| |
| .dropdown-item-child-default { |
| display: block; |
| min-height: 24px; |
| padding: 3px 20px; |
| clear: both; |
| font-weight: 400; |
| line-height: 1.42857143; |
| white-space: nowrap; |
| } |
| |
| .log-colors { |
| &.fatal { |
| color: @fatal-color; |
| } |
| |
| &.error { |
| color: @error-color; |
| } |
| |
| &.warn { |
| color: @warning-color; |
| } |
| |
| &.info { |
| color: @info-color; |
| } |
| |
| &.debug { |
| color: @debug-color; |
| } |
| |
| &.trace { |
| color: @trace-color; |
| } |
| |
| &.unknown { |
| color: @unknown-color; |
| } |
| } |
| |
| .grey { |
| color: @grey-color; |
| } |
| |
| .collapsed-form-control { |
| width: 0; |
| padding: 0; |
| } |
| |
| .inherited-color { |
| color: inherit; |
| |
| &:hover { |
| color: inherit; |
| } |
| } |
| |
| /** |
| * Caret mixin definition. |
| * The .caret mixin has two parameters: the width of the caret and the direction of the caret |
| * This is the Less implementation of the Bootstrap caret mixin: |
| * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_caret.scss |
| */ |
| |
| // This small mixin create the css of the down direction of a caret |
| .caret-direction(@caret-width, @direction, @color) when (@direction = down) { |
| border-top: @caret-width solid @color; |
| border-right: @caret-width solid transparent; |
| border-bottom: 0; |
| border-left: @caret-width solid transparent; |
| } |
| // This small mixin to create the css for the up direction |
| .caret-direction(@caret-width, @direction, @color) when (@direction = up) { |
| border-top: 0; |
| border-right: @caret-width solid transparent; |
| border-bottom: @caret-width solid @color; |
| border-left: @caret-width solid transparent; |
| } |
| // This small mixin to create the css for the right direction |
| .caret-direction(@caret-width, @direction, @color) when (@direction = right) { |
| border-top: @caret-width solid transparent; |
| border-right: 0; |
| border-bottom: @caret-width solid transparent; |
| border-left: @caret-width solid @color; |
| } |
| // This small mixin to create the css for the left direction |
| .caret-direction(@caret-width, @direction, @color) when (@direction = left) { |
| border-top: @caret-width solid transparent; |
| border-right: @caret-width solid @color; |
| border-bottom: @caret-width solid transparent; |
| border-left: 0; |
| } |
| // This is the content for the caret pseaudo element. It has been moved out from the .caret definition because |
| // the property interpolation does not work so that we can use condition |
| .caret-style(@caret-width, @direction, @color) { |
| display: inline-block; |
| width: 0; |
| height: 0; |
| vertical-align: @caret-width * .85; |
| content: ""; |
| .caret-direction(@caret-width, @direction, @color); |
| } |
| // This is the main caret mixin to create the common and the direction related css |
| .caret-mixin(@caret-width; @direction: down; @color: @base-font-color; @position: before) { |
| .caret-style(@caret-width, @direction, @color); |
| } |
| |
| .hexagon(@size: 2em, @color: @green) { |
| width: @size; |
| height: @size*0.55; |
| background: @color; |
| position: relative; |
| &:before { |
| content: ""; |
| position: absolute; |
| top: -@size*0.25; |
| left: 0; |
| width: 0; |
| height: 0; |
| border-left: @size/2 solid transparent; |
| border-right: @size/2 solid transparent; |
| border-bottom: @size/4 solid @color; |
| } |
| &:after { |
| content: ""; |
| position: absolute; |
| bottom: -@size/4; |
| left: 0; |
| width: 0; |
| height: 0; |
| border-left: @size/2 solid transparent; |
| border-right: @size/2 solid transparent; |
| border-top: @size/4 solid @color; |
| } |
| } |