| /* |
| * 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. |
| */ |
| |
| .layout { |
| display: flex; |
| designer { |
| flex-grow: 1; |
| } |
| } |
| |
| .palette-and-or-toolbar { |
| .toolbar { |
| position: relative; |
| height: calc(~"100vh - 105px"); |
| background-color: #fff; |
| overflow-y: scroll; |
| z-index: 40; |
| box-shadow: 0 0 10px 2px @navbar-default-border; |
| |
| &:after { |
| position: absolute; |
| content: ''; |
| width: 1px; |
| top: 0; |
| bottom: 0; |
| right: 0; |
| background-color: @navbar-default-border; |
| } |
| |
| .list-group-item { |
| @active-border-width: 4px; |
| padding-top: 10px + @active-border-width; |
| padding-bottom: 9px + @active-border-width; |
| border-left: none; |
| border-radius: 0; |
| |
| &:first-child { |
| border-top: none; |
| } |
| &.active { |
| border-right: none; |
| border-color: @list-group-border; |
| border-bottom: @active-border-width solid @brand-primary; |
| background-color: #fff; |
| color: @list-group-link-color; |
| padding-bottom: 10px; |
| } |
| } |
| } |
| |
| #palette-controls-button { |
| margin-right: -2px; // not sure why the default -1px doesn't work to merge the borders? |
| } |
| |
| .pane-nav-row { |
| border: solid 1px @gray-lighter; |
| border-top: none; |
| border-radius: 5px; |
| margin-top: -5px; |
| padding: 12px 5px 4px 5px; |
| display: flex; |
| |
| .filters { |
| flex: 1 1 auto; |
| overflow: hidden; |
| display: flex; |
| flex-wrap: wrap; |
| |
| max-height: 27px; // if things wrap hide them |
| &.multiline { // unless toggled multiline |
| max-height: max-content; |
| } |
| |
| .spacer { |
| flex: 0 0.5 1ex; |
| } |
| } |
| |
| .nav-row-item { |
| color: @gray-light; |
| flex: 0 0 auto; |
| margin: 6px 3px; |
| &.tool { |
| margin-top: 4px; |
| } |
| cursor: hand; |
| } |
| .nav-row-item:hover { |
| color: @brand-primary; |
| } |
| span[uib-dropdown] { |
| align-self: start; |
| } |
| |
| a[aria-expanded="true"] { |
| > div.nav-row-item { |
| color: @brand-primary; |
| } |
| } |
| |
| .spacer { |
| flex: 1 1 2em; |
| } |
| |
| .right-align-icon { |
| position: absolute; |
| left: auto; |
| right: 0; |
| } |
| } |
| } |
| |
| .pane { |
| position: absolute; |
| top: 50px; |
| bottom: 0; |
| background-color: #fff; |
| z-index: 40; |
| overflow-y: scroll; |
| |
| &.pane-palette { |
| left: 49px; |
| width: 440px; |
| box-shadow: 5px 0 10px -2px @navbar-default-border; |
| |
| .palette-title { |
| margin-left: 0; |
| margin-right: 0; |
| } |
| |
| &, .palette-full-height-wrapper { |
| display: flex; |
| flex-direction: column; |
| flex: 1 1 auto; |
| margin-left: 0; |
| margin-right: 0; |
| } |
| |
| h3 { |
| color: @gray-light; |
| } |
| br-svg { |
| width: 20px; |
| height: 20px; |
| cursor: pointer; |
| } |
| } |
| |
| &.pane-configuration { |
| right: 0; |
| box-shadow: 5px 0 10px 5px @navbar-default-border; |
| |
| & > ui-view > ui-view { |
| display: block; |
| width: 489px; |
| } |
| |
| .pane-palette .container-fluid { |
| padding-left: 15px; |
| padding-right: 15px; |
| } |
| |
| .container-fluid { |
| padding: 0; |
| } |
| |
| .add-panel { |
| display: flex; |
| flex-direction: column; |
| > .spec-parent { |
| flex: 0 0 auto; |
| } |
| > .add-panel-main { |
| flex: 1 1 auto; |
| display: flex; |
| flex-direction: row; |
| .toolbar { |
| flex: 0 0 auto; |
| } |
| .pane-palette { |
| flex: 1 1 auto; |
| } |
| } |
| } |
| |
| .spec-parent { |
| a { |
| background-color: @gray-lighter; |
| padding: 15px 45px 15px 15px; |
| position: relative; |
| color: @gray-light; |
| font-style: italic; |
| display: block; |
| transition: color 0.3s ease; |
| .text-overflow(); |
| |
| &:after{ |
| content: '\f112'; |
| font-family: FontAwesome; |
| position: absolute; |
| right: 15px; |
| color: @gray-light; |
| transition: color 0.3s ease; |
| } |
| &:hover { |
| color: @gray; |
| &:after { |
| color: @gray; |
| } |
| } |
| } |
| } |
| |
| // panel classes are added by use of accordion toggle in palette |
| // we also use these classes for spec editor and others |
| // (would be nice to refactor so we use our own classes instead) |
| .panel-group { |
| margin-bottom: 0; |
| .panel { |
| border-bottom: 1px solid @gray-lighter; |
| margin: 0 12px; |
| border-radius: 0; |
| box-shadow: none; |
| .panel-heading { |
| padding: 15px 3px 15px 3px; |
| } |
| .panel-title { |
| font-size: 16px; |
| font-weight: 400; |
| } |
| .panel-body { |
| padding: 0; |
| border: none !important; |
| margin-bottom: 24px; |
| } |
| } |
| .panel-title > a, |
| .panel-title > a:hover, |
| .panel-title > a:focus:hover { |
| background: none; |
| color: @gray-light; |
| |
| .collapsible-action { |
| padding-left: 2px; |
| padding-right: 6px; |
| margin-top: 1px; |
| } |
| .collapsible-action, a.collapsible-action { |
| color: @gray-light; |
| } |
| .collapsible-action:active, a.collapsible-action:active, |
| .collapsible-action:hover, a.collapsible-action:hover, |
| .collapsible-action:focus, a.collapsible-action:focus { |
| color: @gray; |
| } |
| } |
| } |
| } |
| } |
