| /* |
| * 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 '../../../public/stylesheets/variables'; |
| |
| // Use this class to control grid header height |
| .ui-grid-ignite__panel { |
| $panel-height: 64px; |
| $title-height: 36px; |
| padding-top: ($panel-height - $title-height) / 2 !important; |
| padding-bottom: ($panel-height - $title-height) / 2 !important; |
| } |
| |
| .ui-grid.ui-grid--ignite { |
| $height: 46px; |
| |
| position: relative; |
| border-top: none; |
| |
| [role="button"] { |
| outline: none; |
| } |
| |
| sup, sub { |
| color: $ignite-brand-success; |
| } |
| |
| .ui-grid-top-panel { |
| background: initial; |
| } |
| |
| .ui-grid-canvas { |
| padding-top: 0; |
| } |
| |
| .ui-grid-cell { |
| height: $height - 1px; |
| |
| border-color: transparent; |
| } |
| |
| .ui-grid-cell, |
| .ui-grid-header-cell { |
| .ui-grid-cell-contents { |
| padding: 13px 20px; |
| |
| text-align: left; |
| white-space: nowrap; |
| } |
| } |
| |
| .ui-grid-contents-wrapper { |
| position: absolute; |
| top: 0; |
| |
| border-bottom-right-radius: 6px; |
| overflow: hidden; |
| } |
| |
| .ui-grid-render-container-body { |
| .ui-grid-cell { |
| .ui-grid-cell-contents { |
| text-align: left; |
| } |
| |
| &.ui-grid-number-cell { |
| .ui-grid-cell-contents { |
| text-align: right; |
| } |
| } |
| } |
| } |
| |
| .ui-grid-row:last-child .ui-grid-cell { |
| border-bottom-width: 0; |
| } |
| |
| .ui-grid-header-viewport { |
| .ui-grid-header-canvas { |
| .ui-grid-header-cell { |
| .ui-grid-cell-contents { |
| color: $gray-light; |
| font-size: 14px; |
| font-weight: normal; |
| font-style: normal; |
| line-height: 18px; |
| text-align: left; |
| |
| padding: 15px 20px; |
| |
| & > i { |
| line-height: 18px; |
| } |
| |
| .ui-grid-header-cell-label { |
| // position: relative; |
| } |
| |
| .ui-grid-header-cell-label + span { |
| position: relative; |
| right: 3px; |
| } |
| |
| .ui-grid-header-cell-filter { |
| background-image: |
| linear-gradient(to right, $ignite-brand-success, transparent), |
| linear-gradient(to right, $ignite-brand-success 70%, transparent 0%); |
| background-position: left bottom; |
| background-repeat: repeat-x; |
| background-size: 0, 8px 1px, 0, 0; |
| |
| &:hover { |
| background-image: none; |
| // linear-gradient(to right, change-color($ignite-brand-success, $lightness: 26%), transparent), |
| // linear-gradient(to right, change-color($ignite-brand-success, $lightness: 26%) 70%, transparent 0%); |
| } |
| |
| div { |
| z-index: 1; |
| position: fixed; |
| |
| width: 100px; |
| height: 20px; |
| margin-top: -20px; |
| |
| font-size: 0; |
| } |
| |
| &.active { |
| color: $ignite-brand-primary; |
| |
| background-image: |
| linear-gradient(to right, $ignite-brand-primary, transparent), |
| linear-gradient(to right, $ignite-brand-primary 70%, transparent 0%); |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| .ui-grid-header--subcategories { |
| .ui-grid-header-canvas { |
| background-color: white; |
| } |
| |
| .ui-grid-header-span.ui-grid-header-cell { |
| background: initial; |
| |
| .ui-grid-cell-contents { |
| padding: 8px 20px; |
| } |
| |
| [ng-show] .ui-grid-cell-contents { |
| text-align: center; |
| } |
| |
| .ui-grid-filter-container { |
| padding-left: 20px; |
| padding-right: 20px; |
| font-weight: normal; |
| } |
| |
| .ng-hide + .ui-grid-header-cell-row .ui-grid-header-cell { |
| height: 69px; |
| } |
| |
| .ng-hide + .ui-grid-header-cell-row { |
| .ui-grid-cell-contents { |
| padding: 8px 20px; |
| } |
| |
| .ui-grid-filter-container { |
| padding-left: 20px; |
| padding-right: 20px; |
| } |
| } |
| } |
| } |
| |
| .ui-grid-pinned-container { |
| &.ui-grid-pinned-container-left { |
| width: auto; |
| |
| .ui-grid-render-container-left { |
| .ui-grid-viewport, |
| .ui-grid-header-viewport { |
| width: auto; |
| |
| .ui-grid-canvas { |
| width: auto; |
| } |
| } |
| |
| .ui-grid-header--subcategories { |
| .ui-grid-selection-row-header-buttons { |
| margin-top: 12px; |
| |
| &:after { |
| top: 3px; |
| } |
| } |
| } |
| |
| .ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell { |
| pointer-events: auto; |
| } |
| |
| &:before { |
| content: ''; |
| |
| position: absolute; |
| top: 0; |
| right: 15px; |
| z-index: 1000; |
| |
| width: 5px; |
| height: 100%; |
| |
| opacity: .2; |
| box-shadow: 2px 0 3px #000; |
| border-right: 1px solid #000; |
| } |
| } |
| } |
| } |
| |
| .ui-grid-pinned-container-left .ui-grid-header-cell:last-child { |
| border-width: 0; |
| } |
| |
| .ui-grid-pinned-container-left .ui-grid-cell:last-child { |
| border-width: 0; |
| background-color: initial; |
| } |
| |
| .ui-grid-row { |
| height: $height; |
| border-bottom: 1px solid $table-border-color; |
| |
| &:nth-child(odd) { |
| .ui-grid-cell { |
| background-color: initial; |
| } |
| } |
| |
| &:nth-child(even) { |
| .ui-grid-cell { |
| background-color: #f9f9f9; |
| } |
| } |
| |
| &.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell { |
| background-color: #e5f2f9; |
| |
| box-shadow: 0 -1px 0 0 #c6cfd8, 0 1px 0 0 #c6cfd8; |
| } |
| } |
| |
| .ui-grid-selection-row-header-buttons { |
| position: relative; |
| opacity: 1; |
| right: 3px; |
| display: block; |
| |
| &::before { |
| content: ''; |
| |
| width: 12px; |
| height: 12px; |
| |
| margin-left: 0; |
| margin-right: 0; |
| |
| border: 1px solid #afafaf; |
| border-radius: 2px; |
| background-color: #FFF; |
| |
| box-shadow: inset 0 1px 1px #ccc; |
| } |
| |
| &.ui-grid-all-selected, |
| &.ui-grid-row-selected { |
| |
| &::before { |
| border-color: #0067b9; |
| background-color: #0067b9; |
| |
| box-shadow: none; |
| } |
| |
| &::after { |
| content: ''; |
| |
| position: absolute; |
| top: 4px; |
| left: 4px; |
| |
| width: 4px; |
| height: 8px; |
| |
| border: solid #FFF; |
| border-width: 0 2px 2px 0; |
| |
| transform: rotate(35deg); |
| } |
| } |
| } |
| |
| .ui-grid-header, |
| .ui-grid-viewport { |
| .ui-grid-icon-cancel { |
| right: 10px; |
| } |
| |
| .ui-grid-tree-base-row-header-buttons { |
| .ui-grid-icon-plus-squared, |
| .ui-grid-icon-minus-squared, |
| &.ui-grid-icon-plus-squared, |
| &.ui-grid-icon-minus-squared { |
| position: relative; |
| top: 3px; |
| |
| display: block; |
| width: 13px; |
| height: 13px; |
| |
| margin-top: -1px; |
| margin-left: -4px; |
| margin-right: 0; |
| |
| cursor: pointer; |
| |
| border: 1px solid #757575; |
| border-radius: 2px; |
| background-color: #757575; |
| |
| &::before, |
| &::after { |
| content: ''; |
| } |
| } |
| |
| .ui-grid-icon-plus-squared, |
| .ui-grid-icon-minus-squared, |
| &.ui-grid-icon-plus-squared, |
| &.ui-grid-icon-minus-squared { |
| &::before { |
| position: absolute; |
| top: 5px; |
| left: 2px; |
| |
| width: 7px; |
| margin: 0; |
| |
| border-top: 1px solid white; |
| } |
| } |
| |
| .ui-grid-icon-plus-squared, |
| &.ui-grid-icon-plus-squared { |
| &::after { |
| position: absolute; |
| top: 2px; |
| left: 5px; |
| |
| height: 7px; |
| margin: 0; |
| |
| border-left: 1px solid white; |
| } |
| } |
| } |
| } |
| |
| .ui-grid-header--subcategories { |
| .ui-grid-icon-cancel { |
| right: 20px; |
| } |
| } |
| |
| .ui-grid-pinned-container { |
| .ui-grid-header { |
| .ui-grid-header-cell-row { |
| .ui-grid-header-cell { |
| border-right: none; |
| |
| &.disabled { |
| opacity: .2; |
| |
| .ui-grid-icon-ok { |
| cursor: default; |
| } |
| } |
| |
| &:last-child { |
| .ui-grid-header-cell { |
| .ui-grid-column-resizer { |
| right: -1px; |
| opacity: 0; |
| z-index: 1000; |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| .ui-grid-viewport { |
| .ui-grid-row { |
| .ui-grid-cell { |
| border-bottom: none; |
| |
| &:nth-child(2) { |
| overflow: visible; |
| } |
| } |
| } |
| } |
| |
| .ui-grid-tree-header-row { |
| & ~ .ui-grid-row:not(.ui-grid-tree-header-row) { |
| position: relative; |
| |
| &::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| z-index: 1; |
| |
| width: 4px; |
| height: 47px; |
| |
| background: #0067b9; |
| box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .3), 0 -1px 0 0 rgba(0, 103, 185, 1); |
| } |
| } |
| } |
| } |
| |
| .ui-grid-tree-header-row { |
| font-weight: normal !important; |
| } |
| |
| input[type="text"].ui-grid-filter-input { |
| display: block; |
| width: 100%; |
| height: 28px; |
| padding: 3px 3px; |
| |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| background-color: #fff; |
| background-image: none; |
| |
| color: #393939; |
| text-align: left; |
| font-size: 14px; |
| font-weight: normal; |
| line-height: 1.42857; |
| |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
| transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; |
| |
| &::placeholder { |
| color: #999; |
| } |
| |
| &:focus { |
| outline: none; |
| |
| box-shadow: none; |
| border-color: #66afe9; |
| } |
| } |
| |
| .ui-grid-icon-cancel { |
| &:before { |
| content: ''; |
| |
| display: block; |
| width: 12px; |
| height: 12px; |
| margin: 10px 5px; |
| |
| background-image: url('/images/icons/cross.svg'); |
| background-repeat: no-repeat; |
| background-position: center; |
| } |
| } |
| |
| .ui-grid-icon-filter { |
| position: absolute; |
| right: 20px; |
| |
| color: $text-color; |
| |
| &:before { |
| content: ''; |
| } |
| } |
| |
| .ui-grid-selection-row-header-buttons::before { |
| opacity: 1; |
| } |
| |
| .ui-grid-clearfix:before, .ui-grid-clearfix:after { |
| display: flex; |
| } |
| } |
| |
| .ui-grid--ignite.ui-grid-disabled-group-selection { |
| .ui-grid-pinned-container { |
| .ui-grid-tree-header-row { |
| .ui-grid-selection-row-header-buttons { |
| opacity: .2; |
| cursor: default; |
| } |
| } |
| } |
| } |
| |
| // Obsoleted, use grid-no-data. |
| .ui-grid--ignite.no-data { |
| position: relative; |
| |
| padding: 16px 51px; |
| |
| border-radius: 0 0 4px 4px; |
| |
| font-style: italic; |
| line-height: 16px; |
| } |
| |
| .ui-grid { |
| input[type="text"].ui-grid-filter-input { |
| font-weight: normal; |
| } |
| } |
