diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss deleted file mode 100644 index f7d10e633..000000000 --- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss +++ /dev/null @@ -1,58 +0,0 @@ -.button { - font-family: $body-font-family; - font-weight: $font-weight-medium; - - &.round { - border-radius: 1000px; - } -} - -select { - height: 2.5rem; -} - -.card { - margin-bottom: var(--space-small); - padding: var(--space-normal); -} - -code { - border: 0; - font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', - '"Liberation Mono"', '"Courier New"', 'monospace'; - font-size: $font-size-mini; - - &.hljs { - background: $color-background; - border-radius: var(--border-radius-large); - padding: $space-two; - @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100; - } -} - -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.text-capitalize { - text-transform: capitalize; -} - -.cursor-pointer { - cursor: pointer; -} - -// remove when grid gutters are fixed -.columns.with-right-space { - padding-right: var(--space-normal); -} - -.badge { - border-radius: var(--border-radius-normal); -} - -.padding-right-small { - padding-right: var(--space-one); -} diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss deleted file mode 100644 index 3fd834cdd..000000000 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ /dev/null @@ -1,623 +0,0 @@ -// Foundation for Sites Settings -// ----------------------------- -// -// Table of Contents: -// -// 1. Global -// 2. Breakpoints -// 3. The Grid -// 4. Base Typography -// 5. Typography Helpers -// 6. Abide -// 7. Accordion -// 8. Accordion Menu -// 9. Badge -// 10. Breadcrumbs -// 11. Button -// 12. Button Group -// 13. Callout -// 14. Card -// 15. Close Button -// 16. Drilldown -// 17. Dropdown -// 18. Dropdown Menu -// 19. Forms -// 20. Label -// 21. Media Object -// 22. Menu -// 23. Meter -// 24. Off-canvas -// 25. Orbit -// 26. Pagination -// 27. Progress Bar -// 28. Responsive Embed -// 29. Reveal -// 30. Slider -// 31. Switch -// 32. Table -// 33. Tabs -// 34. Thumbnail -// 35. Title Bar -// 36. Tooltip -// 37. Top Bar - -@import '~foundation-sites/scss/util/util'; -// 1. Global -// --------- - -// Disable contrast warnings in Foundation. -$contrast-warnings: false; - -$global-font-size: 16px; -$global-width: 100%; -$global-lineheight: 1.5; -$foundation-palette: (primary: $color-woot, - secondary: #5d7592, - success: #44ce4b, - warning: #ffc532, - alert: #ff382d); -$light-gray: #c0ccda; -$medium-gray: #8492a6; -$dark-gray: $color-gray; -$black: #000; -$white: #fff; -$body-background: $white; -$body-font-color: $color-body; -$body-font-family: 'PlusJakarta', --apple-system, -system-ui, -BlinkMacSystemFont, -"Segoe UI", -Roboto, -"Helvetica Neue", -Tahoma, -Arial, -sans-serif; -$body-antialiased: true; -$global-margin: $space-small; -$global-padding: $space-small; -$global-weight-normal: normal; -$global-weight-bold: bold; -$global-radius: 0; -$global-text-direction: ltr; -$global-flexbox: false; -$print-transparent-backgrounds: true; - -@include add-foundation-colors; - -// 2. Breakpoints -// -------------- - -$breakpoints: (small: 0, - medium: 640px, - large: 1024px, - xlarge: 1200px, - xxlarge: 1400px, - xxxlarge: 1600px, -); -$print-breakpoint: large; -$breakpoint-classes: (small medium large); - -// 3. The Grid -// ----------- - -$grid-row-width: $global-width; -$grid-column-count: 12; -$grid-column-gutter: (small: $zero, - medium: $zero); -$grid-column-align-edge: true; -$block-grid-max: 8; - -// 4. Base Typography -// ------------------ - -$header-font-family: $body-font-family; -$header-font-weight: $font-weight-medium; -$header-font-style: normal; -$font-family-monospace: $body-font-family; -$header-color: $color-heading; -$header-lineheight: 1.4; -$header-margin-bottom: 0.3125rem; -$header-styles: (small: ("h1": ("font-size": 24), - "h2": ("font-size": 20), - "h3": ("font-size": 19), - "h4": ("font-size": 18), - "h5": ("font-size": 17), - "h6": ("font-size": 16)), - medium: ("h1": ("font-size": 48), - "h2": ("font-size": 40), - "h3": ("font-size": 31), - "h4": ("font-size": 25), - "h5": ("font-size": 20), - "h6": ("font-size": 16))); -$header-text-rendering: optimizeLegibility; -$small-font-size: 80%; -$header-small-font-color: $medium-gray; -$paragraph-lineheight: 1.65; -$paragraph-margin-bottom: var(--space-small); -$paragraph-text-rendering: optimizeLegibility; -$code-color: $black; -$code-font-family: $font-family-monospace; -$code-font-weight: $global-weight-normal; -$code-background: $light-gray; -$code-border: 1px solid $medium-gray; -$code-padding: rem-calc(2 5 1); -$anchor-color: $primary-color; -$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); -$anchor-text-decoration: none; -$anchor-text-decoration-hover: none; -$hr-width: $global-width; -$hr-border: 1px solid $medium-gray; -$hr-margin: rem-calc(20) auto; -$list-lineheight: $paragraph-lineheight; -$list-margin-bottom: $paragraph-margin-bottom; -$list-style-type: disc; -$list-style-position: outside; -$list-side-margin: 0.78125rem; -$list-nested-side-margin: 0.78125rem; -$defnlist-margin-bottom: 0.6875rem; -$defnlist-term-weight: $global-weight-bold; -$defnlist-term-margin-bottom: 0.1875rem; -$blockquote-color: $dark-gray; -$blockquote-padding: rem-calc(9 20 0 19); -$blockquote-border: 1px solid $medium-gray; -$cite-font-size: rem-calc(13); -$cite-color: $dark-gray; -$cite-pseudo-content: '\2014 \0020'; -$keystroke-font: $font-family-monospace; -$keystroke-color: $black; -$keystroke-background: $light-gray; -$keystroke-padding: rem-calc(2 4 0); -$keystroke-radius: $global-radius; -$abbr-underline: 1px dotted $black; - -// 5. Typography Helpers -// --------------------- - -$lead-font-size: $global-font-size * 1.25; -$lead-lineheight: 1.6; -$subheader-lineheight: 1.4; -$subheader-color: $dark-gray; -$subheader-font-weight: $global-weight-normal; -$subheader-margin-top: 0.125rem; -$subheader-margin-bottom: 0.3125rem; -$stat-font-size: 1.5625rem; - -// 6. Abide -// -------- - -$abide-inputs: true; -$abide-labels: true; -$input-background-invalid: get-color(alert); -$form-label-color-invalid: get-color(alert); -$input-error-color: get-color(alert); -$input-error-font-size: rem-calc(12); -$input-error-font-weight: $global-weight-bold; - -// 7. Accordion -// ------------ - -$accordion-background: $white; -$accordion-plusminus: true; -$accordion-title-font-size: rem-calc(12); -$accordion-item-color: $primary-color; -$accordion-item-background-hover: $light-gray; -$accordion-item-padding: 0.78125rem 0.625rem; -$accordion-content-background: $white; -$accordion-content-border: 1px solid $light-gray; -$accordion-content-color: $body-font-color; -$accordion-content-padding: 0.625rem; - -// 8. Accordion Menu -// ----------------- - -$accordionmenu-arrows: true; -$accordionmenu-arrow-color: $primary-color; -$accordionmenu-arrow-size: 6px; - -// 9. Badge -// -------- - -$badge-background: $primary-color; -$badge-color: $white; -$badge-color-alt: $black; -$badge-palette: $foundation-palette; -$badge-padding: var(--space-smaller); -$badge-minwidth: 2.1em; -$badge-font-size: var(--font-size-nano); - -// 10. Breadcrumbs -// --------------- - -$breadcrumbs-margin: 0 0 $global-margin 0; -$breadcrumbs-item-font-size: rem-calc(11); -$breadcrumbs-item-color: $primary-color; -$breadcrumbs-item-color-current: $black; -$breadcrumbs-item-color-disabled: $medium-gray; -$breadcrumbs-item-margin: 0.46875rem; -$breadcrumbs-item-uppercase: true; -$breadcrumbs-item-slash: true; - -// 11. Button -// ---------- - -$button-padding: var(--space-smaller) 1em; -$button-margin: 0 0 $global-margin 0; -$button-fill: solid; -$button-background: $primary-color; -$button-background-hover: scale-color($button-background, $lightness: -15%); -$button-color: $white; -$button-color-alt: $white; -$button-radius: var(--border-radius-normal); -$button-sizes: (tiny: var(--font-size-micro), - small: var(--font-size-mini), - default: var(--font-size-small), - large: var(--font-size-medium)); -$button-palette: $foundation-palette; -$button-opacity-disabled: 0.4; -$button-background-hover-lightness: -20%; -$button-hollow-hover-lightness: -50%; -$button-transition: background-color 0.25s ease-out, -color 0.25s ease-out; - -// 12. Button Group -// ---------------- - -$buttongroup-margin: 0; -$buttongroup-spacing: 0; -$buttongroup-child-selector: '.button'; -$buttongroup-expand-max: 6; -$buttongroup-radius-on-each: false; - -// 13. Callout -// ----------- - -$callout-background: $white; -$callout-background-fade: 85%; -$callout-border: 1px solid rgba($black, 0.25); -$callout-margin: 0 0 0.625rem 0; -$callout-padding: 0.625rem; -$callout-font-color: $body-font-color; -$callout-font-color-alt: $body-background; -$callout-radius: $global-radius; -$callout-link-tint: 30%; - -// 14. Card -// -------- - -$card-background: $white; -$card-font-color: $body-font-color; -$card-divider-background: $light-gray; -$card-border: 1px solid var(--color-border); -$card-shadow: var(--shadow-small); -$card-border-radius: var(--border-radius-normal); -$card-padding: var(--space-small); -$card-margin: $global-margin; - -// 15. Close Button -// ---------------- - -$closebutton-position: right top; -$closebutton-offset-horizontal: (small: 0.66rem, - medium: 1rem); -$closebutton-offset-vertical: (small: 0.33em, - medium: 0.5rem); -$closebutton-size: (small: 1.5em, - medium: 2em); -$closebutton-lineheight: 1; -$closebutton-color: $dark-gray; -$closebutton-color-hover: $black; - -// 16. Drilldown -// ------------- - -$drilldown-transition: transform 0.15s linear; -$drilldown-arrows: true; -$drilldown-arrow-color: $primary-color; -$drilldown-arrow-size: 6px; -$drilldown-background: $white; - -// 17. Dropdown -// ------------ - -$dropdown-padding: 0.625rem; -$dropdown-background: $body-background; -$dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 0.625rem; -$dropdown-width: 300px; -$dropdown-radius: $global-radius; -$dropdown-sizes: (tiny: 100px, - small: 200px, - large: 400px); - -// 18. Dropdown Menu -// ----------------- - -$dropdownmenu-arrows: true; -$dropdownmenu-arrow-color: $anchor-color; -$dropdownmenu-arrow-size: 6px; -$dropdownmenu-min-width: 200px; -$dropdownmenu-background: $white; -$dropdownmenu-border: 1px solid $medium-gray; - -// 19. Forms -// --------- - -$fieldset-border: 1px solid $light-gray; -$fieldset-padding: $space-two; -$fieldset-margin: $space-one $zero; -$legend-padding: rem-calc(0 3); -$form-spacing: $space-normal; -$helptext-color: $color-body; -$helptext-font-size: $font-size-small; -$helptext-font-style: italic; -$input-prefix-color: $color-body; -$input-prefix-background: var(--b-100); -$input-prefix-border: 1px solid $color-border; -$input-prefix-padding: 0.625rem; -$form-label-color: $color-body; -$form-label-font-size: rem-calc(14); -$form-label-font-weight: $font-weight-medium; -$form-label-line-height: 1.8; -$select-background: $white; -$select-triangle-color: $dark-gray; -$select-radius: var(--border-radius-normal); -$input-color: $color-body; -$input-placeholder-color: $light-gray; -$input-font-family: inherit; -$input-font-size: $font-size-default; -$input-font-weight: $global-weight-normal; -$input-background: $white; -$input-background-focus: $white; -$input-background-disabled: $light-gray; -$input-border: 1px solid var(--s-200); -$input-border-focus: 1px solid lighten($primary-color, 15%); -$input-shadow: 0; -$input-shadow-focus: 0; -$input-cursor-disabled: not-allowed; -$input-transition: border-color 0.25s ease-in-out; -$input-number-spinners: true; -$input-radius: var(--border-radius-normal); -$form-button-radius: var(--border-radius-normal); - -// 20. Label -// --------- - -$label-background: $white; -$label-color: $black; -$label-color-alt: $black; -$label-palette: $foundation-palette; -$label-font-size: $font-size-mini; -$label-padding: $space-smaller $space-small; -$label-radius: var(--border-radius-small); - -// 21. Media Object -// ---------------- - -$mediaobject-margin-bottom: $global-margin; -$mediaobject-section-padding: $global-padding; -$mediaobject-image-width-stacked: 100%; - -// 22. Menu -// -------- - -$menu-margin: 0; -$menu-margin-nested: $space-medium; -$menu-item-padding: $space-slab; -$menu-item-color-active: $white; -$menu-item-background-active: $color-background; -$menu-icon-spacing: 0.15625rem; -$menu-item-background-hover: $light-gray; -$menu-border: $light-gray; - -// 23. Meter -// --------- - -$meter-height: 0.625rem; -$meter-radius: $global-radius; -$meter-background: $medium-gray; -$meter-fill-good: $success-color; -$meter-fill-medium: $warning-color; -$meter-fill-bad: $alert-color; - -// 24. Off-canvas -// -------------- - -$offcanvas-sizes: (small: 14.375, - medium: 14.375, -); -$offcanvas-vertical-sizes: (small: 14.375, - medium: 14.375, -); -$offcanvas-background: $light-gray; -$offcanvas-shadow: 0 0 10px rgba($black, 0.7); -$offcanvas-push-zindex: 1; -$offcanvas-overlap-zindex: 10; -$offcanvas-reveal-zindex: 1; -$offcanvas-transition-length: 0.5s; -$offcanvas-transition-timing: ease; -$offcanvas-fixed-reveal: true; -$offcanvas-exit-background: rgba($white, 0.25); -$maincontent-class: 'off-canvas-content'; - -// 25. Orbit -// --------- - -$orbit-bullet-background: $medium-gray; -$orbit-bullet-background-active: $dark-gray; -$orbit-bullet-diameter: 0.75rem; -$orbit-bullet-margin: 0.0625rem; -$orbit-bullet-margin-top: 0.5rem; -$orbit-bullet-margin-bottom: 0.5rem; -$orbit-caption-background: rgba($black, 0.5); -$orbit-caption-padding: 0.625rem; -$orbit-control-background-hover: rgba($black, 0.5); -$orbit-control-padding: 0.625rem; -$orbit-control-zindex: 10; - -// 26. Pagination -// -------------- - -$pagination-font-size: rem-calc(14); -$pagination-margin-bottom: $global-margin; -$pagination-item-color: $black; -$pagination-item-padding: rem-calc(3 10); -$pagination-item-spacing: rem-calc(1); -$pagination-radius: $global-radius; -$pagination-item-background-hover: $light-gray; -$pagination-item-background-current: $primary-color; -$pagination-item-color-current: $white; -$pagination-item-color-disabled: $medium-gray; -$pagination-ellipsis-color: $black; -$pagination-mobile-items: false; -$pagination-mobile-current-item: false; -$pagination-arrows: true; - -// 27. Progress Bar -// ---------------- - -$progress-height: 0.625rem; -$progress-background: $medium-gray; -$progress-margin-bottom: $global-margin; -$progress-meter-background: $primary-color; -$progress-radius: $global-radius; - -// 28. Responsive Embed -// -------------------- - -$responsive-embed-margin-bottom: rem-calc(16); -$responsive-embed-ratios: (default: 4 by 3, - widescreen: 16 by 9); - -// 29. Reveal -// ---------- - -$reveal-background: $white; -$reveal-width: 600px; -$reveal-max-width: $global-width; -$reveal-padding: $global-padding; -$reveal-border: 1px solid $medium-gray; -$reveal-radius: $global-radius; -$reveal-zindex: 1005; -$reveal-overlay-background: rgba($black, 0.45); - -// 30. Slider -// ---------- - -$slider-width-vertical: 0.3125rem; -$slider-transition: all 0.2s ease-in-out; -$slider-height: 0.3125rem; -$slider-background: $light-gray; -$slider-fill-background: $medium-gray; -$slider-handle-height: 0.875rem; -$slider-handle-width: 0.875rem; -$slider-handle-background: $primary-color; -$slider-opacity-disabled: 0.25; -$slider-radius: $global-radius; - -// 31. Switch -// ---------- - -$switch-background: $light-gray; -$switch-background-active: $primary-color; -$switch-height: $space-two; -$switch-height-tiny: $space-slab; -$switch-height-small: $space-normal; -$switch-height-large: $space-large; -$switch-radius: $space-large; -$switch-margin: $global-margin; -$switch-paddle-background: $white; -$switch-paddle-offset: $space-micro; -$switch-paddle-radius: $space-large; -$switch-paddle-transition: all 0.15s ease-out; - -// 32. Table -// --------- - -$table-background: transparent; -$table-color-scale: 5%; -$table-border: 1px solid transparent; -$table-padding: rem-calc(8 10 10); -$table-hover-scale: 2%; -$table-row-hover: darken($table-background, $table-hover-scale); -$table-row-stripe-hover: darken($table-background, - $table-color-scale + $table-hover-scale); -$table-is-striped: false; -$table-striped-background: smart-scale($table-background, $table-color-scale); -$table-stripe: even; -$table-head-background: smart-scale($table-background, $table-color-scale / 2); -$table-head-row-hover: darken($table-head-background, $table-hover-scale); -$table-foot-background: smart-scale($table-background, $table-color-scale); -$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); -$table-head-font-color: $body-font-color; -$table-foot-font-color: $body-font-color; -$show-header-for-stacked: false; - -// 33. Tabs -// -------- - -$tab-margin: 0; - -$tab-background: transparent; -$tab-background-active: transparent; -$tab-item-font-size: $font-size-small; -$tab-item-background-hover: transparent; -$tab-item-padding: $space-one $zero; -$tab-color: $primary-color; -$tab-active-color: $primary-color; -$tab-expand-max: 6; -$tab-content-background: transparent; -$tab-content-border: transparent; -$tab-content-color: foreground($tab-background, $primary-color); -$tab-content-padding: 0.625rem; - -// 34. Thumbnail -// ------------- - -$thumbnail-border: solid 4px $white; -$thumbnail-margin-bottom: $global-margin; -$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); -$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); -$thumbnail-transition: box-shadow 200ms ease-out; -$thumbnail-radius: $global-radius; - -// 35. Title Bar -// ------------- - -$titlebar-background: $black; -$titlebar-color: $white; -$titlebar-padding: 0.3125rem; -$titlebar-text-font-weight: bold; -$titlebar-icon-color: $white; -$titlebar-icon-color-hover: $medium-gray; -$titlebar-icon-spacing: 0.15625rem; - -// 36. Tooltip -// ----------- - -$has-tip-font-weight: $global-weight-bold; -$has-tip-border-bottom: dotted 1px $dark-gray; -$tooltip-background-color: $black; -$tooltip-color: $white; -$tooltip-padding: 0.46875rem; -$tooltip-font-size: $font-size-mini; -$tooltip-pip-width: 0.46875rem; -$tooltip-pip-height: $tooltip-pip-width * 0.866; -$tooltip-radius: $global-radius; - -// 37. Top Bar -// ----------- - -$topbar-padding: 0.3125; -$topbar-background: $light-gray; -$topbar-submenu-background: $topbar-background; -$topbar-title-spacing: 0.3125 0.625rem 0.3125 0; -$topbar-input-width: 200px; -$topbar-unstack-breakpoint: medium; - - -// Internal variable that contains the flex justifying options -$-zf-flex-justify: -zf-flex-justify($global-text-direction); - -$menu-items-padding: $space-one; -$xy-grid: false; diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss index 0b400c4e9..48ee1918b 100644 --- a/app/javascript/dashboard/assets/scss/_helper-classes.scss +++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss @@ -1,64 +1,22 @@ -.bg-light { - @apply bg-slate-25 dark:bg-slate-800; -} - -.flex-center { - @include flex-align(center, middle); - display: flex; -} - -.bottom-space-fix { - margin-bottom: auto; -} - -.full-height { - @include full-height(); -} - +// loader class .spinner { @include color-spinner(); - display: inline-block; - height: $space-medium; - padding: $zero $space-medium; - position: relative; - vertical-align: middle; - width: $space-medium; + @apply inline-block h-6 py-0 px-6 relative align-middle w-6; &.message { @include normal-shadow; - background: $color-white; - border-radius: $space-large; - left: 0; - margin: $space-slab auto; - padding: $space-normal; - top: 0; + @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0; &::before { - margin-left: -$space-slab; - margin-top: -$space-slab; + @apply -ml-3 -mt-3; } } &.small { - height: $space-normal; - width: $space-normal; + @apply h-4 w-4; &::before { - height: $space-normal; - margin-top: -$space-small; - width: $space-normal; + @apply h-4 -mt-2 w-4; } } } - -.justify-space-between { - justify-content: space-between; -} - -.w-full { - width: 100%; -} - -.h-full { - height: 100%; -} diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss index 594a14d95..ea40c1f3a 100644 --- a/app/javascript/dashboard/assets/scss/_layout.scss +++ b/app/javascript/dashboard/assets/scss/_layout.scss @@ -1,5 +1,19 @@ +// scss-lint:disable SpaceAfterPropertyColon +// @import 'shared/assets/fonts/inter'; + html, body { + font-family: + 'PlusJakarta', + Inter, + -apple-system, + system-ui, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + Arial, + sans-serif !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; height: 100%; diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss index 6f16a2af4..36679fc60 100644 --- a/app/javascript/dashboard/assets/scss/_rtl.scss +++ b/app/javascript/dashboard/assets/scss/_rtl.scss @@ -131,37 +131,12 @@ } } - .search-header--wrap { - .search--input { - text-align: right; - } - - .layout-switch__container { - transform: rotate(180deg); - } - } - // Basic filter dropdown .basic-filter { left: 0; right: unset; } - // Card label - .label-container { - .label { - margin-left: var(--space-smaller); - margin-right: 0; - } - } - - // Secondary sidebar toggle button - .toggle-sidebar { - margin-left: 0; - margin-right: var(--space-minus-small); - transform: rotate(180deg); - } - // Bulk actions .bulk-action__container { .triangle { @@ -202,22 +177,6 @@ } } - // Notification panel - .notification-wrap { - left: 0; - right: var(--space-jumbo); - - .action-button { - margin-left: var(--space-small); - margin-right: 0; - } - - .notification-content--wrap { - margin-left: 0; - margin-right: var(--space-small); - } - } - // Help center .article-container .row--article-block { td:last-child { @@ -324,10 +283,6 @@ // Other changes - .account-selector--wrap { - direction: initial; - } - .colorpicker--chrome { direction: initial; } @@ -347,9 +302,4 @@ .contact--form .input-group { direction: initial; } - - // scss-lint:disable QualifyingElement - .dropdown-menu--header > span.title { - text-align: right; - } } diff --git a/app/javascript/dashboard/assets/scss/_typography.scss b/app/javascript/dashboard/assets/scss/_typography.scss deleted file mode 100644 index ee35a9cf0..000000000 --- a/app/javascript/dashboard/assets/scss/_typography.scss +++ /dev/null @@ -1,33 +0,0 @@ -.page-title { - font-size: $font-size-big; -} - -.page-sub-title { - font-size: $font-size-large; - word-wrap: break-word; -} - -.block-title { - font-size: $font-size-medium; -} - -.sub-block-title { - font-size: $font-size-default; -} - -.text-block-title { - font-size: $font-size-small; -} - -.text-muted { - color: var(--s-300); -} - -a { - font-size: $font-size-small; -} - -p { - font-size: $font-size-small; - word-spacing: .12em; -} diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss deleted file mode 100644 index 99f0fe3eb..000000000 --- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss +++ /dev/null @@ -1,73 +0,0 @@ -.margin-bottom-small { - margin-bottom: var(--space-small); -} - -.margin-right-smaller { - margin-right: var(--space-smaller); -} - -.margin-left-minus-slab { - margin-left: var(--space-minus-slab); -} - -.margin-right-minus-slab { - margin-right: var(--space-minus-slab); -} - -.fs-small { - font-size: var(--font-size-small); -} - -.fs-default { - font-size: var(--font-size-default); -} - -.fw-medium { - font-weight: var(--font-weight-medium); -} - -.p-normal { - padding: var(--space-normal); -} - -.overflow-scroll { - overflow: scroll; -} - -.overflow-auto { - overflow: auto; -} - -.overflow-hidden { - overflow: hidden; -} - -.border-right { - @apply border-r border-slate-50 dark:border-slate-700; -} - -.border-left { - border-left: 1px solid var(--color-border); -} - -.text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flex-between { - align-items: center; - display: flex; - justify-content: space-between; -} - -.flex-end { - display: flex; - justify-content: end; -} - -.flex-align-center { - align-items: center; - display: flex; -} diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss index 2773ced6f..cdc522224 100644 --- a/app/javascript/dashboard/assets/scss/_woot.scss +++ b/app/javascript/dashboard/assets/scss/_woot.scss @@ -15,62 +15,23 @@ @import 'variables'; @import 'mixins'; -@import 'foundation-settings'; @import 'helper-classes'; @import 'formulate'; @import 'date-picker'; -@import 'foundation-sites/scss/foundation'; - -@include foundation-everything($flex: true); - -@include foundation-prototype-text-utilities; -@include foundation-prototype-text-transformation; -@include foundation-prototype-text-decoration; -@include foundation-prototype-font-styling; -@include foundation-prototype-list-style-type; -@include foundation-prototype-rounded; -@include foundation-prototype-bordered; -@include foundation-prototype-shadow; -@include foundation-prototype-separator; -@include foundation-prototype-overflow; -@include foundation-prototype-display; -@include foundation-prototype-position; -@include foundation-prototype-border-box; -@include foundation-prototype-border-none; -@include foundation-prototype-sizing; -@include foundation-prototype-spacing; - -@import 'typography'; @import 'layout'; @import 'animations'; -@import 'foundation-custom'; @import 'rtl'; +@import 'widgets/base'; @import 'widgets/buttons'; -@import 'widgets/conv-header'; -@import 'widgets/conversation-card'; @import 'widgets/conversation-view'; -@import 'widgets/forms'; -@import 'widgets/login'; -@import 'widgets/modal'; -@import 'widgets/reply-box'; -@import 'widgets/report'; -@import 'widgets/search-box'; -@import 'widgets/sidemenu'; -@import 'widgets/snackbar'; -@import 'widgets/states'; -@import 'widgets/status-bar'; @import 'widgets/tabs'; @import 'widgets/woot-tables'; -@import 'views/settings/inbox'; -@import 'views/settings/integrations'; - @import 'plugins/multiselect'; @import 'plugins/dropdown'; @import '~shared/assets/stylesheets/ionicons'; -@import 'utility-helpers'; .tooltip { @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900; diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss index 100662394..e08099ae6 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss @@ -1,46 +1,7 @@ .dropdown-pane { - @include elegant-card; - @include border-light; - box-sizing: content-box; - padding: var(--space-small); - width: fit-content; - z-index: var(--z-index-very-high); + @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999]; &.dropdown-pane--open { - @apply bg-white dark:bg-slate-800; - display: block; - visibility: visible; - } - - &.dropdowm--bottom { - &::before { - @include arrow(top, var(--color-border-light), 14px); - position: absolute; - right: 6px; - top: -14px; - } - - &::after { - @include arrow(top, $color-white, var(--space-slab)); - position: absolute; - right: var(--space-small); - top: -12px; - } - } - - &.dropdowm--top { - &::before { - @include arrow(bottom, var(--color-border-light), 14px); - bottom: -14px; - position: absolute; - right: 6px; - } - - &::after { - @include arrow(bottom, $color-white, var(--space-slab)); - bottom: -12px; - position: absolute; - right: var(--space-small); - } + @apply bg-white absolute dark:bg-slate-800 block visible; } } diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index 0fddae3d1..9170715e0 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -97,6 +97,10 @@ .multiselect__tags { @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0; + + input { + @apply border-0 border-none; + } } .multiselect__tags-wrap { @@ -149,7 +153,6 @@ } .multiselect-wrap--small { - .multiselect__tags, .multiselect__input, .multiselect { @@ -180,7 +183,6 @@ .multiselect--disabled .multiselect__select { @apply bg-transparent; } - } .multiselect-wrap--medium { diff --git a/app/javascript/dashboard/assets/scss/storybook.scss b/app/javascript/dashboard/assets/scss/storybook.scss index 457560aa9..fa2455918 100644 --- a/app/javascript/dashboard/assets/scss/storybook.scss +++ b/app/javascript/dashboard/assets/scss/storybook.scss @@ -13,20 +13,14 @@ @import '~shared/assets/stylesheets/ionicons'; @import 'mixins'; -@import 'foundation-settings'; @import 'helper-classes'; -@import 'foundation-sites/scss/foundation'; - -@include foundation-prototype-spacing; -@include foundation-everything($flex: true); @import 'typography'; @import 'layout'; @import 'animations'; -@import 'foundation-custom'; @import 'widgets/buttons'; -@import 'widgets/forms'; +@import 'widgets/base'; @import 'plugins/multiselect'; @@ -36,7 +30,6 @@ @import 'tailwindcss/utilities'; @import 'widget/assets/scss/utilities'; - html, body { font-family: 'PlusJakarta', sans-serif; diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss index 39e4ed2bd..8a118b906 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss @@ -1,112 +1 @@ -.settings { - @apply overflow-auto; -} - -.wizard-box { - .item { - @apply cursor-pointer py-4 pr-4 pl-6 relative; - - &::before, - &::after { - @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5; - } - - &::before { - @apply h-4 top-0; - } - - &:first-child { - &::before { - @apply h-0; - } - } - - &:last-child { - &::after { - @apply h-0; - } - } - - &.active { - h3 { - @apply text-woot-500 dark:text-woot-500; - } - - .step { - @apply bg-woot-500 dark:bg-woot-500; - } - } - - &.over { - &::after { - @apply bg-woot-500 dark:bg-woot-500; - } - - .step { - @apply bg-woot-500 dark:bg-woot-500; - } - - & + .item { - &::before { - @apply bg-woot-500 dark:bg-woot-500; - } - } - } - - h3 { - @apply text-slate-800 dark:text-slate-100 text-base pl-6; - } - - .completed { - @apply text-green-500 dark:text-green-500 ml-1; - } - - p { - @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6; - } - - .step { - @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5; - - i { - @apply text-xxs; - } - } - } -} - -.wizard-body { - @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6; - - &.height-auto { - @apply h-auto; - } -} - -.settings--content { - @apply my-2 mx-8; - - .title { - @apply font-medium; - } - - .code { - @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap; - - code { - @apply bg-transparent border-0; - } - } -} - -.login-init { - @apply pt-[30%] text-center; - - p { - @apply p-6; - } - - > a > img { - @apply w-60; - } -} +// to be removed diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss new file mode 100644 index 000000000..261df19e8 --- /dev/null +++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss @@ -0,0 +1,140 @@ +// scss-lint:disable QualifyingElement + +// Base typography +h1, +h2, +h3, +h4, +h5, +h6 { + @apply font-medium text-slate-800 dark:text-slate-50; +} + +p { + text-rendering: optimizeLegibility; + word-spacing: 0.12em; + + @apply mb-2 leading-[1.65] text-sm; + + a { + @apply text-woot-500 dark:text-woot-500 cursor-pointer; + } +} + +a { + @apply text-sm; +} + +hr { + @apply clear-both max-w-full h-0 my-5 mx-0 border-slate-300 dark:border-slate-600; +} + +// Form elements +label { + @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium; + + &.error { + input { + @apply mb-1; + } + } +} + +.input-wrap, +.help-text { + @apply text-slate-800 dark:text-slate-100 text-sm font-medium; + + .help-text { + @apply font-normal text-slate-600 dark:text-slate-400; + } +} + +// Focus outline removal +.button, +textarea, +input:focus { + outline: none; +} + +// Inputs +input[type='text'], +input[type='number'], +input[type='password'], +input[type='date'], +input[type='email'], +input[type='url'] { + @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600; + + &[disabled] { + @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed; + } +} + +input[type='file'] { + @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4; +} + +// Select +select { + background-image: url("data:image/svg+xml;utf8,"); + background-position: right -1rem center; + background-size: 9px 6px; + @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600; +} + +// Textarea +textarea { + @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600; + + &[disabled] { + @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed; + } +} + +// Error handling +.has-multi-select-error { + div.multiselect { + @apply mb-1; + } +} + +.error { + input, + input:not([type]), + textarea, + select, + .multiselect > .multiselect__tags, + .multiselect:not(.no-margin) { + @apply border border-solid border-red-400 dark:border-red-400 mb-1; + } + + .message { + @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full; + } +} + +.input-group.small { + input { + @apply text-sm h-8; + } + + .error { + @apply border-red-400 dark:border-red-400; + } +} + +// Code styling +code { + font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', + '"Liberation Mono"', '"Courier New"', 'monospace'; + @apply text-xs border-0; + + &.hljs { + @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5; + + .hljs-number, + .hljs-string { + @apply text-red-800 dark:text-red-400; + } + } +} diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss index 1b6166a18..423a41843 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss @@ -1,8 +1,40 @@ +// scss-lint:disable SpaceAfterPropertyColon +// scss-lint:disable MergeableSelector +button { + font-family: inherit; + transition: + background-color 0.25s ease-out, + color 0.25s ease-out; + @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem]; + + &:disabled, + &.disabled { + @apply opacity-40 cursor-not-allowed; + } +} + +.button-group { + @apply mb-0 flex flex-nowrap items-stretch; + + .button { + flex: 0 0 auto; + @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse; + } + + .button--only-icon { + @apply w-10 justify-center pl-0 pr-0; + } +} + +.back-button { + @apply m-0; +} + .button { - @apply items-center inline-flex h-10 mb-0 gap-2; + @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium; .button__content { - @apply w-full; + @apply w-full whitespace-nowrap overflow-hidden text-ellipsis; img, svg { @@ -10,12 +42,61 @@ } } + &:hover { + @apply bg-woot-600 dark:bg-woot-600; + } + + &:disabled, + &.disabled { + @apply opacity-40 cursor-not-allowed; + } + + &.success { + @apply bg-[#44ce4b] text-white dark:text-white; + } + + &.secondary { + @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white; + } + + &.primary { + @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white; + } + + &.clear { + @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent; + } + + &.alert { + @apply bg-red-500 dark:bg-red-500 text-white dark:text-white; + + &.clear { + @apply bg-transparent dark:bg-transparent; + } + } + + &.warning { + @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white; + + &.clear { + @apply bg-transparent dark:bg-transparent; + } + } + + &.tiny { + @apply h-6 text-[10px]; + } + + &.small { + @apply h-8 text-xs; + } + .spinner { @apply px-2 py-0; } // @TODDO - Remove after moving all buttons to woot-button - .icon + .button__content { + .icon+.button__content { @apply w-auto; } @@ -34,7 +115,7 @@ } &.hollow { - @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900; + @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900; &.secondary { @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss deleted file mode 100644 index 04f610dd2..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ /dev/null @@ -1 +0,0 @@ -// File to be removed diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss deleted file mode 100644 index d060dc2ee..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ /dev/null @@ -1,16 +0,0 @@ -@keyframes left-shift-animation { - 0%, - 100% { - transform: translateX(0); - } - - 50% { - transform: translateX(1px); - } -} - -.conversation { - &.active { - animation: left-shift-animation 0.25s $swift-ease-out-function; - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 5cc3caa27..ea3a9c5f1 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -79,7 +79,7 @@ @apply rounded-r-lg rounded-l mr-auto break-words; &:not(.is-unsupported) { - @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 + @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50; } &.is-image { @@ -91,7 +91,7 @@ } .file { - .text-block-title { + .attachment-name { @apply text-slate-700 dark:text-woot-300; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_forms.scss b/app/javascript/dashboard/assets/scss/widgets/_forms.scss deleted file mode 100644 index 4688b648c..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_forms.scss +++ /dev/null @@ -1,78 +0,0 @@ -// scss-lint:disable QualifyingElement - -label { - @apply text-slate-800 dark:text-slate-200; -} - -textarea { - @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600; -} - -input { - @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600; - - &[disabled] { - @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600; - } -} - -input[type='file'] { - @apply bg-white dark:bg-slate-800; -} - -select { - @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600; -} - -.error { - input[type='color'], - input[type='date'], - input[type='datetime'], - input[type='datetime-local'], - input[type='email'], - input[type='month'], - input[type='number'], - input[type='password'], - input[type='search'], - input[type='tel'], - input[type='text'], - input[type='time'], - input[type='url'], - input[type='week'], - input:not([type]), - textarea, - select, - .multiselect > .multiselect__tags { - @apply border border-solid border-red-400 dark:border-red-400; - } - - .message { - @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full; - } -} - -.button, -textarea, -input { - &:focus { - outline: none; - } -} - -.input-wrap { - @apply text-slate-800 dark:text-slate-100 text-sm font-medium; -} - -.help-text { - @apply font-normal text-slate-600 dark:text-slate-400; -} - -.input-group.small { - input { - @apply text-sm h-8; - } - - .error { - @apply border-red-400 dark:border-red-400; - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_login.scss b/app/javascript/dashboard/assets/scss/widgets/_login.scss deleted file mode 100644 index a5b140ede..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_login.scss +++ /dev/null @@ -1,66 +0,0 @@ -.auth-wrap { - width: 100%; -} - -// Outside login wrapper -.login { - @include full-height; - overflow-y: auto; - padding-top: $space-larger * 1.2; - - .login__hero { - margin-bottom: $space-larger; - - .hero__logo { - width: 180px; - } - - .hero__title { - font-weight: $font-weight-light; - margin-top: $space-larger; - } - - .hero__sub { - color: $medium-gray; - font-size: $font-size-medium; - } - } - - // Login box - .login-box { - @include background-white; - @include border-normal; - @include elegant-card; - - border-radius: $space-smaller; - padding: $space-large; - - label { - color: $color-gray; - font-size: $font-size-default; - - input { - font-size: $font-size-default; - height: $space-larger; - padding: $space-slab; - } - - .error { - font-size: $font-size-small; - } - } - - .button { - height: $space-larger; - } - } - - .sigin__footer { - font-size: $font-size-default; - padding: $space-medium; - - > a { - font-weight: $font-weight-bold; - } - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss deleted file mode 100644 index 4a3ca61c1..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss +++ /dev/null @@ -1,75 +0,0 @@ -.modal-mask { - // @include flex; - // @include flex-align(center, middle); - @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full; -} - -.page-top-bar { - @apply px-8 pt-9 pb-0; - - img { - @apply max-h-[3.75rem]; - } -} - -.modal-container { - @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem]; - - &.medium { - @apply max-w-[80%] w-[56.25rem]; - } - - .content-box { - @apply h-auto p-0; - } - - h2 { - @apply text-slate-800 dark:text-slate-100 text-lg font-semibold; - } - - p { - @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300; - } - - .content { - @apply p-8; - } - - form, - .modal-content { - @apply pt-4 pb-8 px-8 self-center; - - a { - @apply p-4; - } - } - - .modal-footer { - // @include flex; - // @include flex-align($x: flex-end, $y: middle); - @apply flex justify-end items-center py-2 px-0 gap-2; - - &.justify-content-end { - @apply justify-end; - } - } - - .delete-item { - @apply p-8; - - button { - @apply m-0; - } - } -} - -.modal-enter, -.modal-leave { - @apply opacity-0; -} - -.modal-enter .modal-container, -.modal-leave .modal-container { - transform: scale(1.1); - // @apply transform scale-110; -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss deleted file mode 100644 index d15150f36..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss +++ /dev/null @@ -1,60 +0,0 @@ -.reply-box { - transition: box-shadow 0.35s $swift-ease-out-function, - height 2s $swift-ease-out-function; - - &.is-focused { - box-shadow: var(--shadow); - } - - .reply-box__top { - .icon { - color: $medium-gray; - cursor: pointer; - font-size: $font-size-medium; - margin-right: $space-small; - - &.active { - color: $color-woot; - } - } - - .attachment { - cursor: pointer; - margin-right: $space-one; - padding: 0 $space-small; - } - - .video-js { - background: transparent; - // Override min-height : 50px in foundation - // - max-height: $space-mega * 2.4; - min-height: 3rem; - padding: var(--space-normal) 0 0; - resize: none; - } - - > textarea { - @include ghost-input(); - background: transparent; - margin: 0; - max-height: $space-mega * 2.4; - // Override min-height : 50px in foundation - min-height: 3rem; - padding: var(--space-normal) 0 0; - resize: none; - } - } - - &.is-private { - @apply bg-yellow-100 dark:bg-yellow-800; - - .reply-box__top { - @apply bg-yellow-100 dark:bg-yellow-800; - - > input { - @apply bg-yellow-100 dark:bg-yellow-800; - } - } - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_report.scss b/app/javascript/dashboard/assets/scss/widgets/_report.scss deleted file mode 100644 index d07f1dd3d..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_report.scss +++ /dev/null @@ -1,60 +0,0 @@ -.report-card { - @include custom-border-top(3px, transparent); - - cursor: pointer; - margin: 0; - padding: var(--space-normal); - - &.active { - @include custom-border-top(3px, var(--color-woot)); - @include background-white; - .heading, - .metric { - color: var(--color-woot); - } - } - - .heading { - align-items: center; - color: var(--color-heading); - display: flex; - font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - margin: 0; - } - - .info-icon { - color: var(--b-400); - margin-left: var(--space-micro); - } - - .metric-wrap { - align-items: center; - display: flex; - } - - .metric { - font-size: var(--font-size-big); - font-weight: var(--font-weight-feather); - margin-top: var(--space-smaller); - } - - .metric-trend { - font-size: var(--font-size-small); - margin: 0 var(--space-small); - } - - .metric-up { - color: $success-color; - } - - .metric-down { - color: $alert-color; - } - - .desc { - font-size: var(--font-size-small); - margin: 0; - text-transform: capitalize; - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_reports.scss b/app/javascript/dashboard/assets/scss/widgets/_reports.scss deleted file mode 100644 index dcd65366a..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_reports.scss +++ /dev/null @@ -1,29 +0,0 @@ -.reports-option__rounded--item { - border-radius: 100%; - height: var(--space-two); - width: var(--space-two); -} - -.reports-option__item { - flex-shrink: 0; - margin-right: var(--space-small); -} - -.reports-option__label--swatch { - border: 1px solid var(--color-border); -} - -.reports-option__wrap { - align-items: center; - display: flex; -} - -.reports-option__title { - margin: 0 var(--space-small); -} - - -.switch { - margin-bottom: var(--space-zero); - margin-left: var(--space-small); -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss b/app/javascript/dashboard/assets/scss/widgets/_search-box.scss deleted file mode 100644 index 643757e60..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss +++ /dev/null @@ -1,18 +0,0 @@ -.search { - @include flex; - @include flex-align($x: left, $y: middle); - @include flex-shrink; - - padding: $space-one $space-normal; - transition: all 0.3s var(--ease-in-out-quad); - - > .icon { - color: $medium-gray; - font-size: $font-size-medium; - } - - > input { - @include ghost-input(); - margin: 0; - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss deleted file mode 100644 index 3de072a77..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss +++ /dev/null @@ -1,78 +0,0 @@ -.side-menu { - i { - margin-right: var(--space-smaller); - min-width: var(--space-two); - } -} - -.sidebar { - z-index: 1024 - 1; - - //logo - .logo { - img { - max-height: 108px; - padding: $woot-logo-padding; - } - } - - .nested { - a { - font-size: var(--font-size-small); - margin-bottom: var(--space-micro); - margin-top: var(--space-micro); - - .inbox-icon { - display: inline-block; - margin-right: var(--space-micro); - min-width: var(--space-normal); - text-align: center; - } - } - } -} - -// bottom-nav -.bottom-nav { - @include flex; - @include space-between-column; - @include border-normal-top; - flex-direction: column; - padding: var(--space-one) var(--space-normal) var(--space-one) - var(--space-one); - position: relative; - - &:hover { - background: var(--color-background-light); - } - - .dropdown-pane { - bottom: 3.75rem; - display: block; - visibility: visible; - width: fit-content; - } - - .active { - border-bottom: 2px solid $medium-gray; - } -} - -.hamburger--menu { - cursor: pointer; - display: block; - margin-right: var(--space-normal); -} - -.header--icon { - display: block; - margin: 0 var(--space-small) 0 var(--space-smaller); - - @media screen and (max-width: 1200px) { - display: none; - } -} - -.header-title { - margin: 0 var(--space-small); -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss deleted file mode 100644 index ee556682f..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss +++ /dev/null @@ -1,45 +0,0 @@ -.ui-snackbar-container { - left: 0; - margin: 0 auto; - max-width: 25rem; - overflow: hidden; - position: absolute; - right: 0; - text-align: center; - top: $space-normal; - z-index: 9999; -} - -.ui-snackbar { - @include shadow; - background-color: $woot-snackbar-bg; - border-radius: $space-smaller; - display: inline-flex; - margin-bottom: $space-small; - max-width: 25rem; - min-height: 1.875rem; - min-width: 15rem; - padding: $space-slab $space-medium; - text-align: left; -} - -.ui-snackbar-text { - color: $color-white; - font-size: $font-size-small; - font-weight: $font-weight-medium; -} - -.ui-snackbar-action { - margin-left: auto; - padding-left: 1.875rem; - - button { - background: none; - border: 0; - color: $woot-snackbar-button; - font-size: $font-size-small; - margin: 0; - padding: 0; - text-transform: uppercase; - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_states.scss b/app/javascript/dashboard/assets/scss/widgets/_states.scss deleted file mode 100644 index 7eb840221..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_states.scss +++ /dev/null @@ -1 +0,0 @@ -// To be removed diff --git a/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss b/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss deleted file mode 100644 index ad0f805e2..000000000 --- a/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss +++ /dev/null @@ -1,46 +0,0 @@ -.status-bar { - @include flex; - @include flex-align($x: center, $y: middle); - background: lighten($warning-color, 36%); - flex-direction: column; - margin: 0; - padding: $space-normal $space-smaller; - - .message { - font-weight: $font-weight-medium; - margin-bottom: $zero; - } - - .button { - margin: $space-smaller $zero $zero; - padding: $space-small $space-normal; - } - - &.danger { - background: lighten($alert-color, 30%); - - .button { - // Default and disabled states - &, - &.disabled, - &[disabled], - &.disabled:hover, - &[disabled]:hover, - &.disabled:focus, - &[disabled]:focus { - background-color: $alert-color; - color: $color-white; - } - - &:hover, - &:focus { - background-color: darken($alert-color, 7%); - color: $color-white; - } - } - } - - &.warning { - background: lighten($warning-color, 36%); - } -} diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss index 35a9ee9ed..3ef40a137 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss @@ -31,7 +31,7 @@ } .tabs-title { - @apply flex-shrink-0 my-0 mx-2 ; + @apply flex-shrink-0 my-0 mx-2; .badge { @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0; @@ -53,7 +53,7 @@ } a { - @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative; + @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative; transition: border-color 0.15s $swift-ease-out-function; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_widget_builder.scss b/app/javascript/dashboard/assets/scss/widgets/_widget_builder.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss index e7a1adbca..97535bf0d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss @@ -1,9 +1,9 @@ table { - @apply border-spacing-0 text-sm; + @apply border-spacing-0 text-sm w-full; thead { th { - @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200; + @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200; } } diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue index a8f7a0e3a..87370185d 100644 --- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue +++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue @@ -1,7 +1,7 @@