feat(dark mode): clarity optimizations
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 50s
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 50s
This commit is contained in:
Mihajlo Medjedovic
parent
cb9a5f0eb4
commit
afa7e380aa
|
|
@ -201,13 +201,13 @@ header {
|
|||
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.btn.btn-icon {
|
||||
.btn.btn-icon.btn-dimmed {
|
||||
color: #7295ae;
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.btn.btn-icon {
|
||||
.btn.btn-icon.btn-dimmed {
|
||||
color: #314351;
|
||||
}
|
||||
|
||||
|
|
@ -264,6 +264,8 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
$darkBorderColor: #697c85;
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.ht_master tr:nth-of-type(odd) > td {
|
||||
filter: brightness(1.2);
|
||||
|
|
@ -271,6 +273,30 @@ header {
|
|||
|
||||
.ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
|
||||
background-color: #2d4048;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable td {
|
||||
// border-right: 1px solid #697c85;
|
||||
// border-bottom: 1px solid #697c85;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable tr:first-child th, .handsontable tr:first-child td {
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable .handsontable.ht_clone_top .wtHider {
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable .changeType {
|
||||
background-color: #3c5662;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontableInput {
|
||||
background-color: #708b98;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@
|
|||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline focusable"
|
||||
class="btn btn-outline focusable mr-5i"
|
||||
(click)="currentRecord!.noLinkOption = false; closeRecordEdit()"
|
||||
>
|
||||
Cancel
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
app-soft-select {
|
||||
display: block;
|
||||
width: 224px;
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
color: #000;
|
||||
padding: calc(.25rem + 2px) .5rem;
|
||||
|
|
@ -49,7 +48,6 @@
|
|||
input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
|
||||
&:focus {
|
||||
background: none;
|
||||
|
|
@ -132,7 +130,6 @@
|
|||
|
||||
clr-input-container {
|
||||
width: 224px;
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
color: #000;
|
||||
padding: calc(.25rem + 2px) .5rem;
|
||||
|
|
|
|||
|
|
@ -165,11 +165,11 @@
|
|||
class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
|
||||
>
|
||||
<div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 backBtn">
|
||||
<span class="btn btn-sm btn-icon" [routerLink]="['/home']">
|
||||
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
|
||||
table selection
|
||||
<span class="btn btn-sm btn-icon btn-dimmed" [routerLink]="['/home']">
|
||||
<clr-icon shape="caret" dir="left" size="20"></clr-icon>
|
||||
Back to table selection
|
||||
</span>
|
||||
<span (click)="viewboxManager()" class="btn btn-sm btn-icon viewbox-open">
|
||||
<span (click)="viewboxManager()" class="btn btn-sm btn-icon btn-dimmed viewbox-open">
|
||||
<clr-icon shape="view-cards" size="20"></clr-icon>
|
||||
Viewboxes
|
||||
</span>
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
<ng-container *ngIf="hotTable.readOnly && !uploadPreview">
|
||||
<button
|
||||
type="button"
|
||||
class="btnView btn btn-sm btn-icon btn-block"
|
||||
class="btnView btn btn-sm btn-icon btn-block btn-dimmed"
|
||||
(click)="openQb()"
|
||||
>
|
||||
<clr-icon shape="filter"></clr-icon>
|
||||
|
|
|
|||
|
|
@ -2766,8 +2766,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
|
|||
})
|
||||
|
||||
hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
|
||||
|
||||
this.currentEditRecordLoadings.push(column)
|
||||
hot.render()
|
||||
return
|
||||
|
||||
this.sasService
|
||||
.request('editors/getdynamiccolvals', data, undefined, {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export const spinnerRenderer = (
|
|||
value: any,
|
||||
cellProperties: any
|
||||
) => {
|
||||
td.classList.add('htDark')
|
||||
td.innerHTML = `${
|
||||
value ? value.toString() : ''
|
||||
} <span class="spinner spinner-sm vertical-align-middle"></span>`
|
||||
|
|
|
|||
|
|
@ -1,26 +1,61 @@
|
|||
::ng-deep body[cds-theme="dark"] {
|
||||
.group-info {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #29404b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.group-info{
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-height{
|
||||
height: 100%;
|
||||
}
|
||||
.group-info-text{
|
||||
display: inline;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
}
|
||||
.group-info{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.group-info td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.group-data{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.group-data{
|
||||
min-height: auto;
|
||||
h3, h5{
|
||||
|
|
@ -28,15 +63,12 @@
|
|||
}
|
||||
|
||||
.member-table{
|
||||
background-color: #f9f9f9;
|
||||
// background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
.member-table thead{
|
||||
background-color: #dadada;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
::ng-deep {
|
||||
body[cds-theme="dark"] {
|
||||
.clause-logic {
|
||||
background: #192a30;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
background: #263e48;
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.clause-logic {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
background: #fbf8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -9,13 +31,12 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #e9e9e9;
|
||||
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
padding: 30px 0px 20px 20px;
|
||||
background: #fbf8f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
|
@ -220,8 +241,11 @@
|
|||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
background-color: #fbf8f8;
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.line-numbers {
|
||||
border-color: #989797 !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
|
|
|
|||
|
|
@ -284,17 +284,17 @@
|
|||
>
|
||||
<span class="label label-warning">
|
||||
Changed Rows
|
||||
<span class="badge badge-warning">{{
|
||||
<span class="badge">{{
|
||||
lens.updated
|
||||
}}</span>
|
||||
</span>
|
||||
<span class="label label-success">
|
||||
Added Rows
|
||||
<span class="badge badge-success">{{ lens.new }}</span>
|
||||
<span class="badge">{{ lens.new }}</span>
|
||||
</span>
|
||||
<span class="label label-danger">
|
||||
Deleted Rows
|
||||
<span class="badge badge-danger">{{
|
||||
<span class="badge">{{
|
||||
lens.deleted
|
||||
}}</span>
|
||||
</span>
|
||||
|
|
@ -477,15 +477,15 @@
|
|||
>
|
||||
<span class="label label-warning">
|
||||
Changed Rows
|
||||
<span class="badge badge-warning">{{ lens.updated }}</span>
|
||||
<span class="badge">{{ lens.updated }}</span>
|
||||
</span>
|
||||
<span class="label label-success">
|
||||
Added Rows
|
||||
<span class="badge badge-success">{{ lens.new }}</span>
|
||||
<span class="badge">{{ lens.new }}</span>
|
||||
</span>
|
||||
<span class="label label-danger">
|
||||
Deleted Rows
|
||||
<span class="badge badge-danger">{{ lens.deleted }}</span>
|
||||
<span class="badge">{{ lens.deleted }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,19 +10,48 @@
|
|||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(146, 208, 154);
|
||||
border: 1px solid rgba(9, 77, 117, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(230, 179, 179);
|
||||
border: 1px solid rgba(70, 71, 70, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
table {
|
||||
.updatedRow {
|
||||
background: #93971e;
|
||||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(86 153 95);
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(138 90 90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
table {
|
||||
.updatedRow {
|
||||
background: #fafda8;
|
||||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(146, 208, 154);
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(230, 179, 179);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updatedRow {
|
||||
background: #fafda8;
|
||||
border: 1px solid rgba(9, 117, 9, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.input-val {
|
||||
border: 0px;
|
||||
background: #fbf8f8;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
|
|
@ -13,6 +13,29 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
body[cds-theme="dark"] {
|
||||
.datalist {
|
||||
background: #21333b;
|
||||
border: 1px solid #575757;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.datalist option {
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.datalist {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-wrapper {
|
||||
.overlay {
|
||||
position: fixed;
|
||||
|
|
@ -25,7 +48,6 @@ input {
|
|||
|
||||
.datalist {
|
||||
position: fixed;
|
||||
background: white;
|
||||
box-shadow: 0px 3px 10px -1px #0000002b;
|
||||
overflow: auto;
|
||||
z-index: 2000;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
$sidebarWidth: 272px;
|
||||
|
||||
.clr-vertical-nav .nav-link.active {
|
||||
background-color: transparent;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
clr-vertical-nav {
|
||||
width: $sidebarWidth;
|
||||
min-width: $sidebarWidth;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.input-val {
|
||||
border: 0px;
|
||||
background: #fbf8f8;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@ dc-tree {
|
|||
.add-new {
|
||||
width: 50%;
|
||||
padding-right: 5px;
|
||||
|
||||
> p {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.viewbox-limit-notice {
|
||||
|
|
@ -45,6 +49,38 @@ dc-tree {
|
|||
color: #E74C3C
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.currently-open .open-viewbox:hover {
|
||||
background: #314b57;
|
||||
}
|
||||
|
||||
.cols-list {
|
||||
background: #314b57;
|
||||
color: #fff;
|
||||
border-color: #858585;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
background: #314b57;
|
||||
border-color: #858585;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.currently-open .open-viewbox:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.cols-list {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.currently-open {
|
||||
width: 50%;
|
||||
|
||||
|
|
@ -55,10 +91,6 @@ dc-tree {
|
|||
&.selected {
|
||||
background: #3c85002e;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +212,6 @@ dc-tree {
|
|||
.cols-list {
|
||||
border: solid 1px #ccc;
|
||||
min-height: 60px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
|
@ -199,7 +230,6 @@ dc-tree {
|
|||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
|
||||
&.search:focus {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="clr-row" ng-if="loaded">
|
||||
<div class="card-block clr-col-md-6">
|
||||
<div class="card-block clr-col-md-6 no-borders">
|
||||
<div class="card-header py-5">
|
||||
<div class="card-title text-center">Basic Submitted Details</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-6 card-block">
|
||||
<div class="clr-col-md-6 card-block no-borders">
|
||||
<div class="card-header py-5">
|
||||
<div class="card-title text-center">Actions</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,58 @@
|
|||
height: 100%;
|
||||
}
|
||||
.user-info-text{
|
||||
display: inline;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.user-info {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
}
|
||||
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #29404b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.user-info {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.user-info td{
|
||||
text-align: center;
|
||||
}
|
||||
.user-data{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.user-data{
|
||||
min-height: auto;
|
||||
|
|
@ -28,7 +63,6 @@
|
|||
}
|
||||
|
||||
.user-table{
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
.user-table thead{
|
||||
|
|
@ -36,7 +70,6 @@
|
|||
}
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -323,7 +323,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-100 d-flex clr-flex-column" *ngIf="!loadingTableView">
|
||||
<div class="card no-borders h-100 d-flex clr-flex-column" *ngIf="!loadingTableView">
|
||||
<div
|
||||
*ngIf="table"
|
||||
class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
|
||||
|
|
|
|||
|
|
@ -850,6 +850,10 @@ body[cds-theme="dark"] {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
&.no-borders {
|
||||
border: 0;
|
||||
|
|
@ -1186,7 +1190,16 @@ hr.light {
|
|||
background: url('./images/caret.svg') !important;
|
||||
}
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.table-search-wrapper {
|
||||
// background: #2d4048;
|
||||
background: #21333b;
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
min-width: 170px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user