343 lines
6.7 KiB
SCSS
343 lines
6.7 KiB
SCSS
// @import "~@covalent/core/theming/all-theme";
|
|
@import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
|
|
@import "@angular/material/prebuilt-themes/indigo-pink.css";
|
|
@import '../node_modules/@swimlane/ngx-datatable/index.css';
|
|
@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss';
|
|
@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';
|
|
|
|
//Material-Bootstrap configuration
|
|
@import "assets/scss/bootstrap-material";
|
|
|
|
// Guided Tour style
|
|
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
|
|
|
|
//TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
|
|
/* in-flight clone */
|
|
.gu-mirror {
|
|
position: fixed !important;
|
|
margin: 0 !important;
|
|
z-index: 9999 !important;
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
|
filter: alpha(opacity=80);
|
|
pointer-events: none;
|
|
}
|
|
/* high-performance display:none; helper */
|
|
.gu-hide {
|
|
left: -9999px !important;
|
|
}
|
|
/* added to mirrorContainer (default = body) while dragging */
|
|
.gu-unselectable {
|
|
-webkit-user-select: none !important;
|
|
-moz-user-select: none !important;
|
|
-ms-user-select: none !important;
|
|
user-select: none !important;
|
|
}
|
|
/* added to the source element while its mirror is dragged */
|
|
.gu-transit {
|
|
opacity: 0;
|
|
border: 1px dashed red;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
|
filter: alpha(opacity=20);
|
|
}
|
|
|
|
// Custom Theme
|
|
// @import "./assets/scss/blue-theme.scss";
|
|
|
|
// Define a theme.
|
|
// $primary: mat-palette($app-blue-theme-primary-palette);
|
|
// $accent: mat-palette($mat-pink, A200, A100, A400);
|
|
// $theme: mat-light-theme($primary, $accent);
|
|
|
|
// Include all theme styles for the components.
|
|
// @include angular-material-theme($theme);
|
|
// @include covalent-theme($theme);
|
|
|
|
|
|
:root {
|
|
--primary-color: #129d99;
|
|
--primary-color-2: #23bcba;
|
|
--primary-color-3: #00b29f;
|
|
--secondary-color: #f7dd72;
|
|
}
|
|
|
|
.cc-btn {
|
|
background-color: var(--primary-color-3) !important;
|
|
}
|
|
|
|
.snackbar-warning {
|
|
background-color: #f39010;
|
|
color: #f3efef;
|
|
}
|
|
|
|
.snackbar-success {
|
|
background-color: #109204;
|
|
color: #f3efef;
|
|
}
|
|
|
|
.snackbar-error {
|
|
background-color: #cf1407;
|
|
color: #111010;
|
|
}
|
|
|
|
.lightblue-btn {
|
|
background-color: var(--primary-color) !important;
|
|
color: white !important;
|
|
// background-color: rgba(0, 112, 192, 1) !important;
|
|
}
|
|
|
|
.listing-item {
|
|
margin-top: 0.5em;
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
border: 3px solid #f2f2f2;
|
|
|
|
.title {
|
|
color: black;
|
|
}
|
|
|
|
.grant-title {
|
|
color: rgb(93, 125, 173);
|
|
}
|
|
|
|
.gray-icon {
|
|
color: rgb(191, 191, 191);
|
|
}
|
|
|
|
.chip {
|
|
padding: 0.1em 1em;
|
|
border-radius: 10em;
|
|
background-color: #0d7489;
|
|
// background-color: rgba(0, 112, 192, 1);
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
max-width: 160px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.bordered-chip {
|
|
padding: 0.1em 1em;
|
|
border: 0.1em solid rgb(218, 227, 243);
|
|
border-radius: 10em;
|
|
background-color: rgb(236, 241, 249);
|
|
color: var(--primary-color);
|
|
// color: rgba(0, 112, 192, 1);
|
|
// color: rgb(68, 114, 196);
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
max-width: 160px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.squared-chip {
|
|
padding: 0.1em 1em;
|
|
border: 0.1em solid rgb(236, 241, 249);
|
|
border-radius: 0.5em;
|
|
background-color: rgb(246, 246, 246);
|
|
color: rgb(127, 127, 127);
|
|
max-width: 160px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
mat-icon {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.mr-5 {
|
|
margin-right: 2rem !important;
|
|
}
|
|
|
|
.info {
|
|
background-color: #f6f6f6;
|
|
padding: 8px 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.info p {
|
|
margin-bottom: 0px;
|
|
color: rgb(37, 35, 140);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chip p {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
// .draft-bookmark {
|
|
// color: #e7e6e6;
|
|
// display: inline;
|
|
// position: absolute;
|
|
// padding-top: 3px;
|
|
// }
|
|
|
|
// .finalized-bookmark {
|
|
// color: #08bd63;
|
|
// // color: #92d050;
|
|
// display: inline;
|
|
// position: absolute;
|
|
// padding-top: 3px;
|
|
// }
|
|
|
|
h4 span {
|
|
color: #089dbb;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.listing {
|
|
.mat-card {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.col-9 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.gray-container {
|
|
background: linear-gradient(180deg, #f6f6f6, #fff);
|
|
margin: 5px 0px;
|
|
}
|
|
|
|
.main-content {
|
|
background-color: #f5f5f5;
|
|
// padding-top: 5rem;
|
|
padding-bottom: 3rem;
|
|
// padding-left: 3.31rem;
|
|
padding-left: 1rem;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
::ng-deep .mat-form-field-wrapper {
|
|
background-color: white !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
|
padding: 0.3rem 0rem 0.6rem 0rem !important;
|
|
}
|
|
|
|
.custom-userbox > mat-dialog-container {
|
|
background-color: transparent;
|
|
padding: 0rem;
|
|
overflow: initial;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@keyframes slide {
|
|
100% {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.dialog-side-panel {
|
|
position: fixed !important;
|
|
bottom: 0;
|
|
top: 0;
|
|
right: -100vw;
|
|
width: 100vw;
|
|
height: 100%;
|
|
animation: slide .3s forwards;
|
|
// animation-delay: .3s;
|
|
|
|
.mat-dialog-container {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.text-primary-blue{
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
|
|
.translateY-3{
|
|
transform:translateY(3px);
|
|
}
|
|
|
|
// CSS for <angular-editor> (@kolkov/angular-editor)
|
|
.form-field-subscript-wrapper {
|
|
font-size: 75% !important;
|
|
//padding-left: 12px;
|
|
padding: 0 1em;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
//.angular-editor-textarea {
|
|
// min-height: 150px !important;
|
|
//}
|
|
//
|
|
//.editor-wrapper {
|
|
// border: 1px solid transparent !important;
|
|
// border-radius: 5px;
|
|
//}
|
|
//
|
|
//.angular-editor-toolbar {
|
|
// margin-left: 1px;
|
|
// margin-right: 1px;
|
|
//}
|
|
//
|
|
//.angular-editor-textarea, .angular-editor-toolbar {
|
|
// border: none !important;
|
|
//}
|
|
//
|
|
//.angular-editor {
|
|
// border: 1px solid #ddd !important;
|
|
// border-radius: 5px;
|
|
// background-color: #fff;
|
|
//}
|
|
//
|
|
//.editor-wrapper:hover, .angular-editor:hover {
|
|
// border: 1px solid #000 !important;
|
|
//}
|
|
//
|
|
//.editor-wrapper:focus-within, .angular-editor:focus-within {
|
|
// border: 1px solid #034459 !important;
|
|
//}
|
|
//
|
|
//.required.editor-wrapper, .required .editor .angular-editor {
|
|
// border: 1px solid #f44336 !important;
|
|
//}
|
|
// end of CSS for <angular-editor> (@kolkov/angular-editor)
|
|
|
|
/* Transition Group */
|
|
.list-move {
|
|
transition: transform 1s;
|
|
}
|
|
|
|
.colums-gapped{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.info-grid{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1rem;
|
|
.info-grid-label{
|
|
padding-top: 1rem;
|
|
min-width: 14rem;
|
|
padding-left: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
.info-grid-value{
|
|
display: flex;
|
|
&>*{
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.datatable-body-cell { display: flex; margin: auto; } |