| /*! |
| * 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. |
| */ |
| |
| /* material buttons */ |
| .mat-raised-button { |
| &.butt { |
| width: 160px; |
| padding: 0 20px; |
| border-radius: 0; |
| font-style: normal; |
| font-weight: 600; |
| font-size: 15px; |
| font-family: 'Open Sans', sans-serif; |
| color: #577289; |
| |
| i { |
| margin: 0 5px 0 0; |
| font-size: 20px; |
| vertical-align: sub; |
| } |
| |
| span { |
| i { |
| margin: 0 5px 0 0; |
| font-size: 20px; |
| vertical-align: sub; |
| } |
| } |
| |
| &.mini { |
| width: 80px; |
| } |
| |
| &.action { |
| width: 140px; |
| } |
| |
| &.butt-success { |
| background-color: #49af38; |
| margin-left: 25px; |
| color: #fff; |
| |
| &.mini { |
| margin-left: 5px; |
| width: 80px; |
| } |
| } |
| |
| &.butt-create { |
| color: #35afd5; |
| |
| &:disabled { |
| color: #577289 !important; |
| } |
| } |
| |
| &:disabled { |
| cursor: not-allowed; |
| opacity: 0.6; |
| } |
| |
| &.butt-generate { |
| color: #35afd5; |
| width: 170px; |
| |
| &:active { |
| box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); |
| } |
| } |
| } |
| } |
| |
| .selector-wrapper { |
| display: flex; |
| align-self: center; |
| width: 100%; |
| height: 36px; |
| padding-left: 10px; |
| font-family: 'Open Sans', sans-serif; |
| font-size: 15px; |
| font-weight: 300; |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| |
| mat-form-field { |
| width: 100%; |
| |
| .mat-form-field-wrapper { |
| padding-bottom: 0; |
| } |
| |
| .mat-icon { |
| font-size: 20px; |
| } |
| |
| .caret { |
| width: 40px; |
| height: 40px; |
| color: #4ab8dc; |
| border: none; |
| border-left: 1px solid #ececec; |
| background-color: #fff; |
| position: absolute; |
| right: 0; |
| top: 0px; |
| cursor: pointer; |
| |
| &.not-allowed { |
| background-color: #dcdcdc; |
| .mat-select-placeholder { |
| cursor: not-allowed; |
| } |
| } |
| } |
| } |
| } |
| |
| .multiple-select { |
| border-bottom: 1px solid #dedbdb; |
| padding: 0; |
| |
| a { |
| display: inline-block; |
| width: 50%; |
| padding: 0 15px; |
| text-align: center; |
| vertical-align: middle; |
| color: #575757; |
| cursor: pointer; |
| |
| i { |
| vertical-align: sub; |
| font-size: 20px; |
| } |
| |
| &:hover { |
| color: #4eaf3e; |
| background: #f9fafb; |
| } |
| |
| &.deselect { |
| &:hover { |
| color: #f1696e; |
| } |
| } |
| } |
| } |
| |
| .mat-button-focus-overlay { |
| background-color: rgba(255, 0, 0, 0) !important; |
| } |
| |
| .mat-button-ripple.mat-button-ripple-round.mat-ripple { |
| border-radius: 0; |
| } |
| |
| .ticker-wrap .mat-button-ripple.mat-button-ripple-round.mat-ripple { |
| border-radius: 50%; |
| } |
| |
| .mat-option { |
| font-family: 'Open Sans', sans-serif; |
| |
| .mat-option-text { |
| color: #607D8B; |
| font-size: 15px; |
| } |
| |
| &:hover { |
| .mat-option-text { |
| color: #35afd5; |
| } |
| } |
| } |
| |
| .mat-option.mat-selected { |
| color: #35afd5 !important; |
| } |
| |
| /*.mat-input-placeholder.mat-focused, */ |
| .mat-input-underline .mat-input-ripple, |
| .mat-form-field-underline .mat-form-field-ripple, |
| .mat-select-underline .mat-input-underline { |
| background-color: #35afd5 !important; |
| } |
| |
| .mat-input-placeholder.mat-focused, |
| .mat-select:focus:not(.mat-select-disabled) .mat-select-trigger, |
| .mat-select:focus:not(.mat-select-disabled) .mat-select-arrow, |
| .mat-select:focus:not(.mat-select-disabled) .mat-select-underline { |
| color: #35afd5 !important; |
| } |
| |
| .mat-select:focus:not(.mat-select-disabled) .mat-select-underline { |
| background-color: #35afd5 !important; |
| } |
| |
| .mat-select-placeholder { |
| font-size: 14px; |
| } |
| |
| .mat-select-disabled{ |
| .mat-select-placeholder { |
| cursor: not-allowed; |
| } |
| |
| } |
| |
| .mat-select-disabled + .caret { |
| cursor: not-allowed !important; |
| } |
| |
| .mat-input-placeholder { |
| font-weight: 400; |
| } |
| |
| .mat-datepicker-toggle-active { |
| color: #2dadd7; |
| } |
| |
| /* grid filtering */ |
| .filter-row .dropdown-multiselect button, |
| .filter-row input[type='text'] { |
| font-size: 14px; |
| height: 34px; |
| } |
| |
| span.mat-slide-toggle-content { |
| // font: 100 16px/24px 'Open Sans', sans-serif; |
| font-style: normal; |
| font-weight: 100; |
| font-size: 16px; |
| line-height: 24px; |
| font-family: 'Open Sans', sans-serif; |
| } |
| |
| .backup-dialog .mat-slide-toggle, |
| .scheduler-dialog .mat-slide-toggle { |
| width: 100%; |
| } |
| |
| #backup-options .hold-block mat-slide-toggle { |
| display: initial; |
| } |
| |
| #backup-options .hold-block mat-slide-toggle .mat-slide-toggle-label { |
| justify-content: space-between; |
| } |
| |
| .scheduler-dialog .mat-slide-toggle-label-before .mat-slide-toggle-label { |
| justify-content: flex-end; |
| } |
| |
| .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb, |
| .scheduler-dialog .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { |
| background-color: #36afd5; |
| } |
| |
| .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar, |
| .scheduler-dialog .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { |
| background-color: rgba(54, 175, 213, 0.3); |
| } |
| |
| .scheduler-dialog .mat-fab.mat-accent, |
| .mat-mini-fab.mat-accent, |
| .mat-raised-button.mat-accent { |
| background-color: #36afd5; |
| } |
| |
| .mat-slide-toggle.mat-checked .mat-ripple-element { |
| background-color: #36afd5; |
| } |
| |
| .mat-calendar-body-cell-content.mat-calendar-body-selected { |
| background: #36afd5; |
| } |
| |
| .mat-focused .mat-form-field-label { |
| color: #36afd5 !important; |
| } |
| |
| .break-tooltip { |
| white-space: pre-line !important; |
| word-break: break-all; |
| } |
| |
| .create-cluster, |
| .project-form, |
| .create-environment, |
| .selection, |
| .manage-roles{ |
| .mat-select-value{ |
| overflow: visible; |
| } |
| .mat-form-field-label { |
| line-height: 21px !important; |
| font-size: 15px !important; |
| |
| &:not(.mat-form-field-empty) { |
| color: transparent !important; |
| } |
| } |
| } |
| |
| .manage-roles, |
| .project-form, |
| .selection { |
| .mat-form-field { |
| width: 100%; |
| } |
| |
| .inner-step { |
| .mat-select-value { |
| width: 96%; |
| } |
| } |
| |
| .list-selected { |
| .mat-chip-list { |
| .mat-chip-list-wrapper { |
| overflow-y: auto; |
| max-height: 130px; |
| } |
| } |
| } |
| |
| .mat-reset { |
| .mat-form-field { |
| overflow: hidden; |
| |
| .mat-form-field-wrapper { |
| |
| .mat-form-field-infix { |
| width: 275px; |
| border: 0; |
| font-family: 'Open Sans', sans-serif; |
| font-size: 15px; |
| font-weight: 300; |
| padding-top: 10px; |
| |
| .mat-select-value { |
| max-width: inherit; |
| } |
| |
| .mat-select-value-text { |
| span { |
| color: #607d8b; |
| } |
| } |
| } |
| |
| .mat-form-field-underline { |
| display: none; |
| } |
| |
| .mat-select-arrow { |
| color: transparent !important; |
| } |
| |
| .mat-form-field-label { |
| padding-top: 0; |
| color: #607d8b; |
| |
| mat-label { |
| vertical-align: middle; |
| } |
| } |
| |
| .mat-select { |
| &:focus { |
| .mat-input-underline { |
| .mat-input-ripple { |
| background-color: transparent !important; |
| } |
| } |
| |
| &:not(.mat-select-disabled) { |
| .mat-select-arrow { |
| color: transparent; |
| } |
| } |
| } |
| } |
| } |
| |
| .mat-input-wrapper.mat-form-field-wrapper .mat-form-field-underline { |
| display: none; |
| } |
| } |
| } |
| |
| .mat-form-field-type-mat-chip-list { |
| width: 100%; |
| } |
| |
| .mat-step-header { |
| .mat-step-icon { |
| background-color: #36afd5; |
| } |
| } |
| |
| .mat-chip { |
| background-color: rgba(47, 174, 215, 0.2) !important; |
| color: #687e96; |
| max-width: 385px !important; |
| } |
| |
| .roles { |
| |
| .selector-wrapper, |
| .selector-wrapper-edit { |
| .mat-select-trigger { |
| width: 100%; |
| display: flex; |
| max-width: 500px; |
| } |
| } |
| } |
| } |
| |
| mat-horizontal-stepper { |
| .mat-step-header { |
| .mat-step-icon { |
| background-color: #36afd5; |
| } |
| |
| .mat-step-label { |
| font-family: 'Open Sans', sans-serif; |
| font-size: 15px; |
| font-weight: 300; |
| } |
| } |
| |
| &.stepper { |
| margin-top: 10px; |
| |
| .inner-step { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 5px; |
| |
| input { |
| width: 100%; |
| align-self: center; |
| } |
| |
| .caret { |
| i { |
| margin-top: 3px; |
| } |
| } |
| } |
| |
| .text-center { |
| button { |
| &:not(:last-child) { |
| margin-right: 5px; |
| } |
| } |
| } |
| |
| &.roles { |
| height: 190px; |
| flex-direction: column; |
| text-align: center; |
| |
| .inner-step { |
| height: 70px; |
| |
| input { |
| width: 490px; |
| } |
| } |
| } |
| } |
| } |
| |
| .multiple-select { |
| border-bottom: 1px solid #dedbdb; |
| padding: 0 !important; |
| |
| a { |
| display: inline-block; |
| width: 50%; |
| padding: 0 15px; |
| vertical-align: middle; |
| color: #575757; |
| cursor: pointer; |
| |
| i { |
| vertical-align: sub; |
| font-size: 20px; |
| } |
| |
| &:hover { |
| color: #4eaf3e; |
| background: #f9fafb; |
| } |
| |
| &.deselect { |
| &:hover { |
| color: #f1696e; |
| } |
| } |
| } |
| |
| mat-pseudo-checkbox { |
| display: none; |
| } |
| |
| &.empty { |
| margin-left: 15px; |
| } |
| } |
| |
| .dashboard_table { |
| &.reporting { |
| .dropdown-multiselect { |
| button { |
| font-size: 13px; |
| padding-left: 10px; |
| } |
| } |
| } |
| } |
| |
| .mat-primary { |
| .mat-pseudo-checkbox-checked { |
| background: #00bcd4; |
| } |
| } |
| |
| .mat-icon-button .mat-icon, |
| .mat-icon-button i { |
| line-height: 1 !important; |
| font-size: 18px; |
| } |
| |
| .error-modalbox { |
| overflow: hidden; |
| |
| .mat-dialog-container { |
| overflow-x: hidden; |
| padding: 0; |
| |
| .content { |
| color: #718ba6; |
| padding: 20px 0; |
| font-size: 14px; |
| font-weight: 400; |
| text-align: center; |
| margin: 0; |
| } |
| |
| .dialog-header { |
| position: relative; |
| top: 0; |
| padding-left: 30px; |
| background: #f6fafe; |
| height: 54px; |
| line-height: 54px; |
| } |
| |
| .dialog-header h4 { |
| color: #455c74; |
| font-size: 18px; |
| font-weight: 600; |
| |
| i { |
| vertical-align: sub; |
| } |
| } |
| |
| .close { |
| position: absolute; |
| top: 0; |
| right: 0; |
| height: 50px; |
| width: 50px; |
| font-size: 24px; |
| border: 0; |
| background: none; |
| color: #577289; |
| outline: none; |
| cursor: pointer; |
| transition: all 0.45s ease-in-out; |
| } |
| |
| .close:hover { |
| color: #36afd5; |
| } |
| |
| .text-center button { |
| margin-bottom: 25px; |
| } |
| } |
| } |
| |
| .mat-table { |
| .header-row { |
| th.mat-header-cell { |
| font-family: 'Open Sans', sans-serif; |
| font-weight: 600; |
| } |
| |
| .mat-cell { |
| word-break: break-all; |
| vertical-align: top; |
| padding: 15px 5px 10px 5px; |
| |
| td { |
| vertical-align: baseline; |
| } |
| } |
| |
| tr.mat-footer-row { |
| font-weight: bold; |
| } |
| } |
| } |
| |
| mat-tab-group.mat-tab-group { |
| height: 100%; |
| |
| .mat-tab-body-wrapper { |
| height: 100%; |
| } |
| } |
| |
| mat-divider.mat-divider { |
| margin: 10px 0; |
| } |
| |
| mat-progress-bar { |
| .mat-progress-bar-fill::after { |
| background-color: #00BCD4; |
| } |
| |
| .mat-progress-bar-buffer { |
| background-color: #baf0f7; |
| } |
| } |
| .manage-roles{ |
| .mat-horizontal-content-container{ |
| overflow: visible !important; |
| } |
| } |
| |
| .filter-row-item, .label-header{ |
| box-shadow: inset 0 -1px 0 lightgrey; |
| border-bottom: none !important; |
| } |
| |