| // 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. |
| |
| /* theme.scss */ |
| |
| body { |
| font-family: $font_0, $font_1; |
| color: $color_ironside_gray_approx; |
| overflow-x: hidden; |
| } |
| |
| header.atlas-header { |
| background-color: $white; |
| border-bottom: 1px $color_mystic_approx solid; |
| |
| table { |
| width: 100%; |
| } |
| |
| .navbar-nav { |
| display: table; |
| |
| li { |
| float: none; |
| display: table-cell; |
| padding: 0px 5px; |
| } |
| } |
| |
| &>table { |
| td { |
| padding: 3px 2px; |
| position: relative; |
| transition: width 0.3s !important; |
| } |
| } |
| |
| .header-menu { |
| .dropdown-menu>li>a { |
| color: $color_ironside_gray_approx; |
| |
| &:hover { |
| color: $color_jungle_green_approx; |
| } |
| |
| i { |
| padding-right: 3px; |
| } |
| } |
| |
| td>a { |
| display: inline-block; |
| color: $color_ironside_gray_approx; |
| padding: 15px 14px; |
| |
| &:hover { |
| border-bottom: 2px solid $color_jungle_green_approx; |
| padding: 14px 14px; |
| color: $color_jungle_green_approx; |
| } |
| |
| span { |
| padding: 5px; |
| } |
| |
| i { |
| font-size: 18px; |
| } |
| } |
| } |
| } |
| |
| #new-page-wrapper { |
| height: calc(100vh - 63px); |
| overflow: auto; |
| padding-top: 15px !important; |
| padding-bottom: 10px !important; |
| |
| &>div { |
| height: 100%; |
| } |
| } |
| |
| .full-parent-width { |
| height: 100%; |
| } |
| |
| .sidebar-brand { |
| padding-left: 6px !important; |
| |
| .logo { |
| height: 42px; |
| padding: 6px; |
| } |
| } |
| |
| .main-search { |
| .form-control { |
| border: none; |
| border-left: 1px $color_mystic_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) |
| border-radius: 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: none; |
| height: 60px; |
| font-size: 18px; |
| font-style: italic; |
| } |
| |
| .input-group-addon { |
| font-size: 20px; |
| color: $color_bombay_approx; |
| background: none; |
| border: none; |
| } |
| } |
| |
| .close { |
| font-size: 2em; |
| } |
| |
| #sidebar-wrapper { |
| background: $color_tuna_approx; |
| |
| #sideNav-wrapper { |
| color: $white; |
| font-size: 16px !important; |
| |
| .well { |
| background: transparent; |
| border: 1px solid #666363; |
| overflow: hidden; |
| @include clearfix(); |
| } |
| |
| .tab-content>.tab-pane.active { |
| padding: 18px; |
| } |
| } |
| } |
| |
| .page-title { |
| padding: 0px 15px 0px 15px; |
| |
| .title { |
| padding-top: 0; |
| margin-top: 0; |
| } |
| |
| h1 { |
| &.title { |
| word-break: break-all; |
| } |
| |
| // margin-top: 50px; |
| margin-bottom: 10px; |
| font-weight: 600; |
| @include ellipsis(); |
| max-width: 91%; |
| display: inline-block; |
| |
| small { |
| position: relative; |
| bottom: 5px; |
| margin-left: 15px; |
| padding-left: 15px; |
| border-left: 1px $color_mystic_approx solid; |
| color: $color_bombay_approx; |
| font-size: 40%; |
| font-weight: 600; |
| text-transform: uppercase; |
| } |
| } |
| |
| .sub-title { |
| margin-bottom: 40px; |
| } |
| } |
| |
| .sm-title { |
| line-height: 30px; |
| } |
| |
| .md-title { |
| line-height: 34px; |
| } |
| |
| .lg-title { |
| line-height: 40px; |
| } |
| |
| a { |
| color: $color_jungle_green_approx; |
| cursor: pointer; |
| |
| &:focus { |
| color: $color_puerto_rico_approx; |
| text-decoration: none; |
| outline: none; |
| cursor: pointer; |
| } |
| |
| &:hover { |
| color: $color_puerto_rico_approx; |
| text-decoration: none; |
| cursor: pointer; |
| } |
| } |
| |
| .cursor-default, |
| .cursor-default a { |
| cursor: default; |
| } |
| |
| .blue-link { |
| color: $color_havelock_blue_approx; |
| |
| &:focus { |
| color: $color_havelock_blue_approx; |
| text-decoration: none; |
| outline: none; |
| } |
| |
| &:hover { |
| color: $color_havelock_blue_approx; |
| text-decoration: underline; |
| } |
| } |
| |
| a[href^="#!/"]:not(.btn, .not-blue-link) { |
| @extend .blue-link; |
| } |
| |
| th { |
| text-transform: capitalize; |
| } |
| |
| ul { |
| list-style: none; |
| } |
| |
| hr[size="10"] { |
| margin: 10px 0px; |
| } |
| |
| .table { |
| margin-bottom: 2px; |
| background-color: $white; |
| max-width: none; |
| |
| .table { |
| width: auto; |
| } |
| } |
| |
| .card { |
| background: $white none repeat scroll 0 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: 0 1px 3px $black_30; |
| margin-bottom: 30px; |
| } |
| |
| // Colors Class |
| .white-bg { |
| background-color: $white; |
| padding: 30px 0; |
| } |
| |
| .gray-text { |
| color: $color_star_dust_approx; |
| } |
| |
| .gray-bg { |
| background-color: $color_white_lilac_approx; |
| } |
| |
| .comment-input { |
| background-color: $color_white_lilac_approx; |
| padding: 20px; |
| font-size: 16px; |
| margin-bottom: 20px; |
| } |
| |
| .comment-box { |
| padding: 25px 0; |
| margin-top: 25px; |
| border-top: 1px $color_mystic_approx solid; |
| |
| .comment { |
| margin-bottom: 25px; |
| } |
| |
| .author { |
| color: $color_keppel_approx; |
| margin-bottom: 0; |
| } |
| |
| .date { |
| color: $color_star_dust_approx; |
| } |
| } |
| |
| .col-sm-custom { |
| margin: 15px 25px 0px; |
| position: relative; |
| } |
| |
| .no-padding { |
| padding: 0px !important; |
| } |
| |
| .no-padding-bottom { |
| padding-bottom: 0px !important; |
| } |
| |
| .no-padding-top { |
| padding-top: 0px !important; |
| } |
| |
| .no-padding-left { |
| padding-left: 0px !important; |
| } |
| |
| .no-padding-right { |
| padding-right: 0px !important; |
| } |
| |
| .no-margin { |
| margin: 0px !important; |
| } |
| |
| .no-margin-bottom { |
| margin-bottom: 0px !important; |
| } |
| |
| .no-margin-top { |
| margin-top: 0px !important; |
| } |
| |
| .no-margin-left { |
| margin-left: 0px !important; |
| } |
| |
| .no-margin-right { |
| margin-right: 0px !important; |
| } |
| |
| .no-border { |
| border: none !important; |
| } |
| |
| .no-pointer { |
| pointer-events: none; |
| } |
| |
| .position-relative { |
| position: relative; |
| } |
| |
| .pagination-box { |
| margin-top: 15px; |
| } |
| |
| .ellipsis-with-margin { |
| @include ellipsis(); |
| margin-bottom: 10px; |
| } |
| |
| .ellipsis { |
| @include ellipsis(); |
| } |
| |
| .readOnlyLink { |
| @include ellipsis(); |
| |
| .deleteBtn { |
| padding: 0px 5px; |
| } |
| |
| a { |
| color: $delete_link !important; |
| } |
| } |
| |
| .add-seperator { |
| margin-bottom: 10px; |
| border-bottom: 1px solid $color_mirage_approx; |
| padding-bottom: 10px; |
| } |
| |
| .legend-sm { |
| font-size: 17px; |
| } |
| |
| .errorClass { |
| border: 1px solid red !important; |
| box-shadow: none !important; |
| } |
| |
| .inline-content { |
| >.inline { |
| display: inline-block; |
| |
| &+.inline { |
| margin-left: 5px; |
| } |
| } |
| } |
| |
| .inline-content-fl { |
| @extend .inline-content; |
| |
| >.inline { |
| display: block; |
| float: left; |
| } |
| } |
| |
| .inline-content-fr { |
| @extend .inline-content-fl; |
| |
| >.inline { |
| float: right; |
| |
| &+.inline { |
| margin-right: 5px; |
| } |
| } |
| } |
| |
| .has-error { |
| |
| .select2-selection--single, |
| .select2-selection--multiple { |
| border-color: $color_apple_blossom_approx; |
| } |
| } |
| |
| .search-entity-icon-box { |
| padding: 10px; |
| border-radius: 50%; |
| width: 25px; |
| height: 25px; |
| |
| img { |
| width: 25px; |
| height: 25px; |
| cursor: default; |
| } |
| } |
| |
| .entity-icon-box { |
| display: inline-block; |
| background: #cee0fa; |
| padding: 10px; |
| border-radius: 50%; |
| min-width: 76.25px; |
| min-height: 70px; |
| |
| &.disabled { |
| background: #e3e3e3; |
| } |
| |
| img { |
| height: 50px; |
| } |
| } |
| |
| .ui-menu.ui-widget-content.ui-autocomplete { |
| box-shadow: 0px 11px 30px -8px grey; |
| max-width: 60% !important; |
| max-height: 70vh; |
| overflow-y: auto; |
| /* prevent horizontal scrollbar */ |
| overflow-x: hidden; |
| |
| .ui-autocomplete-category { |
| padding: 5px 15px; |
| color: #acacac; |
| text-transform: capitalize; |
| } |
| |
| li.empty { |
| padding: 5px 2px; |
| line-height: 45px; |
| |
| span.empty-message { |
| padding: 10px; |
| } |
| } |
| |
| .ui-menu-item { |
| padding: 2px 2px; |
| color: $color_ironside_gray_approx; |
| |
| &.with-icon { |
| img { |
| height: 25px; |
| width: 30px; |
| margin-right: 10px; |
| background: none; |
| } |
| } |
| |
| span.searched-term { |
| display: inline-block; |
| padding: 0; |
| font-weight: bold; |
| color: $black !important; |
| } |
| |
| .ui-state-active { |
| margin: 0px; |
| border: none; |
| background: #cee0fa; |
| color: $black !important; |
| } |
| |
| a, |
| span { |
| padding: 6px 10px; |
| display: block; |
| color: inherit !important; |
| } |
| } |
| } |
| |
| .tooltip-inner { |
| max-width: none; |
| color: #2c2c2c; |
| background-color: #f9f9f9; |
| box-shadow: 0px 0px 3px 0px #8080806b; |
| } |
| |
| .tooltip.bottom .tooltip-arrow { |
| border-bottom-color: #000; |
| } |
| |
| td.searchTableName:hover { |
| .isIncomplete { |
| &.show.search-result-page { |
| i { |
| left: 7px; |
| } |
| } |
| } |
| } |
| |
| .globalsearchImgItem.isIncomplete { |
| display: inline-block !important; |
| position: relative; |
| |
| i.fa { |
| left: 10px; |
| top: 7px; |
| font-size: 12px; |
| } |
| } |
| |
| .isIncomplete { |
| &.show { |
| img { |
| opacity: .2; |
| //animation: blink 2.5s infinite; |
| } |
| |
| i.fa { |
| display: block; |
| } |
| |
| .entity-icon-box { |
| background: none; |
| |
| i.fa { |
| top: 27px; |
| font-size: 18px; |
| } |
| } |
| |
| |
| foreignObject { |
| display: block; |
| |
| i.fa { |
| font-size: 15px; |
| top: 17px; |
| left: 18.5px; |
| } |
| } |
| |
| image, |
| circle { |
| opacity: 0.2; |
| //animation: blink 2.5s infinite; |
| } |
| |
| &.search-result-page { |
| position: relative; |
| |
| i { |
| left: 13px; |
| font-size: 9px; |
| top: 5px; |
| } |
| |
| } |
| |
| } |
| |
| foreignObject { |
| display: none; |
| } |
| |
| i.fa { |
| color: #898989; |
| display: none; |
| text-align: center; |
| font-size: 16px; |
| top: 0; |
| position: absolute; |
| z-index: 1; |
| left: calc(50% - 8px); |
| } |
| } |
| |
| |
| .dropdown-menu.multi-level { |
| .dropdown-submenu { |
| position: relative; |
| |
| &>a:after { |
| display: none; |
| content: " "; |
| width: 0; |
| height: 0; |
| border-color: transparent; |
| border-style: solid; |
| border-width: 5px 5px 5px 0px; |
| border-right-color: #ccc; |
| position: absolute; |
| left: 8px; |
| top: calc(50% - 5px); |
| } |
| |
| &>a:hover:after { |
| display: block; |
| } |
| |
| &>.dropdown-menu { |
| top: 0; |
| left: -100%; |
| width: 100%; |
| margin-top: -6px; |
| margin-left: -1px; |
| -webkit-border-radius: 0 6px 6px 6px; |
| -moz-border-radius: 0 6px 6px; |
| border-radius: 0 6px 6px 6px; |
| } |
| |
| &:hover>.dropdown-menu { |
| display: table; |
| } |
| |
| } |
| } |
| |
| .select2-results__option { |
| &.select2-results__option--highlighted { |
| .option-title-light { |
| color: #eaeaea; |
| } |
| } |
| |
| .option-title-light { |
| font-size: 12px; |
| color: #a4a4a4; |
| } |
| |
| |
| } |
| |
| .dropzone { |
| border-radius: 10px; |
| border: 2px dashed $color_havelock_blue_approx; |
| |
| .dz-default.dz-message { |
| font-weight: 500; |
| font-size: 20px; |
| } |
| |
| &.single-file-center { |
| .dz-file-preview { |
| margin-left: calc(50% - 68px); |
| } |
| } |
| } |
| |
| .dropzone-modal { |
| .modal-body { |
| background: $color_white_lilac_approx; |
| } |
| } |