diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 992a467389..93477a3af4 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -12,6 +12,7 @@ @import "./ui-operations.scss"; @import 'react-loading-skeleton/dist/skeleton.css'; @import './table-component.scss'; + /* ibm-plex-sans-100 - latin */ @font-face { font-display: swap; @@ -269,7 +270,8 @@ button { .emoji-mart-scroll+.emoji-mart-bar { display: none; } -.accordion-item{ + +.accordion-item { border: solid var(--slate5); border-width: 0px 0px 1px 0px; } @@ -301,6 +303,7 @@ button { .accordion-body { padding: 6px 16px 20px 16px !important; + .form-label { font-weight: 400; font-size: 12px; @@ -327,7 +330,7 @@ button { .resizer-select, .resizer-active { - border: solid 1px $primary !important; + border: solid 1px $primary !important; .top-right, .top-left, @@ -827,7 +830,7 @@ button { .list-group.list-group-transparent.dark .all-apps-link, .list-group-item-action.dark.active { - background-color: $dark-background !important; + background-color: $dark-background !important; } } @@ -1559,7 +1562,7 @@ button { .select-search-dark input { width: 224px !important; height: 32px !important; - border-radius: $border-radius !important; + border-radius: $border-radius !important; } } @@ -1570,7 +1573,7 @@ button { .select-search__value input, .select-search-dark input { height: 32px !important; - border-radius: $border-radius !important; + border-radius: $border-radius !important; } } @@ -1631,7 +1634,7 @@ button { -webkit-appearance: none; -moz-appearance: none; appearance: none; - border-radius: $border-radius !important; + border-radius: $border-radius !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @@ -1971,6 +1974,7 @@ button { text-align: center; color: #888; } + // jet-table-footer is common class used in other components other than table .jet-table-footer { .table-footer { @@ -2904,12 +2908,14 @@ input:focus-visible { width: 210px !important; //adjusted with padding box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08) !important; color: var(--slate12); + .flexbox-fix:nth-child(3) { div:nth-child(1) { - input{ + input { width: 100% !important; } - label{ + + label { color: var(--slate12) !important; } } @@ -3085,6 +3091,7 @@ input:focus-visible { .DateRangePickerInput__withBorder { border: 1px solid #1f2936; } + .main .canvas-container .canvas-area { background: #2f3c4c; } @@ -3673,7 +3680,7 @@ input[type="text"] { .nav-tabs .nav-link.active { font-weight: 400 !important; - color: $primary !important; + color: $primary !important; } .empty { @@ -4199,7 +4206,7 @@ input[type="text"] { .tabs-inspector.dark { .nav-link.active { - border-bottom: 1px solid $primary !important; + border-bottom: 1px solid $primary !important; } } @@ -4448,7 +4455,7 @@ input[type="text"] { } input { - border-radius: $border-radius !important; + border-radius: $border-radius !important; padding-left: 1.75rem !important; } } @@ -4617,8 +4624,8 @@ input[type="text"] { } .modal-content.home-modal-component.dark { - background-color: $bg-dark-light !important; - color: $white !important; + background-color: $bg-dark-light !important; + color: $white !important; .modal-title { color: $white !important; @@ -4651,22 +4658,22 @@ input[type="text"] { } .form-control { - border-color: $border-grey-dark !important; + border-color: $border-grey-dark !important; color: inherit; } input { - background-color: $bg-dark-light !important; + background-color: $bg-dark-light !important; } .form-select { - background-color: $bg-dark !important; - color: $white !important; - border-color: $border-grey-dark !important; + background-color: $bg-dark !important; + color: $white !important; + border-color: $border-grey-dark !important; } .text-muted { - color: $white !important; + color: $white !important; } } @@ -4977,7 +4984,7 @@ div#driver-page-overlay { } .dark-theme-walkthrough#driver-popover-item { - background-color: $bg-dark-light !important; + background-color: $bg-dark-light !important; border-color: rgba(101, 109, 119, 0.16) !important; .driver-popover-title { @@ -4985,7 +4992,7 @@ div#driver-page-overlay { } .driver-popover-tip { - border-color: transparent transparent transparent $bg-dark-light !important; + border-color: transparent transparent transparent $bg-dark-light !important; } .driver-popover-description { @@ -5017,7 +5024,7 @@ div#driver-page-overlay { .driver-next-btn, .driver-prev-btn { - color: $primary !important; + color: $primary !important; } .driver-disabled { @@ -5141,7 +5148,7 @@ div#driver-page-overlay { } .fx-canvas { - background:var(--slate4); + background: var(--slate4); padding: 0px; display: flex; height: 32px; @@ -5153,7 +5160,7 @@ div#driver-page-overlay { align-items: center; div { - background:var(--slate4) !important; + background: var(--slate4) !important; display: flex; justify-content: center; align-items: center; @@ -5161,6 +5168,7 @@ div#driver-page-overlay { padding: 0px; } } + .org-name { color: var(--slate12) !important; font-size: 12px; @@ -5489,7 +5497,7 @@ div#driver-page-overlay { } .selected-node { - border-color: $primary-light !important; + border-color: $primary-light !important; } .json-tree-icon-container .selected-node>svg:first-child { @@ -5580,7 +5588,7 @@ div#driver-page-overlay { } .selected-node { - border-color: $primary-light !important; + border-color: $primary-light !important; } .selected-node .group-object-container .badge { @@ -5898,7 +5906,7 @@ div#driver-page-overlay { //Kanban board .kanban-container.dark-themed { - background-color: $bg-dark-light !important; + background-color: $bg-dark-light !important; .kanban-column { .card-header { @@ -5944,7 +5952,7 @@ div#driver-page-overlay { } .dnd-card.card.card-dark { - background-color: $bg-dark !important; + background-color: $bg-dark !important; } } @@ -7182,7 +7190,7 @@ tbody { } .application-brand { - a{ + a { height: 48px; position: relative; display: flex; @@ -7940,8 +7948,9 @@ tbody { width: 240px; height: 28px; flex-direction: row; - div{ - a{ + + div { + a { text-decoration: none; } } @@ -8786,7 +8795,7 @@ tbody { flex-direction: row !important; justify-content: center !important; align-items: center !important; - padding: 4px 16px !important; + //padding: 4px 16px !important; width: 100% !important; height: 28px !important; background: var(--grass2) !important; @@ -8799,7 +8808,7 @@ tbody { flex-direction: row !important; justify-content: center !important; align-items: center !important; - padding: 4px 16px !important; + //padding: 4px 16px !important; width: 100% !important; height: 28px !important; border-radius: 6px !important; @@ -10226,7 +10235,7 @@ tbody { border-radius: 6px !important; margin-bottom: 4px !important; color: var(--slate12) !important; - transition:none; + transition: none; &:hover { @@ -10250,13 +10259,15 @@ tbody { box-shadow: 0 0 0 1000px var(--base) inset !important; -webkit-text-fill-color: var(--slate12) !important; - &:hover { - box-shadow: 0 0 0 1000px var(--slate1) inset !important; - -webkit-text-fill-color: var(--slate12) !important;} + &:hover { + box-shadow: 0 0 0 1000px var(--slate1) inset !important; + -webkit-text-fill-color: var(--slate12) !important; + } - &:focus-visible { + &:focus-visible { box-shadow: 0 0 0 1000px var(--indigo2) inset !important; - -webkit-text-fill-color: var(--slate12) !important;} + -webkit-text-fill-color: var(--slate12) !important; + } } @@ -11822,14 +11833,17 @@ tbody { width: 170px !important; } } -.custom-gap-8{ + +.custom-gap-8 { gap: 8px; } -.color-slate-11{ + +.color-slate-11 { color: var(--slate11) !important; } -.custom-gap-6{ - gap:6px + +.custom-gap-6 { + gap: 6px } // ToolJet Database buttons @@ -11839,22 +11853,26 @@ tbody { padding: 4px 10px; } -.custom-gap-2{ - gap:2px +.custom-gap-2 { + gap: 2px } -.custom-gap-4{ + +.custom-gap-4 { gap: 4px; } -.text-black-000{ + +.text-black-000 { color: var(--text-black-000) !important; } -.custom-gap-12{ - gap:12px + +.custom-gap-12 { + gap: 12px } -#inspector-tabpane-properties{ + +#inspector-tabpane-properties { .accordion { - .accordion-item:last-child{ + .accordion-item:last-child { border-bottom: none !important; } } -} +} \ No newline at end of file