From dd728c0733c157ee11c3912b0d7f99aa7b9489cc Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 15:32:31 +0300 Subject: [PATCH 01/20] Refactored account.component.sass --- src/app/auth/account/account.component.html | 3 +- src/app/auth/account/account.component.sass | 60 +++++++-------------- 2 files changed, 20 insertions(+), 43 deletions(-) diff --git a/src/app/auth/account/account.component.html b/src/app/auth/account/account.component.html index be7b075ef..d76478ff8 100644 --- a/src/app/auth/account/account.component.html +++ b/src/app/auth/account/account.component.html @@ -61,10 +61,11 @@

Organizations

-
+
Date: Fri, 25 Aug 2023 17:12:46 +0300 Subject: [PATCH 02/20] Refactored var.sass --- src/assets/styles/var.sass | 306 +++++++++++++++++++++++-------------- 1 file changed, 191 insertions(+), 115 deletions(-) diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass index bb5d37fe9..bd50389e7 100644 --- a/src/assets/styles/var.sass +++ b/src/assets/styles/var.sass @@ -49,90 +49,121 @@ $app-color-action-list-item-inline-divider: #d0d7de7a .input-group-button vertical-align: middle + .color-border-muted border-color: $app-color-border-muted !important + .color-bg-default background-color: $app-color-canvas-overlay !important + .color-bg-subtle background-color: $app-color-canvas-subtle !important + .color-fg-success color: $app-harmonies + .color-fg-default color: $app-color-fg-default + .color-fg-muted color: $app-color-fg-muted + .link--primary color: $app-color-fg-default !important &:hover color: $app-navyBlue !important + .link--secondary color: $secondary !important &:hover color: $app-navyBlue !important -.box-title - font-size: 20px - line-height: 20px - font-weight: 600 - margin: 0 -.box-header - width: 100% - padding: 16px - margin: 0px - background-color: $app-aliceBlue - border-color: $app-color-border-default - border-style: solid - border-width: 1px - border-top-left-radius: 6px - border-top-right-radius: 6px + +.box + &-title + font-size: 20px + line-height: 20px + font-weight: 600 + margin: 0 + &-header + width: 100% + padding: 16px + margin: 0px + background-color: $app-aliceBlue + border-color: $app-color-border-default + border-style: solid + border-width: 1px + border-top-left-radius: 6px + border-top-right-radius: 6px + .min-width-0 min-width: 0 !important + .d-none display: none + .position-relative position: relative !important + .width-full width: 100% !important + .flex-auto flex: auto !important + .flex-order-2 order: 2 !important + .flex-self-stretch align-self: stretch !important + .f6 font-size: 12px !important + .color-text-tertiary color: $app-cloudy + .color-bg-tertiary background-color: $app-aliceBlue + .rounded-1 border-radius: 4px !important + .border-white-fade border-color: $app-versatileBusinessDark + .rounded-2 border-radius: 6px !important + .rounded-top-1 border-top-left-radius: 6px !important border-top-right-radius: 6px !important + .rounded-left-2 border-bottom-left-radius: 6px !important border-top-left-radius: 6px !important + .border-right-0 border-right: 0 !important + .border-right-1 border-right: 1px !important + .border-left-0 border-left: 0 !important + .border-left-1 border-left: 1px !important + .rounded-right-2 border-bottom-right-radius: 6px !important border-top-right-radius: 6px !important + .btnGroup-parent float: left height: 28px width: max-content background: none - & .btnGroup-item + .btnGroup-item border-right-width: 1px border-radius: 1px position: relative @@ -148,73 +179,97 @@ $app-color-action-list-item-inline-divider: #d0d7de7a font-size: 12px &:hover border-color: $app-color-border-default -.BtnGroup-item:first-child - border-top-left-radius: 6px - border-bottom-left-radius: 6px -.btn.btn-gray - background-color: $app-background-btn - border-color: $app-color-btn-border !important - &:hover - background-color: $app-color-btn-hover-border + +.BtnGroup-item + &:first-child + border-top-left-radius: 6px + border-bottom-left-radius: 6px + +.btn + &.btn-gray + background-color: $app-background-btn + border-color: $app-color-btn-border !important + &:hover + background-color: $app-color-btn-hover-border + .clipboard-btn height: 100% &.clipboard-btn--success border-color: $app-harmonies !important + .mr-0 margin-right: 0 !important + .mr-1 margin-right: 6px !important + .mr-2 margin-right: 8px !important + .mr-3 margin-right: 10px !important + .mr-4 margin-right: 20px !important + .ml-3 margin-left: 16px !important + .mb-n1 margin-bottom: -4px !important + .ml-n1 margin-left: -4px !important + .mr-n1 margin-right: -4px !important + .mt-n1 margin-top: -4px !important -.css-truncate.css-truncate-overflow, .css-truncate .css-truncate-overflow, .css-truncate.css-truncate-target, .css-truncate .css-truncate-target - overflow: hidden - text-overflow: ellipsis - white-space: nowrap -.hx_avatar_stack_commit .avatarStack - height: 24px - min-width: 24px -.avatarStack__body - display: flex - & .avatar - position: relative - z-index: 2 + +.css-truncate + &.css-truncate-overflow,&.css-truncate-target + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + .css-truncate-overflow,.css-truncate-target + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + +.hx_avatar_stack_commit + .avatarStack + height: 24px + min-width: 24px + +.avatarStack + position: relative + min-width: 26px + height: 20px + .avatarStack__body + position: absolute display: flex - width: 20px - height: 20px - box-sizing: content-box - margin-right: -11px - background-color: $app-color-canvas-overlay - border-right: 1px solid $app-color-canvas-overlay - border-radius: 4px - box-shadow: none - transition: margin .1s ease-in-out - & img + .avatar + position: relative + z-index: 2 + display: flex + width: 20px + height: 20px + box-sizing: content-box + margin-right: -11px + background-color: $app-color-canvas-overlay + border-right: 1px solid $app-color-canvas-overlay + border-radius: 4px + box-shadow: none + transition: margin .1s ease-in-out + img border-radius: 4px &:first-child z-index: 3 &:last-child z-index: 1 border-right: 0 -.avatarStack - position: relative - min-width: 26px - height: 20px - & .avatarStack__body - position: absolute + .avatar display: inline-block overflow: hidden @@ -224,8 +279,9 @@ $app-color-action-list-item-inline-divider: #d0d7de7a border-radius: 6px flex-shrink: 0 box-shadow: 0 0 0 1px $app-color-btn-hover-border -.avatar-user - border-radius: 50% !important + &-user + border-radius: 50% !important + .counter display: inline-block min-width: 20px @@ -239,16 +295,41 @@ $app-color-action-list-item-inline-divider: #d0d7de7a border: 1px solid $app-color-counter-border border-radius: 2em -.btn .Counter - margin-left: 2px - color: inherit - text-shadow: none - vertical-align: top - background-color: $app-color-btn-counter-bg -.btn:hover, .btn.hover, [open]>.btn +.btn + .Counter + margin-left: 2px + color: inherit + text-shadow: none + vertical-align: top + background-color: $app-color-btn-counter-bg + &:hover,&.hover + background-color: $app-color-btn-hover-bg + border-color: $app-color-btn-hover-border + transition-duration: .1s +[open]>.btn background-color: $app-color-btn-hover-bg border-color: $app-color-btn-hover-border transition-duration: .1s + +.cdk-overlay-pane + box-shadow: $app-color-shadow-large +.mat-menu-content + &:not(:empty) + padding-top: 0px !important + padding-bottom: 0px !important +.label + display: inline-block + padding: 0 7px + font-size: 12px + font-weight: 500 + line-height: 18px + border: 1px solid transparent + border-radius: 2em + border-color: $app-color-border-default + &--secondary + color: $app-color-fg-muted + border-color: $app-color-border-default + .SelectMenu-modal position: relative z-index: 99 @@ -261,35 +342,21 @@ $app-color-action-list-item-inline-divider: #d0d7de7a background-color: $app-color-canvas-overlay border: 1px solid $app-color-select-menu-backdrop-border border-radius: 12px - animation: SelectMenu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards -.cdk-overlay-pane - box-shadow: $app-color-shadow-large -.mat-menu-content:not(:empty) - padding-top: 0px !important - padding-bottom: 0px !important -.label - display: inline-block - padding: 0 7px - font-size: 12px - font-weight: 500 - line-height: 18px - border: 1px solid transparent - border-radius: 2em - border-color: $app-color-border-default -.label--secondary - color: $app-color-fg-muted - border-color: $app-color-border-default + animation: select-menu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards + .SelectMenu-header display: flex padding: 16px flex: none align-items: center border-bottom: 1px solid $app-color-border-muted + .SelectMenu-title flex: 1 font-size: 14px font-weight: 600 margin: 0 + .SelectMenu-closeButton padding: 16px margin: -16px @@ -297,6 +364,7 @@ $app-color-action-list-item-inline-divider: #d0d7de7a color: $app-color-fg-muted background-color: transparent border: 0 + .SelectMenu-list position: relative padding: 0 @@ -307,6 +375,7 @@ $app-color-action-list-item-inline-divider: #d0d7de7a overflow-y: auto background-color: $app-color-canvas-overlay -webkit-overflow-scrolling: touch + .SelectMenu-item display: flex align-items: center @@ -319,6 +388,7 @@ $app-color-action-list-item-inline-divider: #d0d7de7a background-color: $app-color-canvas-overlay border: 0 border-bottom: 1px solid $app-color-border-muted + .SelectMenu-icon width: 16px margin-right: 8px @@ -328,25 +398,21 @@ $app-color-action-list-item-inline-divider: #d0d7de7a transition: transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear transform: scale(0) -.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check - visibility: visible - transition: transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear - transform: scale(1) +.SelectMenu-item[aria-checked="true"] + .SelectMenu-icon--check + visibility: visible + transition: transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear + transform: scale(1) -::ng-deep .mat-tab-header - padding-top: 0 !important - padding-bottom: 0 !important - padding-right: 16px - padding-left: 16px - border-bottom: 1px solid $app-color-border-muted - -@keyframes SelectMenu-modal-animation +@keyframes select-menu-modal-animation 0% opacity: 0 transform: translateY(-16px) + @media (max-width: 480px) * font-size: 15px + @media (max-width: 768px) .border-sm-top border-top: 1px solid #dee2e6 !important @@ -381,33 +447,34 @@ $app-color-action-list-item-inline-divider: #d0d7de7a margin-bottom: 16px border: 1px solid $app-color-border-default border-radius: 6px - & .file-header + .file-header padding: 5px 10px background-color: $app-aliceBlue border-bottom: 1px solid $app-color-border-default border-top-left-radius: 6px border-top-right-radius: 6px - & .file-info + .file-info font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace font-size: 12px line-height: 32px - & .file-content + .file-content padding: 40px 25px - & .variable-textarea + .variable-textarea width: 100% min-height: 300px height: max-content border: none outline: none + markdown - & * + * font: revert !important - & h1 a + h1 a text-decoration: none - & h1 a:hover + h1 a:hover opacity: 0.87 text-decoration: underline - & blockquote + blockquote border-left: 3px solid rgba(0,0,0,0.21) padding-left: 12px color: rgba(0,0,0,0.54) @@ -416,11 +483,12 @@ markdown .app-mat-chip & ::ng-deep .mat-standard-chip cursor: pointer -::ng-deep .mat-standard-chip - cursor: pointer + .mat-standard-chip min-height: 25px + border-radius: 16px padding: 10px + .mat-chip color: $app-navyBlue background: $app-aliceBlue @@ -443,7 +511,7 @@ markdown background-color: $app-aliceBlue &--condensed line-height: 1.25 - & .box__row + .box__row padding: 8px 16px &__row padding: 16px @@ -467,7 +535,7 @@ markdown &__body display: flex background: $app-color-canvas-overlay - & .avatar + .avatar position: relative z-index: 2 display: flex @@ -487,34 +555,38 @@ markdown z-index: 3 &:not(:hover) background-color: transparent - & .avatar-stack__body + .avatar-stack__body position: absolute /////// .signer-block-info z-index: 999 grid-template-columns: 0.15fr 1fr + .signed-commit-header line-height: 1.3 white-space: normal grid-template-columns: 0.15fr 1fr border-top-left-radius: 6px border-top-right-radius: 6px - & * + * font-size: 15px + .signed-commit-signer-name font-size: 14px text-align: left - & .signer + .signer display: block font-weight: 600 font-size: 14px + .signed-commit-footer &__id color: $app-nero - & span, a + span, a font-size: 12px line-height: 1.5 + .signed-commit-badge user-select: none background: none @@ -525,14 +597,17 @@ markdown &:hover border-color: $app-harmonies text-decoration: none + .verified-commit display: inline-block overflow: visible !important vertical-align: text-bottom fill: currentColor + .signed-commit-verified-label color: $app-success white-space: nowrap + .signed-commit-badge-small display: inline-block padding: 0 7px @@ -541,16 +616,17 @@ markdown line-height: 18px border: 1px solid $verylightgrey border-radius: 2em -.signed-commit__popup-header .mat-typography h3 - margin: 0 !important -::ng-deep ngb-popover-window.bs-popover-left>.arrow - display: none -::ng-deep ngb-popover-window .popover-header - margin: 0 +.signed-commit__popup-header + .mat-typography + h3 + margin: 0 !important -.mat-standard-chip - border-radius: 16px + ::ng-deep ngb-popover-window.bs-popover-left>.arrow + display: none + + ::ng-deep ngb-popover-window .popover-header + margin: 0 .overflow-visible overflow: visible !important From baef63ca88a4c306b8109daa7b0d881b12f366fd Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:11:26 +0300 Subject: [PATCH 03/20] Refactored style.sass --- src/assets/styles/var.sass | 3 + src/styles.sass | 584 ++++++++++++++++++++++--------------- 2 files changed, 352 insertions(+), 235 deletions(-) diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass index bd50389e7..15b984945 100644 --- a/src/assets/styles/var.sass +++ b/src/assets/styles/var.sass @@ -171,6 +171,9 @@ $app-color-action-list-item-inline-divider: #d0d7de7a border-color: $app-color-border-default height: inherit background: $app-aliceBlue + &:first-child + &:active + border-color: $app-color-border-default &:last-child border-right-width: 1px border-top-right-radius: 6px diff --git a/src/styles.sass b/src/styles.sass index 4863e0e18..9e30058f0 100644 --- a/src/styles.sass +++ b/src/styles.sass @@ -19,12 +19,16 @@ app-add-polling-source body font-size: 14px overflow-x: hidden + * font-size: 14px + .h3-custom font-size: 20px !important + .lh-condensed line-height: 1.25 !important + a text-decoration: none &:hover @@ -32,14 +36,19 @@ a cursor: pointer &:active, &:hover outline-width: 0 + .sr-only display: none + .color-text-secondary color: $secondary + .text-small font-size: 12px + .mat-divider color: $app-lightGrayishBlue + .card--title position: relative padding-top: 11px @@ -48,12 +57,15 @@ a border-radius: 4px 4px 0px 0px border-bottom: 1px solid $app-veryLightGray align-items: center + .card--row padding: 11px + .table-header-background background-color: $app--color-table-header-bg + #dataset-viewer - & .dataset-info + .dataset-info display: grid &--subtitle box-sizing: border-box @@ -100,10 +112,13 @@ a width: 40% padding-top: 8px line-height: 1 + .datasetViewTypeToggleGroup - & .mat-button-toggle-disabled .mat-button-toggle-button - cursor: not-allowed - color: rgb(0 0 0 / 51%) + .mat-button-toggle-disabled + .mat-button-toggle-button + cursor: not-allowed + color: rgb(0 0 0 / 51%) + .app-active-button background: $app-darkSeaGreen border-radius: 4px @@ -117,39 +132,49 @@ a &:hover, &:focus, &:active text-decoration: none color: $app-emperor + .app-header height: 90px - & a + a margin: 0 20px - & p + p color: $app-white font-style: normal font-weight: normal font-size: 18px - & .navbar + .navbar padding: 0 + [data-test-id="appLogo"] - background: none - border: none -.mat-progress-spinner circle - stroke: $app-darkSeaGreen !important + background: none + border: none -.mat-menu-panel.app-header__user-menu - background-color: white - border: 1px solid $app-lightGrayishBlue - & .mat-menu-item +.mat-progress-spinner + circle + stroke: $app-darkSeaGreen !important + +.mat-menu-panel + &.app-header__user-menu background-color: white -#appHeaderLogo img - height: 32px - width: 32px + border: 1px solid $app-lightGrayishBlue + .mat-menu-item + background-color: white + +#appHeaderLogo + img + height: 32px + width: 32px + .Header-item display: flex margin-right: 16px align-self: stretch align-items: center flex-wrap: nowrap + .Header-link text-decoration: none + #app-header z-index: 32 display: flex @@ -158,15 +183,14 @@ a line-height: 1.5 align-items: center justify-content: space-between - & .Details:not(.Details--on) .Details-content--hidden-not-important - display: none - & .Header-item--full + .Details:not(.Details--on) + .Details-content--hidden-not-important + display: none + .Header-item--full flex: auto - & a, button + a, button flex: none - //& .form-control - // width: 300px - & .input-control + .input-control position: relative flex: 1 1 auto width: 1% @@ -179,108 +203,124 @@ a font-weight: 400 line-height: 1.5 border: 1px solid #ced4da - //transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out + .jump-to-badge-jump display: none -.active-search-input input - color: $app-white + +.active-search-input + input + color: $app-white + .octicon display: inline-block overflow: visible !important vertical-align: text-bottom fill: currentColor + .Header-signout-btn background: none border: none text-align: left padding: initial -#navbarNavDropdown .navbar-nav - width: 100% - & .nav-item - width: 100% - transition: all .5s linear - line-height: 150px - & .active-search-input - width: 100% - & ngb-typeahead-window + +#navbarNavDropdown + .navbar-nav width: 100% - line-height: 1 - & ngb-highlight - color: $app-nero - & .dropdown-item - display: flex - justify-content: space-between - height: 30px - padding-left: 10px - padding-right: 10px - margin: 5px 0 - & * - color: $app-nero - & button - color: $app-nero - &.active - & * - color: $app-white - & .jump-to-badge-jump - justify-content: center - align-items: center - display: flex + .nav-item + width: 100% + transition: all .5s linear + line-height: 150px + .active-search-input + width: 100% + ngb-typeahead-window + width: 100% + line-height: 1 + ngb-highlight color: $app-nero - & * + .dropdown-item + display: flex + justify-content: space-between + height: 30px + padding-left: 10px + padding-right: 10px + margin: 5px 0 + * color: $app-nero + button + color: $app-nero + &.active + * + color: $app-white + .jump-to-badge-jump + justify-content: center + align-items: center + display: flex + color: $app-nero + * + color: $app-nero + .app-brand grid-area: appBrandArea > img width: 77px height: 55px + a:visited color: inherit + .mat-app-background, .mat-drawer-container background-color: $app-aliceBlue + #app-header background-color: $app-dark - & * + * color: $app-primary - & .navbar-nav + .navbar-nav margin: auto -.Details:not(.Details--on) .Details-content--hidden-not-important - display: none +.Details:not(.Details--on) + .Details-content--hidden-not-important + display: none + .header-search max-width: 100% transition: all .5s linear -.header-search:focus-within - max-width: 100% - width: 100% + +.header-search + &:focus-within + max-width: 100% + width: 100% + .notification-indicator-container width: 1.5em + .app-main-container height: 100% width: 100% - - & .navbar + .navbar padding: 20px .mat-drawer-inner-container - & .navbar-nav + .navbar-nav width: 100% padding: 16px - & .nav-item + .nav-item width: 100% margin-bottom: 8px border-radius: 4px padding: 12px 16px box-sizing: border-box color: $app-emperor - & .nav-link:hover, .nav-link:focus - background: $app-darkSeaGreen - color: $app-white - - & .mat-drawer.mat-drawer-side + .nav-link + &:hover, &:focus + background: $app-darkSeaGreen + color: $app-white + .mat-drawer.mat-drawer-side width: 208px - & .mat-drawer-container + .mat-drawer-container background: inherit overflow: auto + .app-content display: grid margin: 33px auto @@ -292,17 +332,22 @@ a:visited &--header grid-template-columns: 1fr 1fr display: grid + #dataset-view - a:visited - color: inherit + a + &:visited + color: inherit + router-outlet - display: none + display: none + .app-content__card-columns column-count: 1 grid-column-gap: 1.25rem column-gap: 1.25rem orphans: 1 widows: 1 + .app-header__right-column grid-area: appHeaderArea display: flex @@ -311,24 +356,30 @@ router-outlet color: white > span margin-right: 5px + .app-header__right-column__addnew-block margin-right: 5% display: flex justify-content: space-around background: none border: none - > span:first-child - margin-right: 10px + > span + &:first-child + margin-right: 10px + .app-header__right-column__label display: block -#appHeaderAdditionalBlock .button-round - width: 50px - height: 50px - min-width: 50px - border-radius: 35px - overflow: hidden - display: block - padding: 0 + +#appHeaderAdditionalBlock + .button-round + width: 50px + height: 50px + min-width: 50px + border-radius: 35px + overflow: hidden + display: block + padding: 0 + #matmenu-signed-in-name white-space: nowrap overflow: hidden @@ -344,10 +395,11 @@ router-outlet font-family: Roboto, "Helvetica Neue", sans-serif font-size: 14px font-weight: 400 - & * + * font-family: Roboto, "Helvetica Neue", sans-serif font-size: 14px font-weight: 600 + .img-container-round width: 50px height: 50px @@ -384,59 +436,70 @@ router-outlet &.mobileSearch grid-area: appMobileMenu position: relative - & i + i color: $app-primary font-size: 30px + .search-header-container-block margin-bottom: 20px + #search .dataset-full-result-container grid-template-columns: 1fr + #search .dataset-result-container grid-template-columns: 0.25fr 1fr + #search .search-result-container grid-template-columns: 0.25fr 1fr + #search .search-result-container, #search .dataset-result-container & ul list-style-type: none & .mat-checkbox-layout .mat-checkbox-label font-size: 16px + #dataset-viewer - & .search-result-container + .search-result-container grid-template-columns: 0.25fr 1fr - & .dataset-result-container + .dataset-result-container grid-template-columns: 1fr 0.35fr - & .dataset-view-data-result-container + .dataset-view-data-result-container grid-template-columns: 0.4fr 1fr -#schema-block-table *, #set-polling-source-schema *, #set-polling-source-env-variables * - padding: 0px 8px - font-size: 12px - height: 34px + +#schema-block-table , #set-polling-source-schema , #set-polling-source-env-variables + * + padding: 0px 8px + font-size: 12px + height: 34px + #search, #dataset-viewer - & .nav-link + .nav-link cursor: pointer - & .nav-tabs + .nav-tabs margin-bottom: 14px border-bottom: none - & .search-result-container, .dataset-result-container, .dataset-view-data-result-container + .search-result-container, .dataset-result-container, .dataset-view-data-result-container display: grid align-items: start grid-gap: 25px - & table + table width: 100% - & .search-header-container-block + .search-header-container-block width: 100% display: grid align-items: center justify-content: space-between grid-template-columns: 1fr 0.25fr grid-gap: 25px - > ul:first-child - align-items: center - margin-bottom: 9px - > ul:last-child - justify-content: flex-end - & .nav-tabs - & .nav-link + > ul + &:first-child + align-items: center + margin-bottom: 9px + > ul + &:last-child + justify-content: flex-end + .nav-tabs + .nav-link border: none background-color: transparent padding: 0.5rem 0.3rem 0 0.3rem @@ -444,11 +507,12 @@ router-outlet text-decoration: underline &.active font-weight: bold - & .nav-link + .nav-link padding: 0.5rem 0.3rem color: $app-emperor &:hover, &:focus, &:active text-decoration: underline + .search-result-container__content, .container-content overflow: auto padding: 20px 28px @@ -459,31 +523,39 @@ router-outlet border-radius: 8px & [data-test-id="searchInput"] height: 50px + .datasetViewTypeToggleGroup width: 100% overflow: auto margin-bottom: 20px + #dataset-viewer, #search overflow: hidden -.starred .starred-button-icon - color: $app-naples-yellow !important -.searchAdditionalButtonsMinimizeBlock .searchAdditionalButtons__nav - flex-direction: column - background: $app-white - & .btnGroup-item - width: 100% - & .btnGroup-parent - width: 100% - & .nav-item - width: 100% - margin: 0 !important - padding: 0 !important + +.starred + .starred-button-icon + color: $app-naples-yellow !important + +.searchAdditionalButtonsMinimizeBlock + .searchAdditionalButtons__nav + flex-direction: column + background: $app-white + .btnGroup-item + width: 100% + .btnGroup-parent + width: 100% + .nav-item + width: 100% + margin: 0 !important + padding: 0 !important + #metadata-block & .page-item:last-child .page-link, .page-item:first-child .page-link padding: 1px & #pagination-block display: flex justify-content: flex-end + /*********** Search Page ******/ .input-icon background: none @@ -498,63 +570,71 @@ router-outlet height: 100% > i font-size: 18px -[data-test-id="searchInput"] - padding-left: 35px + +#typeahead-http &::placeholder color: $app-white -#searchInput.searchSidenav .input-group > [data-test-id="searchInput"].form-control - background: $app-white - color: $app-emperor - box-shadow: 0px 5px 4px $app-versatileBusinessDark - &::placeholder +#searchInput + &.searchSidenav + .input-group + & > [data-test-id="searchInput"].form-control + background: $app-white + color: $app-emperor + box-shadow: 0px 5px 4px $app-versatileBusinessDark + +.input-group + & > [data-test-id="searchInput"].form-control + border-radius: 0.25rem + border-color: transparent + background: $app-emperor color: $app-white -.input-group > [data-test-id="searchInput"].form-control - border-radius: 0.25rem - border-color: transparent - background: $app-emperor - color: $app-white - padding: 5px 12px -.form-control:focus - box-shadow: 0 0 0 0.2rem #85bb906e + padding: 5px 12px + +.form-control + &:focus + box-shadow: 0 0 0 0.2rem #85bb906e + .mat-header-cell font-size: 20px [data-test-id="searchInput"], [data-test-id="addNewBlock"], [data-test-id="openUserInfo"], [data-test-id="appLogo"] cursor: pointer + .input-datasets-list justify-content: left display: flex align-items: baseline & > *:last-child margin-left: 16px + .gist font-size: 16px color: #333 text-align: left direction: ltr text-rendering: auto - & .gist-file + .gist-file margin-bottom: 1em font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace border: 1px solid #ddd border-bottom: 1px solid #ccc border-radius: 6px - & article + article padding: 6px - & .gist-data + .gist-data overflow: auto word-wrap: normal background-color: $app-color-canvas-overlay border-bottom: 1px solid #ddd border-radius: 6px 6px 0 0 - & .markdown-body + .markdown-body font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" font-size: 16px line-height: 1.5 word-wrap: break-word - & pre + pre padding: 16px overflow: auto font-size: 85% @@ -565,22 +645,23 @@ router-outlet .searchAdditionalButtons__nav justify-content: end align-items: end + .searchAdditionalButtonsMinimizeBlock - & ul + ul background: $app-white border: 1px solid $app-veryLightGray box-sizing: border-box box-shadow: 0 5px 4px $app-versatileBusinessDark border-radius: 5px - & li + li border-radius: 0 !important border: none border-bottom: 1px solid #d0d7de !important &:last-child border-bottom: none !important - & .btnGroup-item + .btnGroup-item border: none - & .additionalOptions-btn + .additionalOptions-btn border-top: none !important border-right: none !important border-bottom: none !important @@ -588,11 +669,15 @@ router-outlet @media (max-width: 480px) .app-header__right-column__label display: none + .app-header__right-column__addnew-block width: 18% - .app-brand > img - width: 60px - height: 50px + + .app-brand + > img + width: 60px + height: 50px + .app-active-button__container margin-top: 7px @@ -602,38 +687,49 @@ router-outlet &--header grid-template-columns: 1fr 0.1fr display: grid + #search, #dataset-viewer - & .search-result-container, .dataset-view-data-result-container - grid-template-columns: 1fr - & .search-header-container-block + .search-result-container, .dataset-view-data-result-container grid-template-columns: 1fr - > ul:last-child + + .search-header-container-block + grid-template-columns: 1fr + > ul + &:last-child justify-content: flex-start + .searchAdditionalButtonsBlock display: flex justify-content: flex-end align-items: flex-end + @media (max-width: 991px) #app-header - & #appHeaderMenuButton, #appHeaderLogo, #appHeaderAdditionalBlock + #appHeaderMenuButton, #appHeaderLogo, #appHeaderAdditionalBlock order: 0 - & #navbarNavDropdown + #navbarNavDropdown order: 1 - & .navbar-nav + .navbar-nav margin: 20px auto + #dataset-viewer - & .dataset-result-container + .dataset-result-container grid-template-columns: 1fr @media (min-width: 768px) .header-search max-width: 272px width: 100% - .header-search:focus-within - max-width: 544px - #navbarNavDropdown .navbar-nav - & .active-search-input - width: 150% + + .header-search + &:focus-within + max-width: 544px + + #navbarNavDropdown + .navbar-nav + .active-search-input + width: 150% + .avatar display: inline-block overflow: hidden @@ -643,9 +739,11 @@ router-outlet border-radius: 6px flex-shrink: 0 box-shadow: 0 0 0 1px #1b1f2426 + .avatar-2 width: 20px height: 20px + .avatar-user border-radius: 50% !important @@ -655,7 +753,6 @@ router-outlet margin: 0 auto background: white box-sizing: border-box - //width: 70% max-width: 300px min-height: 80px border: 1px solid $app-nero @@ -664,14 +761,18 @@ router-outlet opacity: 0 transition: transform 1s linear animation: ani 1.5s forwards + .modal__dialog__header-block width: 100% padding: 1.5em + .modal__dialog__footer-block width: 100% + .modal__content .modal__bigtest-dialog width: 90vw max-width: none + @keyframes ani 0% opacity: 0 @@ -679,51 +780,49 @@ router-outlet 100% opacity: 1 transform: translateY(0%) + .modal__bigtext-block display: block width: 100% height: 60vh overflow-y: scroll margin-bottom: 26px -.modal__bigtext-block__container - text-align: left - font-size: 14pt - font-family: "Helvetica Neue" - a - color: #0087ff - text-decoration: underline - vertical-align: baseline - text-decoration-skip-ink: none - font-style: normal + &__container + text-align: left + font-size: 14pt + font-family: "Helvetica Neue" + a + color: #0087ff + text-decoration: underline + vertical-align: baseline + text-decoration-skip-ink: none + font-style: normal .modal__header font-size: 1.25em margin-bottom: 1em + &-black + @extend .modal__header + color: black + font-size: 1.4em + &-error + @extend .modal__header + color: red + &-warning + @extend .modal__header + color: $warning + &-ok + @extend .modal__header + color: darkgreen + &-info + @extend .modal__header + color: #4494ff -.modal__header-black - @extend .modal__header - color: black - font-size: 1.4em - -.modal__header-error - @extend .modal__header - color: red - -.modal__header-warning - @extend .modal__header - color: $warning - -.modal__header-ok - @extend .modal__header - color: darkgreen - -.modal__header-info - @extend .modal__header - color: #4494ff .link-green color: $green-100 &__inline border-bottom: 1px $green-100 solid + .cache-modal &__content flex-direction: column @@ -763,6 +862,7 @@ router-outlet color: $app-nero font-size: 24px width: 100% + .base_modal__content background: #0000007a flex-direction: column @@ -778,10 +878,10 @@ router-outlet @extend .base_modal__content bottom: 0 z-index: 2000 -.modal__content__unsupported-account - @extend .base_modal__content - bottom: 0 - z-index: 1001 + &__unsupported-account + @extend .base_modal__content + bottom: 0 + z-index: 1001 .modal__body @extend .text-center @@ -801,23 +901,20 @@ router-outlet min-height: 13% position: relative background: url(./assets/icons/loadinfo.net.gif) no-repeat center - & img + img max-height: calc(100vh - 180px) max-width: 100% margin: 0 auto - //& .modal__btn - // position: absolute - // bottom: 0 - // left: calc(50%) - // transform: translateX(-40px) + .modal__dialog__unsupported-account @extend .modal__dialog - & a + a color: $blue .modal__msg margin: 1em 0 word-break: break-word + .button__default background-color: white @extend .button @@ -828,17 +925,16 @@ router-outlet border-radius: 0px 0px 4px 4px min-width: 100% font-weight: bold - -.modal__btn-first - width: 100% - margin: 0 - -.modal__btn-last - @extend .modal__btn-first - margin-top: 1em + &-first + width: 100% + margin: 0 + &-last + @extend .modal__btn-first + margin-top: 1em .upload background-color: black + #more-button background: $app-white border: 1px solid $app-veryLightGray @@ -846,6 +942,7 @@ router-outlet box-shadow: 0 5px 4px $app-versatileBusinessDark border-radius: 8px color: $app-emperor + .button height: 40px cursor: pointer @@ -854,9 +951,9 @@ router-outlet outline: none &[disabled] opacity: 0.7 - & img + img height: 100% - & .fa + .fa color: inherit &:active background: linear-gradient(to bottom, rgba(204,204,204,0.8) 100%, #eee 0%) @@ -864,32 +961,42 @@ router-outlet .account-container grid-template-columns: 0.5fr 0.5fr display: grid !important + app-account .dropdown-menu right: 0 + .account-additional-main-info__list - & .mail-outline .mat-icon - font-size: 20px - height: 20px - width: 20px -.Layout.Layout--sidebarPosition-start .Layout-main - grid-column: 2/span 2 + .mail-outline + .mat-icon + font-size: 20px + height: 20px + width: 20px + +.Layout.Layout--sidebarPosition-start + .Layout-main + grid-column: 2/span 2 + .UnderlineNav display: flex overflow-x: auto overflow-y: hidden justify-content: space-between - & .mat-icon + .mat-icon height: 20px width: 20px font-size: 20px -[role="menu"] .UnderlineNav-item - display: flex - justify-content: flex-start - align-items: center + +[role="menu"] + .UnderlineNav-item + display: flex + justify-content: flex-start + align-items: center + details summary::-webkit-details-marker, details summary::marker - display: none - content: "" + display: none + content: "" + .UnderlineNav-item padding: 8px 16px font-size: 14px @@ -919,13 +1026,17 @@ details summary::marker /******** MIXINZ ********/ %border-none border: 0px + %border-gray border: 1px solid $verylightgrey + %border-green border-radius: 5px border: 1px solid #CEE794 + %border-darkgreentea border: 1px solid $darkgreentea + %button-gradient background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%) @@ -959,9 +1070,10 @@ details summary::marker .fs-12 font-size: 12px -.multiselect-dropdown .dropdown-btn - color: #6c757d !important - padding-left: 36px !important +.multiselect-dropdown + .dropdown-btn + color: #6c757d !important + padding-left: 36px !important pre display: flex @@ -973,7 +1085,7 @@ pre line: height 1.5em min-height: 100% padding: 1em 1.2em - & .hljs + .hljs font-size: 15px !important font-weight: 500 !important background-color: honeydew !important @@ -1075,5 +1187,7 @@ pre &:enabled color: blue -input.ng-invalid.ng-touched, input.ng-invalid.ng-dirty - border-color: #dc3545 +input + &.ng-invalid + &.ng-touched, &.ng-dirty + border-color: #dc3545 From 3b655f1d272332fa567888269dda923c87afc8cd Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:44:59 +0300 Subject: [PATCH 04/20] Refactored settings.component.sass --- src/app/auth/settings/settings.component.sass | 87 +++++++++---------- 1 file changed, 42 insertions(+), 45 deletions(-) diff --git a/src/app/auth/settings/settings.component.sass b/src/app/auth/settings/settings.component.sass index f0079d53e..ade8ba9ce 100644 --- a/src/app/auth/settings/settings.component.sass +++ b/src/app/auth/settings/settings.component.sass @@ -1,26 +1,38 @@ @import src/assets/styles/var .p-responsive - padding-left: 16px - a - text-decoration: none + padding-left: 16px + a + text-decoration: none + .fw-bold-custom - font-weight: 600 -.ActionList - padding: 0 + font-weight: 600 -.ActionList-item +.ActionList + padding: 0 + &-item position: relative list-style: none border-radius: 6px text-decoration: none - -.ActionList-item a - &:hover + a + &:hover cursor: pointer text-decoration: none - -.ActionList-content + &--navActive + background: $app-color-action-list-item-default-selected-bg + a + font-weight: 600 + &::after + position: absolute + top: calc(50% - 12px) + left: -8px + width: 4px + height: 24px + content: "" + background: $app-color-accent-fg + border-radius: 6px + &-content position: relative display: grid width: 100% @@ -40,36 +52,21 @@ grid-template-columns: min-content max-content align-items: start &:hover - background: $app-color-action-list-item-default-selected-bg - -.ActionList-item--navActive - background: $app-color-action-list-item-default-selected-bg - &::after - position: absolute - top: calc(50% - 12px) - left: -8px - width: 4px - height: 24px - content: "" - background: $app-color-accent-fg - border-radius: 6px - -.ActionList-item--navActive a - font-weight: 600 - -.ActionList-sectionDivider:empty - display: block - height: 1px - padding: 0 - margin: 7px -8px 8px - list-style: none - background: $app-color-action-list-item-inline-divider - border: 0 - -.ActionList-sectionDivider:not(:empty) - display: flex - padding: 6px 8px - font-size: 12px - font-weight: 500 - color: $app-color-fg-muted - flex-direction: column + background: $app-color-action-list-item-default-selected-bg + &-sectionDivider + &:not(:empty) + display: flex + padding: 6px 8px + font-size: 12px + font-weight: 500 + color: $app-color-fg-muted + flex-direction: column + &-sectionDivider + &:empty + display: block + height: 1px + padding: 0 + margin: 7px -8px 8px + list-style: none + background: $app-color-action-list-item-inline-divider + border: 0 From 133bebda0dd181ddd52b456d8a72ca9115217b9a Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:50:01 +0300 Subject: [PATCH 05/20] Refactored custom-pagination.component.sass --- .../custom-pagination.component.sass | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/components/custom-pagination-component/custom-pagination.component.sass b/src/app/components/custom-pagination-component/custom-pagination.component.sass index 291273b7f..15780618d 100644 --- a/src/app/components/custom-pagination-component/custom-pagination.component.sass +++ b/src/app/components/custom-pagination-component/custom-pagination.component.sass @@ -1,4 +1,5 @@ @import src/assets/styles/var + .paginate-container margin-top: 16px margin-bottom: 16px @@ -6,16 +7,20 @@ display: grid justify-content: center -ngb-pagination ::ng-deep .page-item .page-link - border: none !important - display: flex - justify-content: center - align-items: center - border-radius: 6px - & span - display: none -ngb-pagination ::ng-deep * - font-size: 14px +ngb-pagination + ::ng-deep + .page-item + .page-link + border: none !important + display: flex + justify-content: center + align-items: center + border-radius: 6px + & span + display: none + * + font-size: 14px + .page_button display: inline-block width: 16px From 42f3a4e41123d1a67cfacda657937b933e5cc3a9 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:53:14 +0300 Subject: [PATCH 06/20] Refactored dataset-list.sass --- .../components/dataset-list-component/dataset-list.sass | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/components/dataset-list-component/dataset-list.sass b/src/app/components/dataset-list-component/dataset-list.sass index 71906a9e9..1bc73f5c3 100644 --- a/src/app/components/dataset-list-component/dataset-list.sass +++ b/src/app/components/dataset-list-component/dataset-list.sass @@ -1,4 +1,5 @@ @import src/assets/styles/var + .dataset-list-total-count margin: 0 @@ -6,12 +7,13 @@ background: transparent > * background: transparent - & p + p z-index: 0 &:hover background: $app-background-btn - &.form-group * - font-size: 16px + &.form-group + * + font-size: 16px #sortOptions color: $app-dark From ce194551804d0ddeaf2e857319f775056921cf0a Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:56:23 +0300 Subject: [PATCH 07/20] Refactored dataset-list-item.component.sass --- .../dataset-list-item.component.sass | 46 +++++++++---------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.sass b/src/app/components/dataset-list-item/dataset-list-item.component.sass index e364429ed..d10087393 100644 --- a/src/app/components/dataset-list-item/dataset-list-item.component.sass +++ b/src/app/components/dataset-list-item/dataset-list-item.component.sass @@ -5,30 +5,26 @@ display: grid grid-template-columns: 1fr grid-template-rows: 1fr - -.dataset-list-container__title-row - display: flex - justify-content: space-between - &__dataset-name + &__title-row + display: flex + justify-content: space-between + &__dataset-name + display: flex + justify-content: left + i + margin-right: 8px + &__title display: flex - justify-content: left - & i - margin-right: 8px - -.dataset-list-container__title - display: flex - background: none - border: none - color: $app-navyBlue - font-size: 16px - &:hover, &:active - cursor: pointer - text-decoration: underline background: none - -.dataset-list-container__additional-block - display: flex - gap: 5px - -.dataset-list-container__description - font-size: 14px \ No newline at end of file + border: none + color: $app-navyBlue + font-size: 16px + &:hover, &:active + cursor: pointer + text-decoration: underline + background: none + &__additional-block + display: flex + gap: 5px + &__description + font-size: 14px From fa4713c953c621aaadf6a2f3b48f21199ea967d4 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Fri, 25 Aug 2023 20:58:00 +0300 Subject: [PATCH 08/20] Refactored dynamic-table.sass --- src/app/components/dynamic-table/dynamic-table.sass | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/components/dynamic-table/dynamic-table.sass b/src/app/components/dynamic-table/dynamic-table.sass index 081b38116..aae069ca3 100644 --- a/src/app/components/dynamic-table/dynamic-table.sass +++ b/src/app/components/dynamic-table/dynamic-table.sass @@ -1,13 +1,14 @@ @import src/assets/styles/var -.clickable-row .mat-cell - color: $app-navyBlue - &:hover - cursor: pointer - text-decoration: underline +.clickable-row + .mat-cell + color: $app-navyBlue + &:hover + cursor: pointer + text-decoration: underline table width: 100% - & .mat-cell + .mat-cell border: 1px solid color: $app-color-fg-default border-color: $app-color-border-default From 7965e3be3a968ed845fa8b2263d9f4c2a64ca59b Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:09:55 +0300 Subject: [PATCH 09/20] Refactored notification-indicator.sass --- .../notification-indicator.sass | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/app/components/notification-indicator/notification-indicator.sass b/src/app/components/notification-indicator/notification-indicator.sass index acd2f9c60..31b9cb6e1 100644 --- a/src/app/components/notification-indicator/notification-indicator.sass +++ b/src/app/components/notification-indicator/notification-indicator.sass @@ -1,13 +1,14 @@ -.notification-indicator .mail-status - position: absolute - top: -13px - left: 13px - z-index: 2 - display: none - width: 14px - height: 14px - color: #fff - background-image: linear-gradient(#54a3ff, #006eed) - background-clip: padding-box - border: 2px solid var(--color-header-bg) - border-radius: 50% \ No newline at end of file +.notification-indicator + .mail-status + position: absolute + top: -13px + left: 13px + z-index: 2 + display: none + width: 14px + height: 14px + color: #fff + background-image: linear-gradient(#54a3ff, #006eed) + background-clip: padding-box + border: 2px solid var(--color-header-bg) + border-radius: 50% From bd3ef90e05f2063ec1914e551136bc5ac3445399 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:15:38 +0300 Subject: [PATCH 10/20] Refactored pagination-component.sass --- .../pagination-component.sass | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/app/components/pagination-component/pagination-component.sass b/src/app/components/pagination-component/pagination-component.sass index 291273b7f..ef408222f 100644 --- a/src/app/components/pagination-component/pagination-component.sass +++ b/src/app/components/pagination-component/pagination-component.sass @@ -6,16 +6,23 @@ display: grid justify-content: center -ngb-pagination ::ng-deep .page-item .page-link - border: none !important - display: flex - justify-content: center - align-items: center - border-radius: 6px - & span - display: none -ngb-pagination ::ng-deep * - font-size: 14px + ngb-pagination + ::ng-deep + .page-item + .page-link + border: none !important + display: flex + justify-content: center + align-items: center + border-radius: 6px + & span + display: none + +ngb-pagination + ::ng-deep + * + font-size: 14px + .page_button display: inline-block width: 16px From c793fd00aa5ac3f02d06a991a2f810f13b70413b Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:17:19 +0300 Subject: [PATCH 11/20] Refactored search-additional-buttons.component.sass --- .../search-additional-buttons.component.sass | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass b/src/app/components/search-additional-buttons/search-additional-buttons.component.sass index 4a051a1a7..766a6f1e8 100644 --- a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass +++ b/src/app/components/search-additional-buttons/search-additional-buttons.component.sass @@ -2,6 +2,7 @@ * color: $app-emperor + [data-test-id="searchAdditionalButtons"] background: $app-white border: 1px solid $app-veryLightGray @@ -9,18 +10,23 @@ box-shadow: 0 5px 4px $app-versatileBusinessDark border-radius: 8px color: $app-emperor + .searchAdditionalButton height: 40px background: $app-white + .searchAdditionalButtons__nav justify-content: end align-items: end + .searchAdditionalButtonsBlock justify-content: flex-end display: flex + .arrowDropDown align-items: center justify-content: center display: flex + .additionalOptions-btn - width: min-content !important \ No newline at end of file + width: min-content !important From d8042c51374ebc640d8f66d9795988f2027f9228 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:18:48 +0300 Subject: [PATCH 12/20] Refactored timeline.component.sass --- .../components/timeline-component/timeline.component.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/timeline-component/timeline.component.sass b/src/app/components/timeline-component/timeline.component.sass index b4f17545b..c52551b09 100644 --- a/src/app/components/timeline-component/timeline.component.sass +++ b/src/app/components/timeline-component/timeline.component.sass @@ -18,7 +18,7 @@ &--condensed padding-top: 4px padding-bottom: 0 - & .timeline-block__item-badge + .timeline-block__item-badge height: 16px margin-top: 8px margin-bottom: 8px @@ -49,7 +49,7 @@ &__header font-size: 14px !important font-weight: normal - & mat-icon + mat-icon justify-content: center align-items: center - display: flex \ No newline at end of file + display: flex From 99090be8f3ab6c5f1d24ffd434e47855fc71efdb Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:28:56 +0300 Subject: [PATCH 13/20] Refactored set-attachments-event.component.sass --- .../set-attachments-event.component.sass | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass index b0b1f12ea..c6c1c766d 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass @@ -1,3 +1,4 @@ -::ng-deep.mat-typography - h1 - line-height: 1.2 !important +::ng-deep + &.mat-typography + h1 + line-height: 1.2 !important From eca8f147e3c2bf58ac48238d2d85d0134d7b8701 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:31:16 +0300 Subject: [PATCH 14/20] Refactored dataset-create.component.sass --- src/app/dataset-create/dataset-create.component.sass | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/dataset-create/dataset-create.component.sass b/src/app/dataset-create/dataset-create.component.sass index 1c2507753..5b7d4eed5 100644 --- a/src/app/dataset-create/dataset-create.component.sass +++ b/src/app/dataset-create/dataset-create.component.sass @@ -1,8 +1,10 @@ @import src/assets/styles/var * font-size: 18px + #dataset-create display: grid + .dataset-create-content display: grid padding: 0 16px @@ -14,6 +16,7 @@ display: grid justify-items: center overflow: initial + .dataset-create-container height: min-content display: grid @@ -23,6 +26,7 @@ align-self: center align-content: center width: 100% + .dataset-create-tipText font-style: normal font-weight: normal @@ -67,10 +71,8 @@ hr font-size: 20px !important font-weight: 400 !important margin: 0 !important - .container-monaco min-width: 100% - .btn-create background: #2c974b border-color: rgba(27,31 ,36 ,0.15 ) @@ -87,7 +89,6 @@ hr background: #34b358 &:disabled background: #69e18b - label span font-size: 16px From 74634b96b9235f65e5bfec50b4f2350b58d35665 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:42:02 +0300 Subject: [PATCH 15/20] Refactored settings.component.sass --- .../settings.component.sass | 193 +++++++++--------- 1 file changed, 97 insertions(+), 96 deletions(-) diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.sass b/src/app/dataset-view/additional-components/settings-component/settings.component.sass index 39b98494b..8f4486520 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.sass +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.sass @@ -1,84 +1,86 @@ @import src/assets/styles/var p - margin: 0 + margin: 0 + .custom-container - display: grid - grid-template-columns: 300px 1fr + display: grid + grid-template-columns: 300px 1fr .content-container - padding: 15px 30px 0px - h2 - font-weight: 400 - margin: 0 + padding: 15px 30px 0px + h2 + font-weight: 400 + margin: 0 dl - margin: 0 + margin: 0 .p-responsive - padding-left: 16px - a - text-decoration: none - .rename-btn - padding: 3px 12px - font-size: 14px - height: 32px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - &:hover - background: rgba(27,31,36,0.16 ) + padding-left: 16px + a + text-decoration: none + .rename-btn + padding: 3px 12px + font-size: 14px + height: 32px + border: 1px solid rgba(27,31,36,0.25 ) + border-radius: 6px + &:hover + background: rgba(27,31,36,0.16 ) + .fw-bold-custom - font-weight: 600 + font-weight: 600 + .action-list - padding: 0 + padding: 0 .action-list-item - position: relative - list-style: none - border-radius: 6px - text-decoration: none - -.action-list-item a + position: relative + list-style: none + border-radius: 6px + text-decoration: none + a &:hover - cursor: pointer - text-decoration: none + cursor: pointer + text-decoration: none .action-list-content - position: relative - display: grid - width: 100% - padding: 6px 8px - font-size: 14px - font-weight: 400 - color: $app-color-fg-default - text-align: left - user-select: none - background-color: transparent - border: none - border-radius: 6px - transition: background 33.333ms linear - touch-action: manipulation - grid-template-rows: min-content - grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction" - grid-template-columns: min-content max-content - align-items: start - &:hover - background: $app-color-action-list-item-default-selected-bg - -.action-list-item--nav-active + position: relative + display: grid + width: 100% + padding: 6px 8px + font-size: 14px + font-weight: 400 + color: $app-color-fg-default + text-align: left + user-select: none + background-color: transparent + border: none + border-radius: 6px + transition: background 33.333ms linear + touch-action: manipulation + grid-template-rows: min-content + grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction" + grid-template-columns: min-content max-content + align-items: start + &:hover background: $app-color-action-list-item-default-selected-bg - &::after - position: absolute - top: calc(50% - 12px) - left: -8px - width: 4px - height: 24px - content: "" - background: $app-color-accent-fg - border-radius: 6px -.action-list-item--navActive a +.action-list-item--nav-active + background: $app-color-action-list-item-default-selected-bg + &::after + position: absolute + top: calc(50% - 12px) + left: -8px + width: 4px + height: 24px + content: "" + background: $app-color-accent-fg + border-radius: 6px + a font-weight: 600 -.action-list-sectionDivider:empty +.action-list-sectionDivider + &:empty display: block height: 1px padding: 0 @@ -86,8 +88,7 @@ p list-style: none background: $app-color-action-list-item-inline-divider border: 0 - -.action-list-sectionDivider:not(:empty) + &:not(:empty) display: flex padding: 6px 8px font-size: 12px @@ -96,44 +97,44 @@ p flex-direction: column .danger-zone__content - padding: 15px + padding: 15px + border: 1px solid rgba(27,31,36,0.25 ) + border-radius: 6px + .description + font-weight: 600 + button + color: #CF222E + padding: 3px 12px + font-size: 14px + height: 32px border: 1px solid rgba(27,31,36,0.25 ) border-radius: 6px - .description - font-weight: 600 - button - color: #CF222E - padding: 3px 12px - font-size: 14px - height: 32px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - &:hover - background: rgba(27,31,36,0.16 ) + &:hover + background: rgba(27,31,36,0.16 ) .error-block - z-index: 10 - display: inline-block - padding: 4px 8px - font-size: 12px + z-index: 10 + display: inline-block + padding: 4px 8px + font-size: 12px + border-style: solid + border-width: 1px + border-radius: 6px + background: #ffebe9 + border-color: rgba(255, 129, 130, 0.4) + position: relative + &::before + content: "\A" border-style: solid - border-width: 1px - border-radius: 6px - background: #ffebe9 - border-color: rgba(255, 129, 130, 0.4) - position: relative - &::before - content: "\A" - border-style: solid - border-width: 5px 7px 5px 5px - border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent - position: absolute - left: 15px - top: -10px - transform: rotate(90deg) + border-width: 5px 7px 5px 5px + border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent + position: absolute + left: 15px + top: -10px + transform: rotate(90deg) .error-color - color: #CF222E + color: #CF222E .error-border-color - border-color: #dc3545 + border-color: #dc3545 From f3275cac77d427a4557e4a42804bd8a3f09b65f9 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:45:58 +0300 Subject: [PATCH 16/20] Refactored dataset-view.component.sass --- .../dataset-view/dataset-view.component.sass | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/app/dataset-view/dataset-view.component.sass b/src/app/dataset-view/dataset-view.component.sass index bfaa4700e..fa4f32706 100644 --- a/src/app/dataset-view/dataset-view.component.sass +++ b/src/app/dataset-view/dataset-view.component.sass @@ -6,10 +6,12 @@ .mat-button-toggle-group width: fit-content - & .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard + .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard border-radius: 0 !important + #dataset-view-history overflow: visible + .datatab-expanding-row background: #fff border-top: 1px solid rgba(0,0,0,.12) @@ -27,34 +29,35 @@ &-content flex-grow: 1 max-width: calc(100% - 24px) - & .datatab-activity-row-summary + .datatab-activity-row-summary display: flex - & .datatab-activity-timestamp + .datatab-activity-timestamp color: rgba(0,0,0,.66) flex-shrink: 0 text-align: right width: 62px margin-right: 10px - & .datatab-activity-icon + .datatab-activity-icon &-size font-size: 15px height: 15px width: 15px - & .datatab-activity-info-container + .datatab-activity-info-container display: flex flex-grow: 1 flex-wrap: wrap padding-left: 10px max-width: calc(100% - 86px) - & .datatab-activity-title + .datatab-activity-title flex: 1 0 30% + .sql-query-editor-header - & h2 + h2 width: max-content display: inline-block - & .btnGroup-parent + .btnGroup-parent float: right - & .btnGroup-item span + .btnGroup-item span font-size: 17px font-weight: 600 @@ -62,6 +65,7 @@ color: $app-success width: min-content padding: 5px + mat-button-toggle-group box-shadow: none border-bottom: 1px solid @@ -73,16 +77,16 @@ mat-button-toggle padding: 0 5px !important z-index: 3 !important outline: none !important - &:hover box-shadow: none !important border-bottom: 1px solid !important border-radius: 0 !important &.mat-button-toggle-checked border-bottom: 2px #000 solid !important - &:ng-deep mat-button-toggle .mat-button-toggle-focus-overlay - background-color: transparent !important - opacity: 0 !important + &:ng-deep mat-button-toggle + .mat-button-toggle-focus-overlay + background-color: transparent !important + opacity: 0 !important .mat-button-toggle-checked border-left: none From bed5089bbaea9d7047ada5c207e5161dc145ccb3 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 11:48:32 +0300 Subject: [PATCH 17/20] Refactored search.component.sass --- src/app/search/search.component.sass | 31 +++++++++++++++++----------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/app/search/search.component.sass b/src/app/search/search.component.sass index 01db5c5cf..d87880582 100644 --- a/src/app/search/search.component.sass +++ b/src/app/search/search.component.sass @@ -1,13 +1,20 @@ @import src/assets/styles/var -::ng-deep .mat-checkbox-checked - & .mat-checkbox-background - background-color: $app-navyBlue -::ng-deep.mat-checkbox-disabled - color: $app-disabled -nav.navbar.navbar-expand - & * - font-size: 16px - line-height: 27px - & .search-result-container__navbar__title - line-height: 32px - font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif \ No newline at end of file + +::ng-deep + .mat-checkbox-checked + .mat-checkbox-background + background-color: $app-navyBlue + +::ng-deep + &.mat-checkbox-disabled + color: $app-disabled + +nav + &.navbar + &.navbar-expand + * + font-size: 16px + line-height: 27px + .search-result-container__navbar__title + line-height: 32px + font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif From b82e6fb6dd2ad7d2d26f040454ec2a9cf286594c Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 13:20:52 +0300 Subject: [PATCH 18/20] Added extend for hover effect. --- src/assets/styles/var.sass | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass index 15b984945..34fb7b2d7 100644 --- a/src/assets/styles/var.sass +++ b/src/assets/styles/var.sass @@ -305,21 +305,28 @@ $app-color-action-list-item-inline-divider: #d0d7de7a text-shadow: none vertical-align: top background-color: $app-color-btn-counter-bg - &:hover,&.hover - background-color: $app-color-btn-hover-bg - border-color: $app-color-btn-hover-border - transition-duration: .1s -[open]>.btn + +.hover-effect background-color: $app-color-btn-hover-bg border-color: $app-color-btn-hover-border transition-duration: .1s +.btn + &:hover,&.hover + @extend .hover-effect + +[open] + & > .btn + @extend .hover-effect + .cdk-overlay-pane box-shadow: $app-color-shadow-large + .mat-menu-content &:not(:empty) padding-top: 0px !important padding-bottom: 0px !important + .label display: inline-block padding: 0 7px From 18732f1daede8d6ecb9123009737185289e54150 Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Mon, 28 Aug 2023 15:47:54 +0300 Subject: [PATCH 19/20] Changed all class names to lowercase. --- src/app/auth/settings/settings.component.html | 114 +++++++++--------- src/app/auth/settings/settings.component.sass | 8 +- .../app-header/app-header.component.html | 36 +++--- .../app-header/app-header.component.spec.ts | 4 +- .../app-header/app-header.component.ts | 4 +- .../notification-indicator.html | 9 +- ...view-history-summary-header.component.html | 4 +- ...arch-additional-buttons-nav.component.html | 24 ++-- .../search-additional-buttons.component.html | 4 +- .../search-additional-buttons.component.sass | 10 +- .../timeline.component.html | 8 +- .../block-header/block-header.component.html | 2 +- .../data-component/data-component.html | 16 +-- .../readme-section.component.html | 2 +- .../settings.component.html | 14 +-- .../dataset-view-menu/dataset-view-menu.html | 40 +++--- .../dataset-view/dataset-view.component.sass | 8 +- src/assets/styles/var.sass | 35 +++--- src/assets/svg/notifications-checked.svg | 2 +- src/styles.sass | 79 ++++++------ 20 files changed, 203 insertions(+), 220 deletions(-) diff --git a/src/app/auth/settings/settings.component.html b/src/app/auth/settings/settings.component.html index 6bde41bb3..84f08562b 100644 --- a/src/app/auth/settings/settings.component.html +++ b/src/app/auth/settings/settings.component.html @@ -24,237 +24,231 @@
-
+
-