461 lines
8.8 KiB
SCSS
461 lines
8.8 KiB
SCSS
// Copyright (c) 2016 VMware, Inc. All Rights Reserved.
|
|
// This software is released under MIT license.
|
|
// The full license information can be found in LICENSE in the root directory of this project.
|
|
app-requests-modal {
|
|
z-index: 10000;
|
|
}
|
|
|
|
header.app-header {
|
|
background: #314351 !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.logo img.without-text {
|
|
width: 30px;
|
|
}
|
|
|
|
.logo img.with-text {
|
|
width: 210px;
|
|
}
|
|
|
|
.header-hamburger-trigger {
|
|
display: block;
|
|
background: transparent;
|
|
border: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.demo-expired-notice {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh !important;
|
|
width: 100vw !important;
|
|
z-index: 105;
|
|
background: rgba(33, 33, 33, .5);
|
|
|
|
.expired-details {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30px;
|
|
z-index: 110;
|
|
background: #314351;
|
|
|
|
.expired-notice {
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
|
|
.mailto {
|
|
color: #8dc53e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-container .update-key {
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
padding: 0px 10px;
|
|
background: #00000026;
|
|
}
|
|
|
|
.alert-icon-wrapper {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.nav-text {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
|
|
clr-icon {
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
header {
|
|
.header-actions {
|
|
.dropdown {
|
|
position: unset; //without it, when opening user dropdown scrollbar was displaying without reason
|
|
}
|
|
}
|
|
|
|
.nav
|
|
.nav-link {
|
|
color: #fafafa;
|
|
opacity: .9;
|
|
line-height: 1.45rem;
|
|
}
|
|
|
|
.nav .nav-link:hover {
|
|
box-shadow: inset 0 -3px 0 transparent;
|
|
transition: box-shadow .2s ease-in;
|
|
}
|
|
|
|
.nav
|
|
.nav-link:hover {
|
|
color: #fafafa;
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav .nav-link.active {
|
|
background: #61717D;
|
|
opacity: 1;
|
|
box-shadow: inset 0 -3px transparent;
|
|
// padding: 0 1rem 0 1rem;
|
|
}
|
|
|
|
.nav .nav-item {
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
|
|
.notf {
|
|
background: #16a57a;
|
|
color: #fffcfc;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn.btn-success {
|
|
border-color: #62a420;
|
|
background-color: #16a57a!important;
|
|
color: #fff;
|
|
}
|
|
.btn.btn-success:hover {
|
|
background-color: #2add39;
|
|
color: #fff;
|
|
}
|
|
|
|
.toggle-switch input[type=checkbox]:checked+label:before {
|
|
border-color: #61717D;
|
|
background-color: #61717D;
|
|
transition: .15s ease-in;
|
|
transition-property: border-color,background-color;
|
|
}
|
|
|
|
.main-container {
|
|
min-height: 100vh !important;
|
|
}
|
|
|
|
.main-container .content-container .content-area {
|
|
padding: 0rem 1rem 1rem 1rem;
|
|
}
|
|
|
|
.content-container {
|
|
z-index: 0!important;
|
|
}
|
|
|
|
.navBarResp {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.navBarResp {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
background: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
|
padding: 0 .5rem 0 1rem;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: .125rem 0 0 .125rem;
|
|
color: #95c84b;
|
|
}
|
|
|
|
|
|
|
|
.card-block, .card-footer {
|
|
padding: 10px 0px 0px 0px;
|
|
}
|
|
|
|
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
|
padding: 0rem 0rem 0rem 0rem;
|
|
}
|
|
|
|
}
|
|
::ng-deep {
|
|
.htInvalid {
|
|
background: black!important;
|
|
}
|
|
|
|
@media screen and (max-width:480px) {
|
|
h2 {
|
|
font-size: .7rem!important;
|
|
|
|
}
|
|
h3 {
|
|
font-size: .7rem;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0rem 1rem 0rem 1rem;
|
|
}
|
|
|
|
.btn-primary .btn, .btn.btn-primary {
|
|
border-color: #314351;
|
|
background-color: #314351;
|
|
color: #fff;
|
|
}
|
|
.btn {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
-webkit-appearance: none!important;
|
|
border-radius: .125rem;
|
|
border: 1px solid;
|
|
min-width: 3rem;
|
|
max-width: 15rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
line-height: 1.5rem;
|
|
letter-spacing: .12em;
|
|
font-size: .5rem;
|
|
font-weight: 500;
|
|
height: 1.5rem;
|
|
padding: 0 .5rem;
|
|
border-color: #314351;
|
|
background-color: transparent;
|
|
color: #314351;
|
|
}
|
|
|
|
.btn.btn-outline {
|
|
border-color: #314351;
|
|
background-color: transparent;
|
|
color: #314351;
|
|
}
|
|
|
|
.btn.btn-outline:hover {
|
|
border-color: #314351;
|
|
background-color: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.btn-success-outline:hover {
|
|
background-color: #5ea71f;
|
|
color: #fff7f7;
|
|
border-color: #9a9696;
|
|
}
|
|
// .btn.btn-success-outline {
|
|
// border-color: #266900;
|
|
// background-color: transparent;
|
|
// color: #318700;
|
|
// }
|
|
// .wtSpreader {
|
|
|
|
// }
|
|
|
|
.htMobileEditorContainer .inputs textarea {
|
|
font-size: 13pt;
|
|
border: 2px solid #485967;
|
|
border-radius: 4px;
|
|
-webkit-appearance: none;
|
|
box-shadow: none;
|
|
position: absolute;
|
|
left: 14px;
|
|
right: 0px;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 7pt;
|
|
width: 290px;
|
|
}
|
|
|
|
.htMobileEditorContainer .positionControls {
|
|
width: 333px;
|
|
position: absolute;
|
|
right: 5pt;
|
|
top: 50px;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.htMobileEditorContainer.active {
|
|
display: block;
|
|
height: 120px;
|
|
width: 350px;
|
|
}
|
|
|
|
.handsontable {
|
|
background-color: #ffffff;
|
|
// border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
}
|
|
.handsontable th {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
/* Left and right */
|
|
.ht_clone_left th {
|
|
border-right: 1px solid #ccc;
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
|
|
/* Column headers */
|
|
.ht_clone_top th {
|
|
border-top: 1px solid #ccc;
|
|
border-right: 1px solid #ccc;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.ht_clone_top_left_corner th {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
.ht_master tr:nth-of-type(odd) > td {
|
|
background-color: #f3f3f3;
|
|
border: 1px solid rgb(197, 197, 197);
|
|
border-bottom: 1px solid rgb(236, 235, 235);
|
|
// padding: 1px 1px;
|
|
}
|
|
|
|
.ht_master tr:nth-of-type(even) > td {
|
|
background-color: white;
|
|
border: 1px solid rgb(197, 197, 197);
|
|
border-bottom: 1px solid rgb(236, 235, 235);
|
|
// padding: 1px 1px;
|
|
}
|
|
|
|
.wtBorder {
|
|
background-color: #495A67!important;
|
|
}
|
|
|
|
.handsontable .handsontable.ht_clone_top .wtHider {
|
|
padding: 0 0 0px 0!important;
|
|
margin: 0px;
|
|
border-bottom: 3px solid #d6d3d3;
|
|
}
|
|
|
|
.content-container {
|
|
background: #F5F6FF;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.125rem 0 0 #d7d7d7;
|
|
border-radius: .0rem;
|
|
border: 1px solid transparent;
|
|
// min-height: calc(100vh - 150px);
|
|
}
|
|
|
|
.datagrid-compact, .datagrid-history{
|
|
.datagrid {
|
|
border-collapse: separate;
|
|
border: 1px solid transparent;
|
|
border-radius: .125rem;
|
|
background-color: #fff;
|
|
color: #565656;
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
padding: 15px 15px 50px 15px;
|
|
}
|
|
.datagrid-foot {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
height: 1.5rem;
|
|
padding: 0 .5rem;
|
|
line-height: calc(1.5rem - 3px);
|
|
font-size: .45833rem;
|
|
background-color: #fff;
|
|
border-top: 1px solid #ccc;
|
|
border-radius: 0px;
|
|
// border-radius: 0 0 .125rem .125rem;
|
|
}
|
|
.datagrid-footer {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 2px;
|
|
}
|
|
.datagrid .datagrid-head {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: .083333rem;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
background: #f5f6ff;
|
|
padding: .5rem 0;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
|
|
min-width: 5rem;
|
|
max-width: 15rem;
|
|
border-radius: .125rem;
|
|
visibility: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.table {
|
|
border-collapse: separate;
|
|
border: 1px solid transparent;
|
|
border-radius: 0px;
|
|
background-color: #fff;
|
|
color: #565656;
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.table th {
|
|
font-size: .45833rem;
|
|
font-weight: 600;
|
|
letter-spacing: .03em;
|
|
background-color: #fff;
|
|
vertical-align: bottom;
|
|
border-bottom: 1px solid #ccc;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 2px solid #e4e4e4;
|
|
padding: 0 0 .5rem 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.main-container .content-container {
|
|
min-height: 0px;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.app-loading {
|
|
.loading-logo {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
} |