diff --git a/src/azion-dark/_custom.scss b/src/azion-dark/_custom.scss deleted file mode 100644 index 921774c..0000000 --- a/src/azion-dark/_custom.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './custom/selection'; -@import './custom/special-button'; \ No newline at end of file diff --git a/src/azion-dark/_extensions.scss b/src/azion-dark/_extensions.scss deleted file mode 100644 index 17dbfbd..0000000 --- a/src/azion-dark/_extensions.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* Customizations to the designer theme should be defined here */ -@layer primevue { - @import '../azion-dark/extended-components/button'; - @import '../azion-dark/extended-components/selectbutton'; - @import '../azion-dark/extended-components/tabview'; - @import '../azion-dark/extended-components/tabmenu'; - @import '../azion-dark/extended-components/divider'; - @import '../azion-dark/extended-components/dropdownitem'; - @import '../azion-dark/extended-components/inlinemessage'; - @import '../azion-dark/extended-components/breadcumb'; - @import '../azion-dark/extended-components/sidebar'; - @import '../azion-dark/extended-components/tooltip'; - @import '../azion-dark/extended-components/datatable'; - @import '../azion-dark/extended-components/inputpassword'; - @import '../azion-dark/extended-components/toast'; - @import '../azion-dark/extended-components/inputswitch'; - @import '../azion-dark/extended-components/radiobutton'; - @import '../azion-dark/extended-components/checkbox'; - @import '../azion-dark/extended-components/tag'; - @import '../azion-dark/extended-components/markdown'; - @import '../azion-dark/extended-components/listbox'; - @import '../azion-dark/extended-components/inputnumber'; - @import '../azion-dark/extended-components/calendar'; - @import '../azion-dark/extended-components/badge'; - @import '../azion-dark/extended-components/menuitem'; - @import '../azion-dark/extended-components/progressbar'; - @import '../azion-dark/extended-components/dialog'; - @import '../azion-dark/extended-components/multiselect'; - @import '../azion-dark/extended-components/carousel'; -} diff --git a/src/azion-dark/_fonts.scss b/src/azion-dark/_fonts.scss deleted file mode 100644 index 7a1d748..0000000 --- a/src/azion-dark/_fonts.scss +++ /dev/null @@ -1,156 +0,0 @@ -// Configuration for the font-face of the theme, defaults to the system font so left as blank -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-light.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-light.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-light.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-light.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-light.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-light.svg#roboto-light') format('svg'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto Mono'; - src: url('https://fonts.azion.com/roboto-mono/roboto-mono-regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto Mono'; - src: url('https://fonts.azion.com/roboto-mono/roboto-mono-light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-regular.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-regular.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-regular.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-regular.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-regular.svg#Roboto-Regular') format('svg'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-italic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-italic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-italic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-italic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-italic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-italic.svg#roboto-italic') format('svg'); - font-weight: 400; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-medium.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-medium.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-medium.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-medium.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-medium.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-medium.svg#roboto-medium') format('svg'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.svg#roboto-mediumitalic') format('svg'); - font-weight: 500; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bold.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bold.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bolditalic') format('svg'); - font-weight: bold; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bold') format('svg'); - font-weight: 600; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-black.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-black.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-black.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-black.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-black.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-black.svg#roboto-black') format('svg'); - font-weight: 700; - font-style: normal; - font-display: swap; -} diff --git a/src/azion-dark/_variables.scss b/src/azion-dark/_variables.scss deleted file mode 100644 index 1fb3b72..0000000 --- a/src/azion-dark/_variables.scss +++ /dev/null @@ -1,112 +0,0 @@ -// Theme Specific Variables -$primaryColor: #f4f4f4; -$primaryDarkColor: hsla(0, 0%, 96%, 0.5); -$primaryDarkerColor: #f4f4f4; -$primaryTextColor: #f4f4f4; - -$colors: ( - 'blue': #2196f3, - 'green': #4caf50, - 'yellow': #fbc02d, - 'cyan': #00bcd4, - 'pink': #e91e63, - 'indigo': #3f51b5, - 'teal': #009688, - 'orange': #f57c00, - 'bluegray': #607d8b, - 'purple': #9c27b0, - 'red': #ff4032, - 'primary': $primaryColor -); - -// Mandatory Designer Variables -@import './variables/general'; -@import './variables/form'; -@import './variables/button'; -@import './variables/panel'; -@import './variables/_data'; -@import './variables/_overlay'; -@import './variables/_message'; -@import './variables/_menu'; -@import './variables/_media'; -@import './variables/_misc'; - -:root.azion-dark { - --surface-a: #ffffff; - --surface-b: #f8f9fa; - --surface-c: #e9ecef; - --surface-d: #dee2e6; - --surface-e: #ffffff; - --surface-f: #ffffff; - - --green-50: #f4fcf7; - --green-100: #caf1d8; - --green-200: #a0e6ba; - --green-300: #76db9b; - --green-400: #4cd07d; - --green-500: #22c55e; - --green-600: #1da750; - --green-700: #188a42; - --green-800: #136c34; - --green-900: #0e4f26; - - --red-50: #fff5f5; - --red-100: #ffd0ce; - --red-200: #ffaca7; - --red-300: #ff8780; - --red-400: #ff6259; - --red-500: #ff3d32; - --red-600: #d9342b; - --red-700: #b32b23; - --red-800: #8c221c; - --red-900: #661814; - - --text-color: #ededed; - --text-color-secondary: #b5b5b5; - --text-color-link: #93c5fd; - - --primary-color: #f4f4f4; - --primary-color-text: #1e1e1e; - - --font-family: 'Roboto', sans-serif; - - --surface-0: #0a0a0a; - --surface-50: #111111; - --surface-100: #171717; - --surface-200: #222222; - --surface-300: #282828; - --surface-400: #2e2e2e; - --surface-500: #353535; - --surface-600: #3e3e3e; - --surface-700: #4a4a4a; - --surface-800: #5e5e5e; - --surface-900: #7d7d7d; - - --gray-50: #282828; - --gray-100: #363636; - --gray-200: #747474; - --gray-300: #939393; - --gray-400: #b2b2b2; - --gray-500: #9e9e9e; - --gray-600: #ebebeb; - --gray-700: #f5f5f5; - --gray-800: #fafafa; - --gray-900: #ffffff; - - --content-padding: #{$panelContentPadding}; - --inline-spacing: #{$inlineSpacing}; - --border-radius: #{$borderRadius}; - --surface-ground: #171717; - --surface-section: #171717; - --surface-card: #171717; - --surface-overlay: #ffffff; - --surface-border: #282828; - --surface-hover: #f5f5f516; - --focus-ring: #{$focusShadow}; - --maskbg: #{$maskBg}; - --highlight-bg: #{$highlightBg}; - --highlight-text-color: #{$highlightTextColor}; - --bg-selection: #FAB99E; - - color-scheme: dark; -} diff --git a/src/azion-dark/custom/_focus.scss b/src/azion-dark/custom/_focus.scss deleted file mode 100644 index a1a9edb..0000000 --- a/src/azion-dark/custom/_focus.scss +++ /dev/null @@ -1,5 +0,0 @@ -a { - &:focus-visible { - @include focused(); - } -} diff --git a/src/azion-dark/custom/_scrollbehavior.scss b/src/azion-dark/custom/_scrollbehavior.scss deleted file mode 100644 index cb7579e..0000000 --- a/src/azion-dark/custom/_scrollbehavior.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Enable smooth scrolling on the whole document - */ - html { - scroll-behavior: smooth; -} \ No newline at end of file diff --git a/src/azion-dark/custom/_selection.scss b/src/azion-dark/custom/_selection.scss deleted file mode 100644 index f6c452d..0000000 --- a/src/azion-dark/custom/_selection.scss +++ /dev/null @@ -1,4 +0,0 @@ -::selection { - color: var(--primary-color-text); - background-color: var(--bg-selection); -} diff --git a/src/azion-dark/custom/_special-button.scss b/src/azion-dark/custom/_special-button.scss deleted file mode 100644 index 8ab69e4..0000000 --- a/src/azion-dark/custom/_special-button.scss +++ /dev/null @@ -1,56 +0,0 @@ -.special-button { - position: relative; - display: flex; - justify-content: center; - align-items: center; - border: none; - padding: 1px; - background-color: transparent; - border-radius: 0.375rem; - overflow: hidden; - transition: background-color 0.3s ease; - - &::before { - content: ''; - position: absolute; - inset: 0; - filter: blur(12px); - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 1), /* white */ - rgba(0, 20, 255, 1), /* violet */ - rgba(255, 120, 0, 1) /* orange */ - ); - animation: rotate-background 8s linear infinite; - z-index: 1; - pointer-events: none; - } - - &:hover .special-button-content { - background-color: var(--special-button-hover-bg); - box-shadow: inset 0 0 0 0px var(--surface-border); - } -} - -.special-button-content { - position: relative; - z-index: 2; - display: flex; - align-items: center; - gap: 0.375rem; - padding: 0 0.75rem; - height: 2rem; - border-radius: 0.375rem; - background-color: var(--special-button-bg); - transition: background-color 0.3s ease; - box-shadow: inset 0 0 0 .5px var(--surface-border); -} - -@keyframes rotate-background { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/azion-dark/extended-components/_badge.scss b/src/azion-dark/extended-components/_badge.scss deleted file mode 100644 index 5ed58aa..0000000 --- a/src/azion-dark/extended-components/_badge.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Custom badge -.p-badge { - border: 1px solid var(--surface-border) !important; - border-radius: $borderRadius; - color: $badgeTextColor; - font-size: 0.75rem !important; - font-weight: 600 !important; - min-width: $badgeMinWidth; - height: $badgeHeight; - display: flex !important; - align-items: center !important; - justify-content: center !important; - - &.p-badge-secondary { - background-color: $secondaryButtonBg; - color: $secondaryButtonTextColor; - } - - &.p-badge-success { - background-color: $successButtonBg; - color: $successButtonTextColor; - } - - &.p-badge-info { - background-color: $infoButtonBg; - color: $infoButtonTextColor; - } - - &.p-badge-warning { - background-color: $warningButtonBg; - color: $warningButtonTextColor; - } - - &.p-badge-danger { - background-color: $dangerButtonBg; - color: $dangerButtonTextColor; - border: none !important; - } - - &.p-badge-lg { - font-size: 1.5 * $badgeFontSize; - min-width: 1.5 * $badgeMinWidth; - height: 1.5 * $badgeHeight; - line-height: 1.5 * $badgeHeight; - } - - &.p-badge-xl { - font-size: 2 * $badgeFontSize; - min-width: 2 * $badgeMinWidth; - height: 2 * $badgeHeight; - line-height: 2 * $badgeHeight; - } -} diff --git a/src/azion-dark/extended-components/_breadcumb.scss b/src/azion-dark/extended-components/_breadcumb.scss deleted file mode 100644 index d5e7ecd..0000000 --- a/src/azion-dark/extended-components/_breadcumb.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Custom Breadcrumb -.p-breadcrumb { - .p-breadcrumb-list { - font-weight: 500 !important; - text-wrap: nowrap !important; - .p-menuitem-link { - padding: 0.25rem 0.125rem !important; - transition: $formElementTransition !important; - font-size: 0.875rem !important; - } - .p-menuitem:last-of-type { - font-weight: 500 !important; - } - .p-menuitem:hover { - text-decoration: underline; - } - } -} diff --git a/src/azion-dark/extended-components/_button.scss b/src/azion-dark/extended-components/_button.scss deleted file mode 100644 index 89d9e18..0000000 --- a/src/azion-dark/extended-components/_button.scss +++ /dev/null @@ -1,131 +0,0 @@ -//Custom Button - -.p-button { - font-weight: 500 !important; - - &.p-button-outlined { - color: $textColor !important; - - &:enabled:hover { - background-color: var(--surface-hover) !important; - } - - &:enabled:active { - background-color: var(--surface-hover) !important; - } - - &.p-button-plain { - color: $textColor !important; - - &:enabled:hover { - color: $textColor !important; - } - - &:enabled:active { - color: $textColor !important; - } - } - } - - &.p-button-text { - color: $textColor !important; - - &:enabled:hover { - color: $textColor !important; - background-color: var(--surface-hover); - } - - &:enabled:active { - color: $textColor !important; - background-color: var(--surface-hover); - } - - &.p-button-plain { - color: $textColor !important; - background-color: var(--surface-hover); - - &:enabled:hover { - color: $textColor !important; - } - - &:enabled:active { - color: $textColor !important; - background-color: var(--surface-hover); - } - } - } - - &.p-button-icon-only:not(.p-datepicker-trigger, .p-inputnumber-button) { - color: $textColor !important; - width: 2rem !important; - height: 2rem !important; - .p-button-icon-left, - .p-button-icon-right { - margin: 0; - } - } - - &.p-button-sm { - @include scaledFontSize($fontSize, $scaleSM); - @include scaledPadding($buttonPadding, $scaleSM); - - .p-button-icon { - @include scaledFontSize($primeIconFontSize, $scaleSM); - } - } - - &.p-button-lg { - @include scaledFontSize($fontSize, $scaleLG); - @include scaledPadding($buttonPadding, $scaleLG); - - .p-button-icon { - @include scaledFontSize($primeIconFontSize, $scaleLG); - } - } - - &.p-button-loading-label-only { - .p-button-loading-icon { - margin-right: 0; - } - } -} - -.p-fluid { - .p-button { - width: 100%; - } - - .p-button-icon-only { - width: $buttonIconOnlyWidth; - } - - .p-buttonset { - display: flex; - - .p-button { - flex: 1; - } - } -} - -.p-button.p-button-link { - color: $linkButtonColor !important; - &:not(:disabled):focus { - box-shadow: none !important; - } - &:not(:disabled):focus-visible { - box-shadow: $linkButtonFocusShadow !important; - } -} - -.p-inputgroup > .p-button { - &.p-button-icon-only { - color: initial; - width: initial; - height: initial !important; - .p-button-icon-left, - .p-button-icon-right { - margin: initial; - } - } -} diff --git a/src/azion-dark/extended-components/_calendar.scss b/src/azion-dark/extended-components/_calendar.scss deleted file mode 100644 index 7eeffb6..0000000 --- a/src/azion-dark/extended-components/_calendar.scss +++ /dev/null @@ -1,42 +0,0 @@ -.p-calendar { - .p-button-icon-only { - color: $inputIconColor; - background: $inputBg; - border: $inputBorder; - border-left: none; - - &:enabled:hover { - background: $secondaryButtonHoverBg; - color: $secondaryButtonTextHoverColor; - border-color: $secondaryButtonHoverBorderColor; - } - - &:enabled:focus { - box-shadow: $secondaryButtonFocusShadow; - } - - &:enabled:active { - background: $secondaryButtonActiveBg; - color: $secondaryButtonTextActiveColor; - border-color: $secondaryButtonActiveBorderColor; - } - - &.p-button-outlined { - background-color: transparent; - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - - &:enabled:hover { - background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - - &:enabled:active { - background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - } - } -} diff --git a/src/azion-dark/extended-components/_carousel.scss b/src/azion-dark/extended-components/_carousel.scss deleted file mode 100644 index 4decf36..0000000 --- a/src/azion-dark/extended-components/_carousel.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Custom carousel - -.p-carousel-indicators { - .p-carousel-indicator { - &.p-highlight { - background: #ededed !important; - } - } -} \ No newline at end of file diff --git a/src/azion-dark/extended-components/_checkbox.scss b/src/azion-dark/extended-components/_checkbox.scss deleted file mode 100644 index 864ee8b..0000000 --- a/src/azion-dark/extended-components/_checkbox.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Custom Checkbox -.p-checkbox { - .p-checkbox-box { - border: 2px solid var(--surface-border) !important; - .p-checkbox-icon { - color: white !important; - - &.p-icon { - } - } - - &.p-highlight { - border-color: #f3652b !important; - background: #f3652b !important; - } - } - - &:not(.p-checkbox-disabled) { - .p-checkbox-box { - &:hover { - background: var(--gray-100) !important; - border-color: #f5793f !important; - } - - &.p-focus { - @include focused-input(); - } - - &.p-highlight:hover { - border-color: #f5793f !important; - background: #f5793f !important; - } - } - } - - &.p-invalid > .p-checkbox-box { - @include invalid-input(); - } -} - -.p-input-filled { - .p-checkbox { - .p-checkbox-box { - &.p-highlight { - } - } - - &:not(.p-checkbox-disabled) { - .p-checkbox-box { - &:hover { - } - - &.p-highlight:hover { - } - } - } - } -} - -@if ($highlightBg == $checkboxActiveBg) { - .p-highlight { - .p-checkbox { - .p-checkbox-box { - } - } - } -} diff --git a/src/azion-dark/extended-components/_datatable.scss b/src/azion-dark/extended-components/_datatable.scss deleted file mode 100644 index 358226e..0000000 --- a/src/azion-dark/extended-components/_datatable.scss +++ /dev/null @@ -1,100 +0,0 @@ -.p-datatable { - border: var(--surface-border) 1px solid; - border-radius: $borderRadius; - font-size: 0.875rem !important; - text-wrap: nowrap !important; - - .p-datatable-header { - border-top-right-radius: $borderRadius; - border-top-left-radius: $borderRadius; - } - - .p-datatable-tbody > .p-datatable-emptymessage:hover { - background: unset !important; - } - - .p-datatable-tbody > tr > td { - box-sizing: inherit !important; - font-size: 0.875rem; - } - - .p-datatable-thead > tr > th { - box-sizing: inherit !important; - font-size: 0.875rem; - text-wrap: nowrap !important; - - .p-column-header-content { - vertical-align: center; - } - } - - .p-sortable-column { - .p-sortable-column-icon { - opacity: 0 !important; - } - } - - .p-sortable-column:hover { - .p-sortable-column-icon { - opacity: 1 !important; - color: $tableHeaderCellHighlightTextColor !important; - } - } - - .p-sortable-column { - .p-sortable-column-icon { - opacity: 0; - } - - &.p-highlight { - .p-sortable-column-icon { - opacity: 1 !important; - } - } - } - - .p-datatable-wrapper { - overscroll-behavior: revert !important; - } - - .p-datatable-tbody > .p-datatable-emptymessage:hover { - background: unset !important; - } -} - -.p-overlaypanel:has(.hidden-columns-panel) { - box-shadow: none !important; -} -.hidden-columns-panel { - .p-listbox-item { - font-size: 0.875rem; - line-height: 0.875rem; - padding: 0.75rem 0.5rem !important; - color: var(--surface-700) !important; - background: transparent; - &::before { - font-family: primeicons; - content: '\e965' !important; - color: var(--surface-700); - margin-right: 0.5rem; - font-size: 0.875rem; - line-height: 0.875rem; - } - &:hover { - background: $inputListItemHoverBg !important; - } - &.p-highlight { - opacity: 1; - color: var(--text-color) !important; - background: transparent !important; - &::before { - font-family: primeicons; - content: '\e966' !important; - color: var(--text-color); - } - &:hover { - background: $inputListItemHoverBg !important; - } - } - } -} diff --git a/src/azion-dark/extended-components/_dialog.scss b/src/azion-dark/extended-components/_dialog.scss deleted file mode 100644 index 8416437..0000000 --- a/src/azion-dark/extended-components/_dialog.scss +++ /dev/null @@ -1,45 +0,0 @@ -// Custom Dialog -.p-dialog { - margin-inline: 2rem !important; - .p-dialog-header { - justify-content: space-between; - font-size: 1.25rem !important; - min-height: 3.5rem !important; - font-weight: 500 !important; - padding-inline: 2rem !important; - border-bottom: 1px solid var(--surface-border) !important; - } - .p-dialog-footer { - height: 3.5rem !important; - padding-inline: 2rem !important; - display: flex !important; - flex-direction: row; - align-items: center !important; - justify-content: flex-end !important; - gap: 0.75rem !important; - button { - margin: 0 !important; - } - } -} - -@media only screen and (max-width: 768px) { - .p-dialog { - margin-inline: 0.75rem !important; - .p-dialog-header { - padding-inline: 0.75rem !important; - } - .p-dialog-content { - padding-inline: 0.75rem !important; - } - .p-dialog-footer { - button { - width: 100%; - } - height: auto !important ; - flex-direction: column; - padding-block: 0.75rem !important; - padding-inline: 0.75rem !important; - } - } -} diff --git a/src/azion-dark/extended-components/_divider.scss b/src/azion-dark/extended-components/_divider.scss deleted file mode 100644 index b789de2..0000000 --- a/src/azion-dark/extended-components/_divider.scss +++ /dev/null @@ -1,31 +0,0 @@ -.p-divider { - .p-divider-content { - background-color: $panelContentBg; - } - - &.p-divider-horizontal { - margin: $dividerHorizontalMargin; - padding: $dividerHorizontalPadding; - - &:before { - border-top: 1px solid var(--surface-border); - } - - .p-divider-content { - padding: 0 $inlineSpacing; - } - } - - &.p-divider-vertical { - margin: $dividerVerticalMargin; - padding: $dividerVerticalPadding; - - &:before { - border-left: 1px solid var(--surface-border); - } - - .p-divider-content { - padding: $inlineSpacing 0; - } - } -} diff --git a/src/azion-dark/extended-components/_dropdownitem.scss b/src/azion-dark/extended-components/_dropdownitem.scss deleted file mode 100644 index ed60aa1..0000000 --- a/src/azion-dark/extended-components/_dropdownitem.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Custom DropdownItem -.p-dropdown-item { - height: 2.375rem !important; - display: flex !important; - align-items: center !important; - font-size: 0.875rem !important; - font-weight: normal !important; -} -.p-dropdown-item-group { - font-size: 0.875rem !important; - font-weight: 500 !important; -} diff --git a/src/azion-dark/extended-components/_inlinemessage.scss b/src/azion-dark/extended-components/_inlinemessage.scss deleted file mode 100644 index 074a54c..0000000 --- a/src/azion-dark/extended-components/_inlinemessage.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Custom InlineMessage -.p-inline-message .p-inline-message-icon { - font-size: 0.875rem !important; -} - -.p-inline-message .p-inline-message-text { - font-size: 0.875rem !important; - line-height: 100% !important; - width: 100%; -} diff --git a/src/azion-dark/extended-components/_inputnumber.scss b/src/azion-dark/extended-components/_inputnumber.scss deleted file mode 100644 index dbb5ca2..0000000 --- a/src/azion-dark/extended-components/_inputnumber.scss +++ /dev/null @@ -1,40 +0,0 @@ -.p-inputnumber-button { - color: $inputIconColor; - background: $inputBg; - border: $inputBorder; - border-left: none; - - &:enabled:hover { - background: $secondaryButtonHoverBg; - color: $secondaryButtonTextHoverColor; - border-color: $secondaryButtonHoverBorderColor; - } - - &:enabled:focus { - box-shadow: $secondaryButtonFocusShadow; - } - - &:enabled:active { - background: $secondaryButtonActiveBg; - color: $secondaryButtonTextActiveColor; - border-color: $secondaryButtonActiveBorderColor; - } - - &.p-button-outlined { - background-color: transparent; - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - - &:enabled:hover { - background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - - &:enabled:active { - background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - } -} diff --git a/src/azion-dark/extended-components/_inputpassword.scss b/src/azion-dark/extended-components/_inputpassword.scss deleted file mode 100644 index 49a0aa1..0000000 --- a/src/azion-dark/extended-components/_inputpassword.scss +++ /dev/null @@ -1,4 +0,0 @@ -// Custom input password -.p-password-input { - width: 100% !important; -} diff --git a/src/azion-dark/extended-components/_inputswitch.scss b/src/azion-dark/extended-components/_inputswitch.scss deleted file mode 100644 index 71ed850..0000000 --- a/src/azion-dark/extended-components/_inputswitch.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Custom Switch -@use 'sass:math'; - -.p-inputswitch { - .p-inputswitch-slider { - background-color: var(--gray-100) !important; - padding-left: 2px; - - &:before { - margin-left: 1px; - } - } - - &.p-inputswitch-checked { - .p-inputswitch-slider:before { - background-color: #fff !important; - } - } - - &.p-focus { - .p-inputswitch-slider { - @include focused(); - } - } - - &:not(.p-disabled):hover { - .p-inputswitch-slider { - background: var(--gray-200) !important; - } - } - - &.p-inputswitch-checked { - .p-inputswitch-slider { - background: #f3652b !important; - - &:before { - background: $inputSwitchHandleOnBg; - } - } - - &:not(.p-disabled):hover { - .p-inputswitch-slider { - background: #f5793f !important; - } - } - } - - &.p-invalid { - .p-inputswitch-slider { - @include invalid-input(); - } - } -} diff --git a/src/azion-dark/extended-components/_listbox.scss b/src/azion-dark/extended-components/_listbox.scss deleted file mode 100644 index ddf7d51..0000000 --- a/src/azion-dark/extended-components/_listbox.scss +++ /dev/null @@ -1,25 +0,0 @@ -.p-listbox { - .p-listbox-list { - .p-listbox-item { - padding: 0 12px; - height: 38px !important; - display: flex !important; - gap: 12px !important; - align-items: center !important; - font-size: 0.875rem !important; - font-weight: 500 !important; - } - &.p-focus { - border-color: none !important; - outline: none !important; - outline-offset: none !important; - box-shadow: none !important; - } - &.p-focus:focus-visible { - border-color: none !important; - outline: $focusOutline !important; - outline-offset: $focusOutlineOffset !important; - box-shadow: $focusShadow !important; - } - } -} diff --git a/src/azion-dark/extended-components/_markdown.scss b/src/azion-dark/extended-components/_markdown.scss deleted file mode 100644 index 6d3b107..0000000 --- a/src/azion-dark/extended-components/_markdown.scss +++ /dev/null @@ -1,123 +0,0 @@ -.prose { - *:not(p, a, li) { - color: var(--text-color) !important; - } - - *:is(a):not(.p-button), *:is(a > u):not(.p-button > u) { - color: var(--text-color-link) !important; - } - - *:is(table) { - border-collapse: separate !important; - border-spacing: .5px !important; - box-sizing: content-box !important; - border: 1px solid var(--surface-border) !important; - border-radius: 6px !important; - } - - *:is(table > thead) { - border-collapse: separate; - background: #1c1c1c; - } - - *:is(tr > th) { - background: #1c1c1c; - } - - *:is(tr > th) { - font-size: .875rem; - text-wrap: nowrap; - color: var(--text-color); - font-weight: 600; - text-align: left; - padding: 1rem !important; - background: #1c1c1c; - } - - *:is(tr > td) { - font-size: .875rem; - color: var(--text-color); - padding: 1rem !important; - border-top: 1px solid var(--surface-border); - background: var(--surface-section); - } - - @media screen and (max-width: 640px) { - table { - display: block; - width: 100%; - overflow-x: scroll; - } - table td { - white-space: nowrap; - } - } - - *:is(p), *:is(li) { - color: var(--text-color-secondary) !important; - } - - *:is(hr) { - border-color: var(--surface-border) !important; - } - *:is(hr + .heading-wrapper) { - align-items: flex-start !important; - - h1, h2, h3, h4, h5, h6 { - margin-top: 0 !important; - } - } - - *:is(.heading-wrapper + p) { margin-top: 0 !important;} - - *:is(aside.content) { - background: #f3652b15 !important; - border-radius: 0.325rem !important; - border-left: #f3652b 5px solid !important; - margin: 2rem 0 !important; - } - *:is(aside.content.note) { - background: var(--surface-200) !important; - border-left: var(--surface-600) 5px solid !important; - } - *:is(aside.content > p) { - color: var(--text-color) !important; - display: flex; - gap: 0.375rem; - fill: #f3652b !important; - margin: 0 !important; - padding-left: .375rem; - } - *:is(aside.content > section > p) { - margin: .5rem .5rem 0 0 !important; - font-size: 1rem; - padding-left: .375rem; - } - - *:is(._tablist_ugdi6_34){ - border-color: transparent !important; - } - *:is(.TabGroup) { - border-bottom: none !important; - } - *:is(.TabGroup > button){ - font-weight: 500 !important; - } - *:is(.TabGroup > span){ - color: #f3652b !important; - height: 10px !important; - background: #f3652b !important; - } - *:is(._tab-scroll-overflow_ugdi6_10 > .border) { - border-color: var(--surface-border) !important; - } - *:is(.expressive-code) { - margin-bottom: 1.8rem !important; - } - *:is(.expressive-code code) { - background: var(--surface-200) !important; - } - *:is(.p-button) { - margin: 0 .5rem .5rem 0; - } -} diff --git a/src/azion-dark/extended-components/_menuitem.scss b/src/azion-dark/extended-components/_menuitem.scss deleted file mode 100644 index 83c4eae..0000000 --- a/src/azion-dark/extended-components/_menuitem.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Custom MenuItem -.p-menu { - .p-menuitem { - .p-menuitem-content { - .p-menuitem-link { - height: 38px !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - .p-menuitem-text { - font-size: 0.875rem !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .p-menuitem-icon { - font-size: 0.875rem !important; - } - } - } - } -} diff --git a/src/azion-dark/extended-components/_multiselect.scss b/src/azion-dark/extended-components/_multiselect.scss deleted file mode 100644 index 2c9d992..0000000 --- a/src/azion-dark/extended-components/_multiselect.scss +++ /dev/null @@ -1,170 +0,0 @@ -@use 'sass:math'; - -.p-multiselect { - font-size: 0.875rem !important; - background: $inputBg; - border: $inputBorder; - transition: $formElementTransition; - border-radius: $borderRadius; - - &:not(.p-disabled):hover { - border-color: $inputHoverBorderColor; - } - - &:not(.p-disabled).p-focus { - @include focused-input(); - } - - .p-multiselect-label { - padding: $inputPadding; - transition: $formElementTransition; - - &.p-placeholder { - color: $inputPlaceholderTextColor; - } - } - - &.p-multiselect-chip { - .p-multiselect-token { - font-size: 0.875rem !important; - padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); - margin-right: $inlineSpacing; - background: $chipBg; - color: $chipTextColor; - border-radius: $chipBorderRadius; - - .p-multiselect-token-icon { - margin-left: $inlineSpacing; - } - } - } - - .p-multiselect-trigger { - background: transparent; - color: $inputIconColor; - width: $inputGroupAddOnMinWidth; - border-top-right-radius: $borderRadius; - border-bottom-right-radius: $borderRadius; - } - - &.p-invalid.p-component { - @include invalid-input(); - } -} - -.p-inputwrapper-filled { - &.p-multiselect { - &.p-multiselect-chip { - .p-multiselect-label { - padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); - } - } - } -} - -.p-multiselect-panel { - background: $inputOverlayBg; - color: $inputListTextColor; - border: $inputOverlayBorder; - border-radius: $borderRadius; - box-shadow: $inputOverlayShadow; - - .p-multiselect-header { - padding: $inputListHeaderPadding; - border-bottom: $inputListHeaderBorder; - color: $inputListHeaderTextColor; - background: $inputOverlayHeaderBg; - margin: $inputListHeaderMargin; - border-top-right-radius: $borderRadius; - border-top-left-radius: $borderRadius; - - .p-multiselect-filter-container { - .p-inputtext { - padding-right: nth($inputPadding, 2) + $primeIconFontSize; - } - - .p-multiselect-filter-icon { - right: nth($inputPadding, 2); - color: $inputIconColor; - } - } - - .p-checkbox { - margin-right: $inlineSpacing; - } - - .p-multiselect-close { - margin-left: $inlineSpacing; - @include action-icon(); - } - } - - .p-multiselect-items { - font-size: 0.875rem !important; - padding: $inputListPadding; - - .p-multiselect-item { - height: 2.375rem !important; - margin: $inputListItemMargin; - padding: $inputListItemPadding; - border: $inputListItemBorder; - color: $inputListItemTextColor; - background: $inputListItemBg; - transition: $listItemTransition; - border-radius: $inputListItemBorderRadius; - - &.p-highlight { - color: $highlightTextColor; - background: $highlightBg; - - &.p-focus { - background: $highlightFocusBg; - } - } - - &:not(.p-highlight):not(.p-disabled) { - &.p-focus { - color: $inputListItemTextFocusColor; - background: $inputListItemFocusBg; - } - - &:hover { - color: $inputListItemTextHoverColor; - background: $inputListItemHoverBg; - } - } - - .p-checkbox { - margin-right: $inlineSpacing; - } - } - - .p-multiselect-item-group { - margin: $submenuHeaderMargin; - padding: $submenuHeaderPadding; - color: $submenuHeaderTextColor; - background: $submenuHeaderBg; - font-weight: $submenuHeaderFontWeight; - } - - .p-multiselect-empty-message { - padding: $inputListItemPadding; - color: $inputListItemTextColor; - background: $inputListItemBg; - } - } -} - -.p-input-filled { - .p-multiselect { - background: $inputFilledBg; - - &:not(.p-disabled):hover { - background-color: $inputFilledHoverBg; - } - - &:not(.p-disabled).p-focus { - background-color: $inputFilledFocusBg; - } - } -} diff --git a/src/azion-dark/extended-components/_overlaypanel.scss b/src/azion-dark/extended-components/_overlaypanel.scss deleted file mode 100644 index 3aae124..0000000 --- a/src/azion-dark/extended-components/_overlaypanel.scss +++ /dev/null @@ -1,18 +0,0 @@ -.p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: none !important; - color: transparent; - } - .p-overlaypanel:after, - .p-overlaypanel:before { - content: none; - } - .p-overlaypanel.p-overlaypanel-flipped:after { - border-top-color: none !important; - } - .p-overlaypanel.p-overlaypanel-flipped:before { - border-top-color: none !important; - } - .p-overlaypanel { - margin-top: 0; - } - \ No newline at end of file diff --git a/src/azion-dark/extended-components/_picklist.scss b/src/azion-dark/extended-components/_picklist.scss deleted file mode 100644 index 987e8c7..0000000 --- a/src/azion-dark/extended-components/_picklist.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Custom PickList -.p-picklist { - .p-picklist-buttons { - .p-button { - background-color: transparent; - transition: all 150ms; - border: 1px solid var(--surface-border); - color: $textSecondaryColor !important; - } - .p-button:hover { - background-color: var(--surface-hover) !important; - } - } - .p-picklist-list { - .p-picklist-item { - padding: 0 0.5rem !important; - font-size: 0.875rem; - min-height: 2.375rem !important; - border-radius: $borderRadius; - display: flex; - align-items: center; - } - } - } - \ No newline at end of file diff --git a/src/azion-dark/extended-components/_progressbar.scss b/src/azion-dark/extended-components/_progressbar.scss deleted file mode 100644 index d019ada..0000000 --- a/src/azion-dark/extended-components/_progressbar.scss +++ /dev/null @@ -1,6 +0,0 @@ -.p-progressbar { - border-radius: none !important; - .p-progressbar-value { - background: #f3652b !important; - } -} diff --git a/src/azion-dark/extended-components/_radiobutton.scss b/src/azion-dark/extended-components/_radiobutton.scss deleted file mode 100644 index 9f5a2ac..0000000 --- a/src/azion-dark/extended-components/_radiobutton.scss +++ /dev/null @@ -1,63 +0,0 @@ -// Custom Radio -.p-radiobutton { - .p-radiobutton-box { - border: 2px solid var(--surface-border) !important; - - &:not(.p-disabled):not(.p-highlight):hover { - border-color: #f3652b !important; - } - - &:not(.p-disabled).p-focus { - @include focused-input(); - } - - &.p-highlight { - border-color: #f3652b !important; - background: #f3652b !important; - - &:not(.p-disabled):hover { - border-color: #f3652b !important; - background: #f3652b !important; - color: #f3652b !important; - } - } - } - - &.p-invalid > .p-radiobutton-box { - @include invalid-input(); - } - - &:focus-visible { - outline: 0 none; - } -} - -.p-input-filled { - .p-radiobutton { - .p-radiobutton-box { - background-color: #f3652b !important; - - &:not(.p-disabled):hover { - background-color: #f3652b !important; - } - - &.p-highlight { - background: #f3652b !important; - - &:not(.p-disabled):hover { - background: #f3652b !important; - } - } - } - } -} - -@if ($highlightBg == $radiobuttonActiveBg) { - .p-highlight { - .p-radiobutton { - .p-radiobutton-box { - border-color: #f3652b !important; - } - } - } -} diff --git a/src/azion-dark/extended-components/_selectbutton.scss b/src/azion-dark/extended-components/_selectbutton.scss deleted file mode 100644 index 1174847..0000000 --- a/src/azion-dark/extended-components/_selectbutton.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Custom SelectButton -.p-selectbutton { - background: var(--surface-300) !important; - padding: 0.3rem; - border-radius: $borderRadius !important; - - .p-button { - background: none !important; - border: none !important; - height: 1.7rem !important; - font-size: 0.875rem !important; - border-radius: 0.25rem !important; - color: var(--text-color-secondary) !important; - font-weight: 600 !important; - - &:not(.p-disabled):not(.p-highlight):hover { - border-color: none !important; - color: var(--text-color) !important; - } - - &.p-highlight { - background: var(--surface-0) !important; - border-color: none !important; - font-weight: 600 !important; - border-radius: 0.25rem !important; - color: var(--text-color) !important; - - &:hover { - background: var(--surface-0) !important; - border-color: none !important; - color: $toggleButtonTextActiveHoverColor !important; - color: var(--text-color) !important; - } - } - } -} diff --git a/src/azion-dark/extended-components/_sidebar.scss b/src/azion-dark/extended-components/_sidebar.scss deleted file mode 100644 index fedbd7b..0000000 --- a/src/azion-dark/extended-components/_sidebar.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Custom Header Sidebar -.p-sidebar { - .p-sidebar-header { - justify-content: space-between; - font-size: 1.25rem !important; - height: 3.5rem !important; - font-weight: 500 !important; - padding-left: 32px !important; - padding-right: 32px !important; - border-bottom: 1px solid var(--surface-border) !important; - } - - .p-sidebar-content { - padding: 2rem; - } -} - -@media only screen and (max-width: 768px) { - .p-sidebar { - .p-sidebar-header { - padding: 0.75rem !important; - } - .p-sidebar-content { - padding: 0.75rem !important; - } - } -} diff --git a/src/azion-dark/extended-components/_tabmenu.scss b/src/azion-dark/extended-components/_tabmenu.scss deleted file mode 100644 index be64009..0000000 --- a/src/azion-dark/extended-components/_tabmenu.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Custom TabMenu -.p-tabmenu { - .p-tabmenu-nav { - gap: 0.5rem !important; - - .p-tabmenuitem { - .p-menuitem-link { - font-weight: 600 !important; - min-height: 2rem !important; - font-size: 0.875rem !important; - border-radius: $borderRadius !important; - } - &.p-highlight { - .p-menuitem-link { - color: #1c1c1c !important; - font-weight: 500 !important; - } - } - } - } -} diff --git a/src/azion-dark/extended-components/_tabview.scss b/src/azion-dark/extended-components/_tabview.scss deleted file mode 100644 index 4f3dba7..0000000 --- a/src/azion-dark/extended-components/_tabview.scss +++ /dev/null @@ -1,41 +0,0 @@ -// Custom TabView -.p-tabview { - .p-tabview-nav { - gap: 0.5rem !important; - padding: 0 !important; - - li { - .p-tabview-nav-link { - font-weight: 600 !important; - min-height: 2rem; - font-size: 0.875rem; - border-radius: $borderRadius; - } - &.p-highlight { - .p-tabview-nav-link { - color: #1e1e1e !important; - font-weight: 700 !important; - } - } - } - } - .p-tabview-nav-btn.p-link { - background-color: var(--surface-section) !important; - color: $textColor !important; - width: 2rem; - &:enabled:hover { - background: var(--surface-hover) !important; - color: $buttonBg; - transition: all 150ms; - } - } - .p-tabview-panels { - height: 100%; - background: transparent !important; - padding: 0 !important; - - .p-tabview-panel { - height: 100%; - } - } -} diff --git a/src/azion-dark/extended-components/_tag.scss b/src/azion-dark/extended-components/_tag.scss deleted file mode 100644 index c76c8a1..0000000 --- a/src/azion-dark/extended-components/_tag.scss +++ /dev/null @@ -1,42 +0,0 @@ -// Custom Tag -@use 'sass:math'; - -.p-tag { - background: #ff6c4729 !important; - color: #ff6c47 !important; - font-size: 0.75rem !important; - font-weight: 500 !important; - letter-spacing: 0.01rem; - padding: $tagPadding; - - &.p-tag-success { - background-color: #16a34a33 !important; - color: #39e478 !important; - } - - &.p-tag-info { - background-color: var(--surface-section) !important; - color: $textColor !important; - box-shadow: 0px 0px 0px 1px var(--surface-border) !important; - } - - &.p-tag-warning { - background-color: #ffb64d33 !important; - color: #ffb64d !important; - } - - &.p-tag-danger { - background-color: #f53d3d33 !important; - color: #f53d3d !important; - } - - .p-tag-icon { - margin-right: math.div($inlineSpacing, 2); - font-size: $badgeFontSize; - - &.p-icon { - width: $badgeFontSize; - height: $badgeFontSize; - } - } -} diff --git a/src/azion-dark/extended-components/_toast.scss b/src/azion-dark/extended-components/_toast.scss deleted file mode 100644 index b4dffad..0000000 --- a/src/azion-dark/extended-components/_toast.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Custom TabView -.p-toast { - .p-toast-message { - .p-toast-message-content { - background: var(--surface-card) !important; - border-radius: $borderRadius !important; - .p-toast-message-text { - } - - .p-toast-message-icon { - &.p-icon { - } - } - - .p-toast-summary { - } - - .p-toast-detail { - } - } - - .p-toast-icon-close { - border: 1px solid var(--surface-border) !important; - - &:hover { - } - - &:focus-visible { - } - } - - &.p-toast-message-info { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-success { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-warn { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-error { - background: var(--surface-section) !important; - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - } -} diff --git a/src/azion-dark/extended-components/_tooltip.scss b/src/azion-dark/extended-components/_tooltip.scss deleted file mode 100644 index 6a53035..0000000 --- a/src/azion-dark/extended-components/_tooltip.scss +++ /dev/null @@ -1,7 +0,0 @@ -.p-tooltip { - .p-tooltip-text { - box-shadow: none !important; - font-size: 0.875rem !important; - padding: 0.375rem 0.5rem !important; - } -} diff --git a/src/azion-dark/theme.scss b/src/azion-dark/theme.scss deleted file mode 100644 index 788d109..0000000 --- a/src/azion-dark/theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import './variables'; - -.azion-dark { - @import './_fonts'; - @import '../primevue-sass-theme/theme-base/components.scss'; - @import './_extensions'; - @import './custom'; -} diff --git a/src/azion-dark/variables/_button.scss b/src/azion-dark/variables/_button.scss deleted file mode 100644 index 0fef47b..0000000 --- a/src/azion-dark/variables/_button.scss +++ /dev/null @@ -1,438 +0,0 @@ -/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group button -$buttonPadding: 0.344rem 0.75rem; - -/// Width of a button having an icon with no label -/// @group button -$buttonIconOnlyWidth: 2.313rem; - -/// Padding of a button having an icon with no label -/// @group button -$buttonIconOnlyPadding: 0.1875rem 0; - -/// Background of a button -/// @group button -$buttonBg: #f3652b; - -/// Text color of a button -/// @group button -$buttonTextColor: $primaryTextColor; - -/// Border of a button -/// @group button -$buttonBorder: 1px solid #f3652b; - -/// Background of a button in hover state -/// @group button -$buttonHoverBg: #f5793f; - -/// Text color of a button in hover state -/// @group button -$buttonTextHoverColor: $primaryTextColor; - -/// Border color of a button in hover state -/// @group button -$buttonHoverBorderColor: #f5793f; - -/// Background of a button in pressed state -/// @group button -$buttonActiveBg: #eb6f3f; - -/// Color of a button in pressed state -/// @group button -$buttonTextActiveColor: $primaryTextColor; - -/// Border color of a button in pressed state -/// @group button -$buttonActiveBorderColor: #eb6f3f; - -/// Shadow of a raised button -/// @group button -$raisedButtonShadow: - 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), - 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - -/// Border radius of a rounded button -/// @group button -$roundedButtonBorderRadius: 2rem; - -/// Alpha level of a text button background in hover state -/// @group button -$textButtonHoverBgOpacity: 0.04; - -/// Alpha level of a text button background in active state -/// @group button -$textButtonActiveBgOpacity: 0.16; - -/// Border style of a outlined button -/// @group button -$outlinedButtonBorder: 1px solid var(--surface-border); - -/// Text color of a plain text button -/// @group button -$plainButtonTextColor: $textColor; - -/// Background color of a plain text button in hover state -/// @group button -$plainButtonHoverBgColor: #1e1e1e; - -/// Background color of a plain text button in active state -/// @group button -$plainButtonActiveBgColor: #222222; - -/// Background of a secondary button -/// @group button -$secondaryButtonBg: #f4f4f4; - -/// Text color of a secondary button -/// @group button -$secondaryButtonTextColor: #222222; - -/// Border of a secondary button -/// @group button -$secondaryButtonBorder: 1px solid #f4f4f4; - -/// Background of a secondary button in hover state -/// @group button -$secondaryButtonHoverBg: #e1e1e1; - -/// Text color of a secondary button in hover state -/// @group button -$secondaryButtonTextHoverColor: #1e1e1e; - -/// Border color of a secondary button in hover state -/// @group button -$secondaryButtonHoverBorderColor: #e1e1e1; - -/// Background of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBg: #d9d9d9; - -/// Text color of a secondary button in pressed state -/// @group button -$secondaryButtonTextActiveColor: #1e1e1e; - -/// Border color of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBorderColor: #d9d9d9; - -/// Box shadow of a secondary button in focused state -/// @group button -$secondaryButtonFocusShadow: 0 0 0 0.2rem $focusOutline; - -/// Background of an info button -/// @group button -$infoButtonBg: #0b61c4; - -/// Text color of an info button -/// @group button -$infoButtonTextColor: #ffffff; - -/// Border of an info button -/// @group button -$infoButtonBorder: 1px solid #0b61c4; - -/// Background of an info button in hover state -/// @group button -$infoButtonHoverBg: #0953a6; - -/// Text color of an info button in hover state -/// @group button -$infoButtonTextHoverColor: #ffffff; - -/// Border color of an info button in hover state -/// @group button -$infoButtonHoverBorderColor: #0953a6; - -/// Background of an info button in pressed state -/// @group button -$infoButtonActiveBg: #0953a6; - -/// Text color of an info button in pressed state -/// @group button -$infoButtonTextActiveColor: #ffffff; - -/// Border color of an info button in pressed state -/// @group button -$infoButtonActiveBorderColor: #0953a6; - -/// Box shadow of an info button in focused state -/// @group button -$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%); - -/// Background of a success button -/// @group button -$successButtonBg: #198236; - -/// Text color of a success button -/// @group button -$successButtonTextColor: #ffffff; - -/// Border of a success button -/// @group button -$successButtonBorder: 1px solid #198236; - -/// Background of a success button in hover state -/// @group button -$successButtonHoverBg: #156f2e; - -/// Text color of a success button in hover state -/// @group button -$successButtonTextHoverColor: #ffffff; - -/// Border color of a success button in hover state -/// @group button -$successButtonHoverBorderColor: #156f2e; - -/// Background of a success button in pressed state -/// @group button -$successButtonActiveBg: #156f2e; - -/// Text Color of a success button in pressed state -/// @group button -$successButtonTextActiveColor: #ffffff; - -/// Border color of a success button in pressed state -/// @group button -$successButtonActiveBorderColor: #156f2e; - -/// Box shadow of a success button in focused state -/// @group button -$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%); - -/// Background of a warning button -/// @group button -$warningButtonBg: #e9ae18; - -/// Text color of a warning button -/// @group button -$warningButtonTextColor: #1e1e1e; - -/// Border of a warning button -/// @group button -$warningButtonBorder: 1px solid #e9ae18; - -/// Background of a warning button in hover state -/// @group button -$warningButtonHoverBg: #c79413; - -/// Text color of a warning button in hover state -/// @group button -$warningButtonTextHoverColor: #1e1e1e; - -/// Border color of a warning button in hover state -/// @group button -$warningButtonHoverBorderColor: #c79413; - -/// Background of a warning button in pressed state -/// @group button -$warningButtonActiveBg: #c79413; - -/// Text color of a warning button in pressed state -/// @group button -$warningButtonTextActiveColor: #1e1e1e; - -/// Border color of a warning button in pressed state -/// @group button -$warningButtonActiveBorderColor: #c79413; - -/// Box shadow of a warning button in focused state -/// @group button -$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%); - -/// Background of a help button -/// @group button -$helpButtonBg: #9c27b0; - -/// Text color of a help button -/// @group button -$helpButtonTextColor: #ffffff; - -/// Border of a help button -/// @group button -$helpButtonBorder: 1px solid #9c27b0; - -/// Background of a help help in hover state -/// @group button -$helpButtonHoverBg: #8e24aa; - -/// Text color of a help button in hover state -/// @group button -$helpButtonTextHoverColor: #ffffff; - -/// Border color of a help button in hover state -/// @group button -$helpButtonHoverBorderColor: #8e24aa; - -/// Background of a help button in pressed state -/// @group button -$helpButtonActiveBg: #7b1fa2; - -/// Text color of a help button in pressed state -/// @group button -$helpButtonTextActiveColor: #ffffff; - -/// Border color of a help button in pressed state -/// @group button -$helpButtonActiveBorderColor: #7b1fa2; - -/// Box shadow of a help button in focused state -/// @group button -$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8; - -/// Background of a danger button -/// @group button -$dangerButtonBg: #c4170b; - -/// Text color of a danger button -/// @group button -$dangerButtonTextColor: #ffffff; - -/// Border of a danger button -/// @group button -$dangerButtonBorder: 1px solid #c4170b; - -/// Background of a danger button in hover state -/// @group button -$dangerButtonHoverBg: #a61409; - -/// Text color of a danger button in hover state -/// @group button -$dangerButtonTextHoverColor: #ffffff; - -/// Border color of a danger button in hover state -/// @group button -$dangerButtonHoverBorderColor: #a61409; - -/// Background of a danger button in pressed state -/// @group button -$dangerButtonActiveBg: #a61409; - -/// Text color of a danger button in pressed state -/// @group button -$dangerButtonTextActiveColor: #ffffff; - -/// Border color of a danger button in pressed state -/// @group button -$dangerButtonActiveBorderColor: #a61409; - -/// Box shadow of a danger button in focused state -/// @group button -$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%); - -/// Text color of a link button -/// @group button -$linkButtonColor: #93c5fd; - -/// Text color of a link button in hover state -/// @group button -$linkButtonHoverColor: #93c5fd; - -/// Text decoration of a link button in hover state -/// @group button -$linkButtonTextHoverDecoration: underline; - -/// Box shadow of a link button in focused state -/// @group button -$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Background of a toggle button -/// @group button -$toggleButtonBg: #1e1e1e; - -/// Border of a toggle button -/// @group button -$toggleButtonBorder: 1px solid #3e3e3e; - -/// Text color of a toggle button -/// @group button -$toggleButtonTextColor: $textColor; - -/// Icon color of a toggle button -/// @group button -$toggleButtonIconColor: $textSecondaryColor; - -/// Background of a toggle button in hover state -/// @group button -$toggleButtonHoverBg: #282828; - -/// Border color of a toggle button in hover state -/// @group button -$toggleButtonHoverBorderColor: #3e3e3e; - -/// Text color of a toggle button in hover state -/// @group button -$toggleButtonTextHoverColor: $textColor; - -/// Icon color of a toggle button in hover state -/// @group button -$toggleButtonIconHoverColor: $textSecondaryColor; - -/// Background of a toggle button in selected state -/// @group button -$toggleButtonActiveBg: $primaryColor; - -/// Border color of a toggle button in selected state -/// @group button -$toggleButtonActiveBorderColor: $primaryColor; - -/// Text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveColor: $primaryTextColor; - -/// Icon color of a toggle button in selected state -/// @group button -$toggleButtonIconActiveColor: $primaryTextColor; - -/// Hover background of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBg: $primaryDarkColor; - -/// Hover border color of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBorderColor: $primaryDarkColor; - -/// Hover text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveHoverColor: $primaryTextColor; - -/// Hover icon of a toggle button in selected state -/// @group button -$toggleButtonIconActiveHoverColor: $primaryTextColor; - -/// Width of the speed dial button -/// @group button -$speedDialButtonWidth: 4rem; - -/// Height of the speed dial button -/// @group button -$speedDialButtonHeight: 4rem; - -/// Icon size of the speed dial button -/// @group button -$speedDialButtonIconFontSize: 1.3rem; - -/// Width of a speed dial item -/// @group button -$speedDialActionWidth: 3rem; - -/// Height of a speed dial item -/// @group button -$speedDialActionHeight: 3rem; - -/// Background color of a speed dial item -/// @group button -$speedDialActionBg: #ffffff; - -/// Background color of a speed dial item in hover state -/// @group button -$speedDialActionHoverBg: #f5f5f5; - -/// Text color of a speed dial item -/// @group button -$speedDialActionTextColor: #212121; - -/// Text color of a speed dial item in hover state -/// @group button -$speedDialActionTextHoverColor: #212121; diff --git a/src/azion-dark/variables/_data.scss b/src/azion-dark/variables/_data.scss deleted file mode 100644 index 9093560..0000000 --- a/src/azion-dark/variables/_data.scss +++ /dev/null @@ -1,346 +0,0 @@ -/// Background of a paginator -/// @group data -$paginatorBg: #1c1c1c; - -/// Text color of a paginator -/// @group data -$paginatorTextColor: $textSecondaryColor; - -/// Border of a paginator -/// @group data -$paginatorBorder: solid var(--surface-border); - -/// Border width of a paginator -/// @group data -$paginatorBorderWidth: 0; - -/// Padding of a paginator -/// @group data -$paginatorPadding: 0.5rem 1rem; - -/// Width of a paginator element -/// @group data -$paginatorElementWidth: $buttonIconOnlyWidth; - -/// Height of a paginator element -/// @group data -$paginatorElementHeight: $buttonIconOnlyWidth; - -/// Background of a paginator element -/// @group data -$paginatorElementBg: transparent; - -/// Border of a paginator element -/// @group data -$paginatorElementBorder: 0 none; - -/// Icon color of a paginator element -/// @group data -$paginatorElementIconColor: $textSecondaryColor; - -/// Background of a paginator element in hover state -/// @group data -$paginatorElementHoverBg: hsla(0, 0%, 100%, 0.03); - -/// Border color of a paginator element in hover state -/// @group data -$paginatorElementHoverBorderColor: transparent; - -/// Icon color of a paginator element in hover state -/// @group data -$paginatorElementIconHoverColor: $textSecondaryColor; - -/// Border radius of a paginator element -/// @group data -$paginatorElementBorderRadius: $borderRadius; - -/// Margin of a paginator element -/// @group data -$paginatorElementMargin: 0.143rem; - -/// Padding of a paginator element -/// @group data -$paginatorElementPadding: 0; - -/// Border of a table header -/// @group data -$tableHeaderBorder: 1px solid var(--surface-border); - -/// Border width of a table header -/// @group data -$tableHeaderBorderWidth: 0 0 1px 0; - -/// Background of a table header -/// @group data -$tableHeaderBg: #1c1c1c; - -/// Text color of a table header -/// @group data -$tableHeaderTextColor: $textColor; - -/// Font weight of a table header -/// @group data -$tableHeaderFontWeight: 500; - -/// Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderPadding: 0.875rem 0.875rem; - -/// Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderCellPadding: 0.595rem 0.875rem; - -/// Background of a table header cell -/// @group data -$tableHeaderCellBg: #1c1c1c; - -/// Text color of a table header cell -/// @group data -$tableHeaderCellTextColor: $textColor; - -/// Font weight of a table header cell -/// @group data -$tableHeaderCellFontWeight: 600; - -/// Border of a table header cell -/// @group data -$tableHeaderCellBorder: 1px solid var(--surface-border); - -/// Border width of a table header cell -/// @group data -$tableHeaderCellBorderWidth: 0 0 1px 0; - -/// Background of a table header cell in hover state -/// @group data -$tableHeaderCellHoverBg: #ffffff0d; - -/// Text color of a table header cell in hover state -/// @group data -$tableHeaderCellTextHoverColor: $textColor; - -/// Icon color of a table header cell -/// @group data -$tableHeaderCellIconColor: $textSecondaryColor; - -/// Icon color of a table header cell in hover state -/// @group data -$tableHeaderCellIconHoverColor: $textSecondaryColor; - -/// Background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightBg: #1c1c1c; - -/// Text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextColor: $primaryColor; - -/// Hover background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightHoverBg: rgba $primaryColor (0.16); - -/// Hover text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextHoverColor: $primaryColor; - -/// Size of a multiple column sorting order indicator -/// @group data -$tableSortableColumnBadgeSize: 1.143rem; - -/// Background of a table body row -/// @group data -$tableBodyRowBg: #171717; - -/// Text color of a table body row -/// @group data -$tableBodyRowTextColor: $textColor; - -/// Background of an even table body row -/// @group data -$tableBodyRowEvenBg: #212121; - -/// Background of a table body row in hover state -/// @group data -$tableBodyRowHoverBg: #353535; - -/// Text color of a table body row in hover state -/// @group data -$tableBodyRowTextHoverColor: $textColor; - -/// Border for a cell of a table toby row -/// @group data -$tableBodyCellBorder: 1px solid var(--surface-border); - -/// Border width for a cell of a table toby row -/// @group data -$tableBodyCellBorderWidth: 0 0 1px 0; - -/// Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableBodyCellPadding: 0.595rem 0.875rem; - -/// Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterCellPadding: 0.595rem 0.875rem; - -/// Background of a table footer cell -/// @group data -$tableFooterCellBg: #1c1c1c; - -/// Text color of a table footer cell -/// @group data -$tableFooterCellTextColor: $textColor; - -/// Font weight of a table footer cell -/// @group data -$tableFooterCellFontWeight: 600; - -/// Border of a table footer cell -/// @group data - -/// Border of a table footer cell -/// @group data -$tableFooterCellBorder: 1px solid var(--surface-border); - -/// Border width of a table footer cell -/// @group data -$tableFooterCellBorderWidth: 0 0 1px 0; - -/// Backgground of a table column resize indicator bar -/// @group data -$tableResizerHelperBg: $primaryColor; - -/// Border of a table footer -/// @group data -$tableFooterBorder: 1px solid var(--surface-border); - -/// Border width of a table footer -/// @group data -$tableFooterBorderWidth: none; - -/// Background of a table footer -/// @group data -$tableFooterBg: #1c1c1c; - -/// Text color of a table footer -/// @group data -$tableFooterTextColor: $textColor; - -/// Font weight of a table footer -/// @group data -$tableFooterFontWeight: 600; - -/// Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterPadding: 0.875rem 0.875rem; - -/// Content alignment of a table cell -/// @group data -$tableCellContentAlignment: left; - -/// Border width of a table paginator positioned at top -/// @group data -$tableTopPaginatorBorderWidth: none; - -/// Border width of a table paginator positioned at bottom -/// @group data -$tableBottomPaginatorBorderWidth: none; - -/// Scale factor of a small datatable -/// @group data -$tableScaleSM: 0.5; - -/// Scale factor of a large datatable -/// @group data -$tableScaleLG: 1.25; - -/// Padding for content section of a dataview -/// @group data -$dataViewContentPadding: 0; - -/// Border for content section of a dataview -/// @group data -$dataViewContentBorder: 0 none; - -/// Border for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorder: solid var(--surface-border); - -/// Border width for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorderWidth: 0 0 1px 0; - -/// Background of a full calendar event -/// @group data -$fullCalendarEventBg: $primaryDarkColor; - -/// Border color of a full calendar event -/// @group data -$fullCalendarEventBorderColor: $primaryDarkColor; - -/// Border of a full calendar event -/// @group data -$fullCalendarEventBorder: 1px solid $primaryDarkColor; - -/// Text color of a full calendar event -/// @group data -$fullCalendarEventTextColor: $primaryTextColor; - -/// Padding of a tree -/// @group data -$treeContainerPadding: 0.286rem; - -/// Padding of a tree node -/// @group data -$treeNodePadding: 0.143rem; - -/// Padding of a tree node content consists of toggler, icon and label -/// @group data -$treeNodeContentPadding: 0.5rem; - -/// Padding of a tree node children container -/// @group data -$treeNodeChildrenPadding: 0 0 0 1rem; - -/// Color of a treenode data icon, $dataActionIconColor for the toggler element -/// @group data -$treeNodeIconColor: $textSecondaryColor; - -/// Padding of a vertical timeline content element -/// @group data -$timelineVerticalEventContentPadding: 0 1rem; - -/// Padding of a horizontal timeline content element -/// @group data -$timelineHorizontalEventContentPadding: 1rem 0; - -/// Width of a timeline marker -/// @group data -$timelineEventMarkerWidth: 1rem; - -/// Height of a timeline marker -/// @group data -$timelineEventMarkerHeight: 1rem; - -/// Border radius of a timeline marker -/// @group data -$timelineEventMarkerBorderRadius: 50%; - -/// Border of a timeline marker -/// @group data -$timelineEventMarkerBorder: 2px solid $highlightBg; - -/// Background of a timeline marker -/// @group data -$timelineEventMarkerBackground: $highlightTextColor; - -/// Size of a timeline connector -/// @group data -$timelineEventConnectorSize: 2px; - -/// Color of a timeline event -/// @group data -$timelineEventColor: var(--surface-border); - -/// Color of a line to connect to organization chart nodes -/// @group data -$organizationChartConnectorColor: var(--surface-border); diff --git a/src/azion-dark/variables/_form.scss b/src/azion-dark/variables/_form.scss deleted file mode 100644 index 402768f..0000000 --- a/src/azion-dark/variables/_form.scss +++ /dev/null @@ -1,572 +0,0 @@ -/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group form -$inputPadding: 0.344rem 0.5rem; - -/// Background of an input field -/// @group form -$inputBg: #292929; - -/// Font size of an input field -/// @group form -$inputTextFontSize: 0.875rem; - -/// Text color of an input field -/// @group form -$inputTextColor: $textColor; - -/// Color of an icon inside an input field -/// @group form -$inputIconColor: $textColor; - -/// Border of an input field -/// @group form -$inputBorder: 1px solid var(--surface-border); - -/// Border of an input field in hover state -/// @group form -$inputHoverBorderColor: #f3652b; - -/// Border of an input field in focus state -/// @group form -$inputFocusBorderColor: #f3652b; - -/// Color of an input field in invalid state -/// @group form -$inputErrorBorderColor: $errorColor; - -/// Text color of a placeholder -/// @group form -$inputPlaceholderTextColor: #666; - -/// Background of a filled input -/// @group form -$inputFilledBg: #181818; - -/// Background of a filled input in hover state -/// @group form -$inputFilledHoverBg: #2b2b2b; - -/// Background of a filled input in focus state -/// @group form -$inputFilledFocusBg: #181818; - -/// Backgroud color of an input group addon -/// @group form -$inputGroupBg: #1c1c1c; - -/// Text color of an input group addon -/// @group form -$inputGroupTextColor: $textSecondaryColor; - -/// Minimum width of an input group addon -/// @group form -$inputGroupAddOnMinWidth: 2.357rem; - -/// Background of an input list such as dropdown, listbox, multiselect -/// @group form -$inputListBg: #171717; - -/// Text color of an input list -/// @group form -$inputListTextColor: $textColor; - -/// Border of an input list -/// @group form -$inputListBorder: $inputBorder; - -/// Padding of an input list -/// @group form -$inputListPadding: 0.5rem; - -/// Padding for an individual itrem of an input list -/// @group form -$inputListItemPadding: 0.75rem 0.5rem; - -/// Background for an individual itrem of an input list -/// @group form -$inputListItemBg: transparent; - -/// Text color for an individual itrem of an input list -/// @group form -$inputListItemTextColor: $textColor; - -/// Hover state background for an individual itrem of an input list -/// @group form -$inputListItemHoverBg: rgba($primaryColor, 0.06); - -/// Hover state text color for an individual itrem of an input list -/// @group form -$inputListItemTextHoverColor: $textColor; - -/// Focus state background for an individual itrem of an input list -/// @group form -$inputListItemFocusBg: rgba($primaryColor, 0.06); - -/// Focus state text color for an individual itrem of an input list -/// @group form -$inputListItemTextFocusColor: $textColor; - -/// Border for an individual itrem of an input list -/// @group form -$inputListItemBorder: 0 none; - -/// Border radius for an individual itrem of an input list -/// @group form -$inputListItemBorderRadius: $borderRadius; - -/// Margin for an individual itrem of an input list -/// @group form -$inputListItemMargin: 0; - -/// Box shadow for an individual itrem of an input list in focused state -/// @group form -$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor; - -/// Padding for a header of an input list -/// @group form -$inputListHeaderPadding: 0.5rem 1rem; - -/// Margin for a header of an input list -/// @group form -$inputListHeaderMargin: 0; - -/// Background for a header of an input list -/// @group form -$inputListHeaderBg: #1c1c1c; - -/// Text color for a header of an input list -/// @group form -$inputListHeaderTextColor: $textColor; - -/// Border for a header of an input list -/// @group form -$inputListHeaderBorder: 0 none; - -/// Background for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBg: $inputListBg; - -/// Background for an overlay header of an input such as autocomplete or dropdown -/// @group form -$inputOverlayHeaderBg: $inputListHeaderBg; - -/// Border for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBorder: 0 none; - -/// Shadow for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayShadow: - 0px 0px 0px 1px #3b3b3b, - 0px 5px 10px 0px rgba(0, 0, 0, 0.05); - -/// Width of a checkbox -/// @group form -$checkboxWidth: 20px; - -/// Height of a checkbox -/// @group form -$checkboxHeight: 20px; - -/// Border of a checkbox -/// @group form -$checkboxBorder: 2px solid #666666; - -/// Size of a checkbox icon -/// @group form -$checkboxIconFontSize: 14px; - -/// Border color of a selected checkbox -/// @group form -$checkboxActiveBorderColor: $primaryColor; - -/// Background of a selected checkbox -/// @group form -$checkboxActiveBg: $primaryColor; - -/// Icon color of a selected checkbox -/// @group form -$checkboxIconActiveColor: $primaryTextColor; - -/// Background of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected checkbox in hover state -/// @group form -$checkboxIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a radiobutton -/// @group form -$radiobuttonWidth: 20px; - -/// Height of a radiobutton -/// @group form -$radiobuttonHeight: 20px; - -/// Border of a radiobutton -/// @group form -$radiobuttonBorder: 2px solid var(--surface-border); - -/// Font size of a radiobutton icon -/// @group form -$radiobuttonIconSize: 10px; - -/// Border color of a selected radiobutton -/// @group form -$radiobuttonActiveBorderColor: #f3652b; - -/// Background of a selected radiobutton -/// @group form -$radiobuttonActiveBg: #f3652b; - -/// Icon color of a selected radiobutton -/// @group form -$radiobuttonIconActiveColor: $primaryTextColor; - -/// Background of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected radiobutton in hover state -/// @group form -$radiobuttonIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a color picker preview element -/// @group form -$colorPickerPreviewWidth: 2rem; - -/// Height of a color picker preview element -/// @group form -$colorPickerPreviewHeight: 2rem; - -/// Background of a color picker -/// @group form -$colorPickerBg: #323232; - -/// Border color of a color picker -/// @group form -$colorPickerBorder: 1px solid #191919; - -/// Handle color of a color picker -/// @group form -$colorPickerHandleColor: #ffffff; - -/// Font size of a rating icon -/// @group form -$ratingIconFontSize: 1.143rem; - -/// Icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconColor: #e74c3c; - -/// Hover icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconHoverColor: #c0392b; - -/// Icon color for the star icon of a rating in unselected state -/// @group form -$ratingStarIconOffColor: $textColor; - -/// Icon color for the star icon of a rating in selected state -/// @group form -$ratingStarIconOnColor: $primaryColor; - -/// Icon color for the star icon of a rating in hover state -/// @group form -$ratingStarIconHoverColor: $primaryColor; - -/// Background of a slider -/// @group form -$sliderBg: #dee2e6; - -/// Border of a slider -/// @group form -$sliderBorder: 0 none; - -/// Height of a horizontal slider -/// @group form -$sliderHorizontalHeight: 0.286rem; - -/// Width of a vertical slider -/// @group form -$sliderVerticalWidth: 0.286rem; - -/// Width of a slider handle -/// @group form -$sliderHandleWidth: 1.143rem; - -/// Height of a slider handle -/// @group form -$sliderHandleHeight: 1.143rem; - -/// Background of a slider handle -/// @group form -$sliderHandleBg: #ffffff; - -/// Border of a slider handle -/// @group form -$sliderHandleBorder: 2px solid $primaryColor; - -/// Border radius of a slider handle -/// @group form -$sliderHandleBorderRadius: 50%; - -/// Border of a slider handle in hover state -/// @group form -$sliderHandleHoverBorderColor: $primaryColor; - -/// Background of a slider handle in hover state -/// @group form -$sliderHandleHoverBg: $primaryColor; - -/// Background color of a range slider -/// @group form -$sliderRangeBg: $primaryColor; - -/// Margin of a calendar table -/// @group form -$calendarTableMargin: 0.5rem 0; - -/// Margin of a calendar -/// @group form -$calendarPadding: 0.5rem; - -/// Background of a calendar -/// @group form -$calendarBg: #292929; - -/// Background of an inlime calendar -/// @group form -$calendarInlineBg: $calendarBg; - -/// Text color of a calendar -/// @group form -$calendarTextColor: $textColor; - -/// Border of an inline calendar -/// @group form -$calendarBorder: $inputListBorder; - -/// Border of an overlay calendar -/// @group form -$calendarOverlayBorder: $inputOverlayBorder; - -/// Padding of a calendar header -/// @group form -$calendarHeaderPadding: 0.5rem; - -/// Background of a calendar header -/// @group form -$calendarHeaderBg: #292929; - -/// Background of an inline calendar header -/// @group form -$calendarInlineHeaderBg: $calendarBg; - -/// Border of a calendar header -/// @group form -$calendarHeaderBorder: 1px solid var(--surface-border); - -/// Text color of a calendar header -/// @group form -$calendarHeaderTextColor: $textColor; - -/// Font weight of a calendar header -/// @group form -$calendarHeaderFontWeight: 600; - -/// Padding of a calendar weekday cell -/// @group form -$calendarHeaderCellPadding: 0.5rem; - -/// Text color of current month and year text in hover state -/// @group form -$calendarMonthYearHeaderHoverTextColor: $primaryColor !default; - -/// Padding of a calendar date cell -/// @group form -$calendarCellDatePadding: 0.5rem; - -/// Width of a calendar date cell -/// @group form -$calendarCellDateWidth: 2.5rem; - -/// Height of a calendar date cell -/// @group form -$calendarCellDateHeight: 2.5rem; - -/// Border radius of a calendar date cell -/// @group form -$calendarCellDateBorderRadius: 50%; - -/// Border of a calendar date cell -/// @group form -$calendarCellDateBorder: 1px solid transparent; - -/// Background of a calendar date cell in hover state -/// @group form -$calendarCellDateHoverBg: rgba($primaryColor, 0.06); - -/// Background of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBg: #f4f4f4; - -/// Border color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBorderColor: transparent; - -/// Text color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayTextColor: #1e1e1e; - -/// Padding of the calendar button bar -/// @group form -$calendarButtonBarPadding: 1rem 0; - -/// Padding of a time picker container of a calendar -/// @group form -$calendarTimePickerPadding: 0.5rem; - -/// Padding of a time picker element of a calendar -/// @group form -$calendarTimePickerElementPadding: 0 0.429rem; - -/// Font size of a time picker element of a calendar -/// @group form -$calendarTimePickerTimeFontSize: 1.286rem; - -/// Breakpoint of calendar to apply styles for small screens like phones -/// @group form -$calendarBreakpoint: 769px; - -/// Padding of a calendar date cell on small screens like phones -/// @group form -$calendarCellDatePaddingSM: 0; - -/// Width of an inputswitch -/// @group form -$inputSwitchWidth: 2.25rem; - -/// Height of an inputswitch -/// @group form -$inputSwitchHeight: 1.25rem; - -/// Border radius of an inputswitch -/// @group form -$inputSwitchBorderRadius: 30px; - -/// Width of an inputswitch handle -/// @group form -$inputSwitchHandleWidth: 1rem; - -/// Height of an inputswitch handle -/// @group form -$inputSwitchHandleHeight: 1rem; - -/// Border radius of an inputswitch handle -/// @group form -$inputSwitchHandleBorderRadius: 50%; - -/// Padding of an inputswitch slider -/// @group form -$inputSwitchSliderPadding: 0.063rem; - -/// Background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffBg: #ced4da; - -/// Background color of an inputswitch handle when unselected -/// @group form -$inputSwitchHandleOffBg: #ffffff; - -/// Hover background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffHoverBg: #c3cad2; - -/// Background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnBg: $primaryColor; - -/// Hover background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnHoverBg: $primaryDarkColor; - -/// Background color of an inputswitch handle when selected -/// @group form -$inputSwitchHandleOnBg: #1e1e1e; - -/// Height for the progress bar of a fileupload -/// @group form -$fileUploadProgressBarHeight: 0.25rem; - -/// Border of the fileupload content section -$fileUploadContentHoverBorder: 1px dashed $primaryColor !default; - -/// Padding of the fileupload content section -/// @group form -$fileUploadContentPadding: 2rem 1rem; - -/// Border of the fileupload content item section -/// @group form -$fileUploadFileBorder: 1px solid #c3cad2; - -/// Padding of the fileupload content item section -/// @group form -$fileUploadFilePadding: 1rem; - -/// Background of an editor toolbar -/// @group form -$editorToolbarBg: #f8f9fa; - -/// Border of an editor toolbar -/// @group form -$editorToolbarBorder: 1px solid #dee2e6; - -/// Padding of an editor toolbar -/// @group form -$editorToolbarPadding: 1rem; - -/// Icon color of an editor toolbar -/// @group form -$editorToolbarIconColor: #6c757d; - -/// Icon color of an editor toolbar in hover state -/// @group form -$editorToolbarIconHoverColor: #495057; - -/// Icon color of an editor toolbar in active state -/// @group form -$editorIconActiveColor: $primaryColor; - -/// Border of an editor content -/// @group form -$editorContentBorder: 1px solid #dee2e6; - -/// Background of an editor content -/// @group form -$editorContentBg: #ffffff; - -/// Background of a password meter -/// @group form -$passwordMeterBg: #dee2e6; - -/// Background of a week password -/// @group form -$passwordWeakBg: #e53935; - -/// Background of a medium password -/// @group form -$passwordMediumBg: #ffb300; - -/// Background of a strong password -/// @group form -$passwordStrongBg: #43a047; diff --git a/src/azion-dark/variables/_general.scss b/src/azion-dark/variables/_general.scss deleted file mode 100644 index 89c143c..0000000 --- a/src/azion-dark/variables/_general.scss +++ /dev/null @@ -1,149 +0,0 @@ -/// Font of the theme -/// @group general -$fontFamily: 'Roboto', sans-serif; - -/// Size of the font -/// @group general -$fontSize: 1rem; - -/// Thickness of the texts -/// @group general -$fontWeight: normal; - -/// Primary text color -/// @group general -$textColor: #ededed; - -/// Secondary text color -/// @group general -$textSecondaryColor: #b5b5b5; - -/// Background of a highlighted item -/// @group general -$highlightBg: rgba($primaryColor, 0.06); - -/// Text color of a highlighted item -/// @group general -$highlightTextColor: none; - -/// Background of a highlighted item in focus state -/// @group general -$highlightFocusBg: rgba($primaryColor, 0.08); - -/// Radius of the corners -/// @group general -$borderRadius: 6px; - -/// Duration of the property transitions -/// @group general -$transitionDuration: 0.2s; - -/// Properties of a form element transition -/// @group general -$formElementTransition: - background-color $transitionDuration, - color $transitionDuration, - border-color $transitionDuration, - box-shadow $transitionDuration; - -/// Properties of a action icon transition -/// @group general -$actionIconTransition: - background-color $transitionDuration, - color $transitionDuration, - box-shadow $transitionDuration; - -/// Properties of a list item transition -/// @group general -$listItemTransition: - background-color $transitionDuration, - border-color $transitionDuration, - box-shadow $transitionDuration; - -/// Size of the Icons -/// @group general -$primeIconFontSize: 1rem; - -/// Separator border -/// @group general -$divider: 1px solid var(--surface-border); - -/// Space between two inline items -/// @group general -$inlineSpacing: 0.5rem; - -/// Opacity of the disabled elements -/// @group general -$disabledOpacity: 0.5; - -/// Background of the modal layer -/// @group general -$maskBg: #1c1c1c80; - -/// Font size of the loading icons -/// @group general -$loadingIconFontSize: 2rem; - -/// Color to use on an invalid element e.g. invalid input -/// @group general -$errorColor: #f26464; - -/// Outline color of a focused element -/// @group general -$focusOutlineColor: #f3642b9f; - -/// Outline of a focused element -/// @group general -$focusOutline: 0 none; - -/// Outline offset of a focused element -/// @group general -$focusOutlineOffset: 0; - -/// Box shadow of a focused element -/// @group general -$focusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Width of an action icon -/// @group general -$actionIconWidth: 2rem; - -/// Height of an action icon -/// @group general -$actionIconHeight: 2rem; - -/// Background of an action icon -/// @group general -$actionIconBg: transparent; - -/// Border of an action icon -/// @group general -$actionIconBorder: 1px solid #3e3e3e; - -/// Color of an action icon -/// @group general -$actionIconColor: $textSecondaryColor; - -/// Background of an action icon in hover state -/// @group general -$actionIconHoverBg: #282828; - -/// Border of an action icon in hover state -/// @group general -$actionIconHoverBorderColor: 1px solid #3e3e3e; - -/// Color of an action icon in hover state -/// @group general -$actionIconHoverColor: $textColor; - -/// Border radius of an action icon -/// @group general -$actionIconBorderRadius: 6px; - -/// Scale factor of small component size -/// @group general -$scaleSM: 0.875; - -/// Scale factor of small large size -/// @group general -$scaleLG: 1.25; diff --git a/src/azion-dark/variables/_media.scss b/src/azion-dark/variables/_media.scss deleted file mode 100644 index 5adb14e..0000000 --- a/src/azion-dark/variables/_media.scss +++ /dev/null @@ -1,231 +0,0 @@ -/// Padding of a carousel indicators container -/// @group media -$carouselIndicatorsPadding: 1rem; - -/// Padding of a carousel indicator -/// @group media -$carouselIndicatorBg: #e9ecef20; - -/// Padding of a carousel indicator in hover state -/// @group media -$carouselIndicatorHoverBg: #dee2e640; - -/// Border radius of a carousel indicator -/// @group media -$carouselIndicatorBorderRadius: 0; - -/// Width of a carousel indicator -/// @group media -$carouselIndicatorWidth: 2rem; - -/// Height of a carousel indicator -/// @group media -$carouselIndicatorHeight: 0.5rem; - -/// Background of a galleria modal -/// @group media -$galleriaMaskBg: rgba(0, 0, 0, 0.9); - -/// Margin of a galleria close icon -/// @group media -$galleriaCloseIconMargin: 0.5rem; - -/// Font size of a galleria close icon -/// @group media -$galleriaCloseIconFontSize: 2rem; - -/// Background of a galleria close icon -/// @group media -$galleriaCloseIconBg: transparent; - -/// Color of a galleria close icon -/// @group media -$galleriaCloseIconColor: #ebedef; - -/// Background of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverColor: #ebedef; - -/// Width of a galleria close icon -/// @group media -$galleriaCloseIconWidth: 4rem; - -/// Height of a galleria close icon -/// @group media -$galleriaCloseIconHeight: 4rem; - -/// Border radius of a galleria close icon -/// @group media -$galleriaCloseIconBorderRadius: 50%; - -/// Background of a galleria navigator item -/// @group media -$galleriaItemNavigatorBg: rgba(0, 0, 0, 0.2); - -/// Color of a galleria navigator item -/// @group media -$galleriaItemNavigatorColor: #aeb6bf; - -/// Margin of a galleria navigator item -/// @group media -$galleriaItemNavigatorMargin: 0.5rem 0; - -/// Font size of a galleria navigator item -/// @group media -$galleriaItemNavigatorFontSize: 2rem; - -/// Background of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverBg: rgba(0, 0, 0, 0.3); - -/// Color of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverColor: #ebedef; - -/// Width of a galleria navigator item -/// @group media -$galleriaItemNavigatorWidth: 4rem; - -/// Height of a galleria navigator item -/// @group media -$galleriaItemNavigatorHeight: 4rem; - -/// Border radius of a galleria navigator item -/// @group media -$galleriaItemNavigatorBorderRadius: $borderRadius; - -/// Background of a galleria caption -/// @group media -$galleriaCaptionBg: rgba(0, 0, 0, 0.5); - -/// Color of a galleria caption -/// @group media -$galleriaCaptionTextColor: #ebedef; - -/// Padding of a galleria caption -/// @group media -$galleriaCaptionPadding: 1rem; - -/// Padding of a galleria indicators container -/// @group media -$galleriaIndicatorsPadding: 1rem; - -/// Background of a galleria indicator -/// @group media -$galleriaIndicatorBg: #e9ecef; - -/// Background of a galleria indicator in hover state -/// @group media -$galleriaIndicatorHoverBg: #dee2e6; - -/// Border radius of a galleria indicator -/// @group media -$galleriaIndicatorBorderRadius: 50%; - -/// Width of a galleria indicator -/// @group media -$galleriaIndicatorWidth: 1rem; - -/// Height of a galleria indicator -/// @group media -$galleriaIndicatorHeight: 1rem; - -/// Background of a galleria indicator container when placed inside the viewport -/// @group media -$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5); - -/// Background of a galleria indicator when placed inside the viewport -/// @group media -$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4); - -/// Background of a galleria indicator in hover state when placed inside the viewport -/// @group media -$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6); - -/// Background of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9); - -/// Padding of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerPadding: 1rem 0.25rem; - -/// Background of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorBg: transparent; - -/// Color of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorColor: #aeb6bf; - -/// Background of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverColor: #aeb6bf; - -/// Border radius of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorBorderRadius: 50%; - -/// Width of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorWidth: 2rem; - -/// Height of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHeight: 2rem; - -/// Background of an image preview modal -/// @group media -$imageMaskBg: rgba(0, 0, 0, 0.9) !default; - -/// Padding of image preview toolbar -/// @group media -$imagePreviewToolbarPadding: 1rem !default; - -/// Text color of the image preview indicator -/// @group media -$imagePreviewIndicatorColor: #f8f9fa !default; - -/// Background of the image preview indicator -/// @group media -$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default; - -/// Background of an image action item -/// @group media -$imagePreviewActionIconBg: transparent !default; - -/// Text color of an image action item -/// @group media -$imagePreviewActionIconColor: #f8f9fa !default; - -/// Background of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default; - -/// Tect color of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverColor: #f8f9fa !default; - -/// Width of an image action item -/// @group media -$imagePreviewActionIconWidth: 3rem !default; - -/// Height of an image action item -/// @group media -$imagePreviewActionIconHeight: 3rem !default; - -/// Font size of an image action item icon -/// @group media -$imagePreviewActionIconFontSize: 1.5rem !default; - -/// Border radius of an image action item -/// @group media -$imagePreviewActionIconBorderRadius: 50% !default; diff --git a/src/azion-dark/variables/_menu.scss b/src/azion-dark/variables/_menu.scss deleted file mode 100644 index 9d7bb08..0000000 --- a/src/azion-dark/variables/_menu.scss +++ /dev/null @@ -1,291 +0,0 @@ -/// Background of a steps item -/// @group menu -$stepsItemBg: #00000000; - -/// Border of a steps item -/// @group menu -$stepsItemBorder: 1px solid #3e3e3e; - -/// Text color of a steps item -/// @group menu -$stepsItemTextColor: $textSecondaryColor; - -/// Width of a steps itrem number -/// @group menu -$stepsItemNumberWidth: 1.75rem; - -/// Height of a steps itrem number -/// @group menu -$stepsItemNumberHeight: 1.75rem; - -/// Font size of a steps itrem number -/// @group menu -$stepsItemNumberFontSize: 1rem; - -/// Color of a steps itrem number -/// @group menu -$stepsItemNumberColor: $textColor; - -/// Border radius of a steps itrem number -/// @group menu -$stepsItemNumberBorderRadius: $borderRadius; - -/// Font weight of an active steps itrem number -/// @group menu -$stepsItemActiveFontWeight: 600; - -/// Width of a vertical menu such as tieredmenu or context menu -/// @group menu -$menuWidth: 12.5rem; - -/// Background of a menu -/// @group menu -$menuBg: #1c1c1c; - -/// Border of a menu -/// @group menu -$menuBorder: 1px solid #3e3e3e; - -/// Text color of a menu -/// @group menu -$menuTextColor: $textColor; - -/// Padding of a menuitem -/// @group menu -$menuitemPadding: 0.75rem 0.5rem; - -/// Border radius of a menuitem -/// @group menu -$menuitemBorderRadius: 6px; - -/// Text color of a menuitem -/// @group menu -$menuitemTextColor: $textColor; - -/// Icon color of a menuitem -/// @group menu -$menuitemIconColor: $textColor; - -/// Text color of a menuitem in hover state -/// @group menu -$menuitemTextHoverColor: $textColor; - -/// Icon color of a menuitem in hover state -/// @group menu -$menuitemIconHoverColor: $textColor; - -/// Background of a menuitem in hover state -/// @group menu -$menuitemHoverBg: rgba($primaryColor, 0.06); - -/// Text color of a menuitem in focus state -/// @group menu -$menuitemTextFocusColor: $textColor; - -/// Icon color of a menuitem in focus state -/// @group menu -$menuitemIconFocusColor: $textColor; - -/// Background of a menuitem in focus state -/// @group menu -$menuitemFocusBg: rgba($primaryColor, 0.06); - -/// Text color of a menuitem in active state -/// @group menu -$menuitemTextActiveColor: $textColor; - -/// Icon color of a menuitem in active state -/// @group menu -$menuitemIconActiveColor: $textSecondaryColor; - -/// Background of a menuitem in active state -/// @group menu -$menuitemActiveBg: rgba($primaryColor, 0.08); - -/// Background of a menuitem in active and focus states -/// @group menu -$menuitemActiveFocusBg: rgba($primaryColor, 0.06); - -/// Font size of an icon indicating the item has a submenu -/// @group menu -$menuitemSubmenuIconFontSize: 0.875rem; - -/// Margin of a submenu header -/// @group menu -$submenuHeaderMargin: 0; - -/// Padding of a submenu header -/// @group menu -$submenuHeaderPadding: 0.5rem; - -/// Background of a submenu header -/// @group menu -$submenuHeaderBg: transparent; - -/// Text color of a submenu header -/// @group menu -$submenuHeaderTextColor: $textColor; - -/// Border radius of a submenu header -/// @group menu -$submenuHeaderBorderRadius: 0; - -/// Font weight of a submenu header -/// @group menu -$submenuHeaderFontWeight: 500; - -/// Background of an overlay menu -/// @group menu -$overlayMenuBg: $menuBg; - -/// Border of an overlay menu -/// @group menu -$overlayMenuBorder: 0 none; - -/// Box shadow of an overlay menu -/// @group menu -$overlayMenuShadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.12), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), - 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 0px 0px 1px #3c3c3c; - -/// Padding of a vertical menu e.g. tieredmenu, contextmenu -/// @group menu -$verticalMenuPadding: 0.5rem; - -/// Margin of a menuitem separator -/// @group menu -$menuSeparatorMargin: 0.25rem 0; - -/// Padding of a breadcrumb -/// @group menu -$breadcrumbPadding: 0.25rem; - -/// Background of a breadcrumb -/// @group menu -$breadcrumbBg: none; - -/// Border of a breadcrumb -/// @group menu -$breadcrumbBorder: none; - -/// Text color of a breadcrumb item -/// @group menu -$breadcrumbItemTextColor: var(--text-color-secondary); - -/// Icon color of a breadcrumb item -/// @group menu -$breadcrumbItemIconColor: var(--text-color-secondary); - -/// Text color of the breadcrumb item -/// @group menu -$breadcrumbLastItemTextColor: var(--text-color); - -/// Icon color of the breadcrumb item -/// @group menu -$breadcrumbLastItemIconColor: var(--text-color); - -/// Color of a breadcrumb separator -/// @group menu -$breadcrumbSeparatorColor: var(--text-color-secondary); - -/// Padding of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuPadding: 0.375rem; - -/// Background of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBg: #1c1c1c; - -/// Border of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBorder: $menuBorder; - -/// Text color of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuTextColor: $menuTextColor; - -/// Padding of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemPadding: $menuitemPadding; - -/// Border radius of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemBorderRadius: $borderRadius; - -/// Text color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextColor: $menuitemTextColor; - -/// Icon color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconColor: $menuitemIconColor; - -/// Text color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor; - -/// Icon color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor; - -/// Background of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg; - -/// Text color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor; - -/// Icon color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor; - -/// Background of a horizontal menu root item in active state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg; - -/// Width of an action item on dock -/// @group menu -$dockActionWidth: 4rem; - -/// Height of an action item on dock -/// @group menu -$dockActionHeight: 4rem; - -/// Padding of an action item on dock -/// @group menu -$dockItemPadding: 0.5rem; - -/// Border radius of an action item on dock -/// @group menu -$dockItemBorderRadius: $borderRadius; - -/// Margin of the current action item on dock -/// @group menu -$dockCurrentItemMargin: 1.5rem; - -/// Margin of the previous and next action item on dock -/// @group menu -$dockFirstItemsMargin: 1.3rem; - -/// Margin of the second previous and second next action item on dock -/// @group menu -$dockSecondItemsMargin: 0.9rem; - -/// Background of the list on dock -/// @group menu -$dockBg: rgba(255, 255, 255, 0.1); - -/// Border of the list on dock -/// @group menu -$dockBorder: 1px solid rgba(255, 255, 255, 0.2); - -/// Padding of the list on dock -/// @group menu -$dockPadding: 0.5rem 0.5rem; - -/// Border Radius of the list on dock -/// @group menu -$dockBorderRadius: 0.5rem; diff --git a/src/azion-dark/variables/_message.scss b/src/azion-dark/variables/_message.scss deleted file mode 100644 index 0e16964..0000000 --- a/src/azion-dark/variables/_message.scss +++ /dev/null @@ -1,145 +0,0 @@ -/// Margin of a message -/// @group message -$messageMargin: 0; - -/// Padding of a message -/// @group message -$messagePadding: 0.5rem; - -/// Border width of a message -/// @group message -$messageBorderWidth: none; - -/// Font size of a message icon -/// @group message -$messageIconFontSize: 24px; - -/// Font size of a message text -/// @group message -$messageTextFontSize: 1rem; - -/// Font weight of a message text -/// @group message -$messageTextFontWeight: 500; - -/// Padding of an inline message -/// @group message -$inlineMessagePadding: 0.5rem; - -/// Margin of an inline message -/// @group message -$inlineMessageMargin: 0; - -/// Font size of an inline message icon -/// @group message -$inlineMessageIconFontSize: 1rem; - -/// Padding of an inline message text -/// @group message -$inlineMessageTextFontSize: 1rem; - -/// Border width of an inline message text -/// @group message -$inlineMessageBorderWidth: none; - -/// Font size of a toast message icon -/// @group message -$toastIconFontSize: 32px; - -/// Margin of a toast message text -/// @group message -$toastMessageTextMargin: 0 0 0 1rem; - -/// Margin of a toast message -/// @group message -$toastMargin: 0 0 1rem 0; - -/// Padding of a toast message -/// @group message -$toastPadding: 1rem; - -/// Border width of a toast message -/// @group message -$toastBorderWidth: none; - -/// Box shadow of a toast message -/// @group message -$toastShadow: - 0px 1px 4px 0px rgba(0, 0, 0, 0.08), - 0px 0px 0px 1px #3e3e3e; - -/// Opacity of a toast message -/// @group message -$toastOpacity: 1; - -/// Font weight of a toast message title text -/// @group message -$toastTitleFontWeight: 700; - -/// Margin of a toast message detail text -/// @group message -$toastDetailMargin: $inlineSpacing 0 0 0; - -/// Background of an info message -/// @group message -$infoMessageBg: #a6a6a61f; - -/// Border of an info message -/// @group message -$infoMessageBorder: none; - -/// Text color of an info message -/// @group message -$infoMessageTextColor: $textColor; - -/// Icon color of an info message -/// @group message -$infoMessageIconColor: $textColor; - -/// Background of a success message -/// @group message -$successMessageBg: #39e4781f; - -/// Border of a success message -/// @group message -$successMessageBorder: none; - -/// Text color of a success message -/// @group message -$successMessageTextColor: $textColor; - -/// Icon color of a success message -/// @group message -$successMessageIconColor: #39e478; - -/// Background of a warning message -/// @group message -$warningMessageBg: #ffb64d1f; - -/// Border of a warning message -/// @group message -$warningMessageBorder: none; - -/// Text color of a warning message -/// @group message -$warningMessageTextColor: $textColor; - -/// Icon color of a warning message -/// @group message -$warningMessageIconColor: #ffb64d; - -/// Background of an error message -/// @group message -$errorMessageBg: #f2646433; - -/// Border of an error message -/// @group message -$errorMessageBorder: none; - -/// Text color of an error message -/// @group message -$errorMessageTextColor: $textColor; - -/// Icon color of an error message -/// @group message -$errorMessageIconColor: #f26464; diff --git a/src/azion-dark/variables/_misc.scss b/src/azion-dark/variables/_misc.scss deleted file mode 100644 index 5a04e8e..0000000 --- a/src/azion-dark/variables/_misc.scss +++ /dev/null @@ -1,143 +0,0 @@ -/// Padding of an inplace element -/// @group misc -$inplacePadding: $inputPadding; - -/// Background of an inplace element in hover state -/// @group misc -$inplaceHoverBg: #e9ecef; - -/// Text color of an inplace element in hover state -/// @group misc -$inplaceTextHoverColor: $textColor; - -/// Background of a badge -/// @group misc -$badgeBg: var(--surface-section); - -/// Text color of a badge -/// @group misc -$badgeTextColor: $textColor; - -/// Minimum width of a badge -/// @group misc -$badgeMinWidth: 1.5rem; - -/// Height of a badge -/// @group misc -$badgeHeight: 1.25rem; - -/// Font weight of a badge -/// @group misc -$badgeFontWeight: 400; - -/// Font size of a badge -/// @group misc -$badgeFontSize: 0.75rem; - -/// Padding of a badge -/// @group misc -$tagPadding: 0.25rem 0.5rem; - -/// Height of a progress bar -/// @group misc -$progressBarHeight: 1.5rem; - -/// Border of a progress bar -/// @group misc -$progressBarBorder: 0 none; - -/// Background of a progress bar -/// @group misc -$progressBarBg: var(--surface-600); - -/// Background of a progress bar value -/// @group misc -$progressBarValueBg: $primaryColor; - -/// Text color of a progress bar value -/// @group misc -$progressBarValueTextColor: $primaryTextColor; - -/// Stroke color of a progress spinner -/// @group misc -$progressSpinnerStrokeColor: var(--surface-600) !default; - -/// First spinner color of a progress spinner -/// @group misc -$progressSpinnerColorOne: $errorMessageTextColor !default; - -/// Second spinner color of a progress spinner -/// @group misc -$progressSpinnerColorTwo: $infoMessageTextColor !default; - -/// Third spinner color of a progress spinner -/// @group misc -$progressSpinnerColorThree: $successMessageTextColor !default; - -/// Fourth spinner color of a progress spinner -/// @group misc -$progressSpinnerColorFour: $warningMessageTextColor !default; - -/// Background of an avatar -/// @group misc -$avatarBg: #363636; - -/// Text color of an avatar -/// @group misc -$avatarTextColor: $textColor; - -/// Background of a chip -/// @group misc -$chipBg: #404040; - -/// Text color of a chip -/// @group misc -$chipTextColor: $textColor; - -/// Border radius of a chip -/// @group misc -$chipBorderRadius: $borderRadius; - -/// Background of a chip in focus state -/// @group misc -$chipFocusBg: #363636 !default; - -/// Color of a chip in focus state -/// @group misc -$chipFocusTextColor: $textColor !default; - -/// Background of a scrollTop -/// @group misc -$scrollTopBg: rgba(0, 0, 0, 0.7); - -/// Background of a scrollTop in hover state -/// @group misc -$scrollTopHoverBg: rgba(0, 0, 0, 0.8); - -/// Width of a scrollTop -/// @group misc -$scrollTopWidth: 3rem; - -/// Height of a scrollTop -/// @group misc -$scrollTopHeight: 3rem; - -/// Border radius of a scrollTop -/// @group misc -$scrollTopBorderRadius: 50%; - -/// Font size of a scrollTop -/// @group misc -$scrollTopFontSize: 1.5rem; - -/// Text color of a scrollTop -/// @group misc -$scrollTopTextColor: #f8f9fa; - -/// Background of a skeleton -/// @group misc -$skeletonBg: #3131316d; - -/// Background of a skeleton animation -/// @group misc -$skeletonAnimationBg: #31313199; diff --git a/src/azion-dark/variables/_overlay.scss b/src/azion-dark/variables/_overlay.scss deleted file mode 100644 index 735a33a..0000000 --- a/src/azion-dark/variables/_overlay.scss +++ /dev/null @@ -1,71 +0,0 @@ -/// Border of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBorder: 0 none; - -/// Background of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBg: $panelContentBg; - -/// Box shadow of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContainerShadow: - 0px 0px 0px 1px #3e3e3e, - 0px 24px 38px 3px rgba(0, 0, 0, 0.14), - 0px 11px 15px -7px rgba(0, 0, 0, 0.2), - 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - -/// Background of a dialog header -/// @group overlay -$dialogHeaderBg: #1c1c1c; - -/// Border of a dialog header -/// @group overlay -$dialogHeaderBorder: 1px solid var(--surface-border); - -/// Text color of a dialog header -/// @group overlay -$dialogHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of a dialog header -/// @group overlay -$dialogHeaderFontWeight: 500; - -/// Font size of a dialog header -/// @group overlay -$dialogHeaderFontSize: 1.125rem; - -/// Padding of a dialog header -/// @group overlay -$dialogHeaderPadding: 0 2rem; - -/// Padding of a dialog content -/// @group overlay -$dialogContentPadding: 1.25rem 2rem; - -/// Border of a dialog footer -/// @group overlay -$dialogFooterBorder: 1px solid var(--surface-border); - -/// Padding of a dialog footer -/// @group overlay -$dialogFooterPadding: 0 2rem; - -/// Padding of a confirmpopup content -/// @group overlay -$confirmPopupContentPadding: $panelContentPadding; - -/// Padding of a confirmpopup footer -/// @group overlay -$confirmPopupFooterPadding: 0 1rem 1rem 1rem; - -/// Background of a tooltip -/// @group overlay -$tooltipBg: $textColor; - -/// Text color of a tooltip -/// @group overlay -$tooltipTextColor: #1c1c1c; - -/// Padding of a tooltip -/// @group overlay -$tooltipPadding: $inputPadding; diff --git a/src/azion-dark/variables/_panel.scss b/src/azion-dark/variables/_panel.scss deleted file mode 100644 index d7dd673..0000000 --- a/src/azion-dark/variables/_panel.scss +++ /dev/null @@ -1,331 +0,0 @@ -/// Border color of a panel header -/// @group panel -$panelHeaderBorderColor: var(--surface-border); - -/// Border of a panel header -/// @group panel -$panelHeaderBorder: 1px solid var(--surface-border); - -/// Background of a panel header -/// @group panel -$panelHeaderBg: var(--surface-section); - -/// Text color of a panel header -/// @group panel -$panelHeaderTextColor: $textColor; - -/// Font weight of a panel header -/// @group panel -$panelHeaderFontWeight: 500; - -/// Padding of a panel header -/// @group panel -$panelHeaderPadding: 1rem; - -/// Font weight of a toggleable panel header -/// @group panel -$panelToggleableHeaderPadding: 0.5rem 1rem; - -/// Background of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderHoverBg: var(--surface-hover); - -/// Border color of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderHoverBorderColor: var(--surface-border); - -/// Text color of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderTextHoverColor: $textColor; - -/// Border color for the content section of a panel -/// @group panel -$panelContentBorderColor: var(--surface-border); - -/// Border for the content section of a panel -/// @group panel -$panelContentBorder: 1px solid var(--surface-border); - -/// Background for the content section of a panel -/// @group panel -$panelContentBg: #171717; - -/// Background for the striped row. -/// @group panel -$panelContentEvenRowBg: #e9ecef; - -/// Text color for the content section of a panel -/// @group panel -$panelContentTextColor: $textColor; - -/// Padding for the content section of a panel -/// @group panel -$panelContentPadding: 1.25rem; - -/// Border for the footer section of a panel -/// @group panel -$panelFooterBorder: 1px solid var(--surface-border); - -/// Background for the footer section of a panel -/// @group panel -$panelFooterBg: var(--surface-section); - -/// Text color for the footer section of a panel -/// @group panel -$panelFooterTextColor: $textColor; - -/// Padding for the footer section of a panel -/// @group panel -$panelFooterPadding: 0.5rem 1rem; - -/// Spacing between to accordion panels -/// @group panel -$accordionSpacing: 0; - -/// Border of an accordion panel header -/// @group panel -$accordionHeaderBorder: $panelHeaderBorder; - -/// Background of an accordion panel header -/// @group panel -$accordionHeaderBg: $panelHeaderBg; - -/// Text color of an accordion panel header -/// @group panel -$accordionHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of an accordion panel header -/// @group panel -$accordionHeaderFontWeight: $panelHeaderFontWeight; - -/// Padding of an accordion panel header -/// @group panel -$accordionHeaderPadding: $panelHeaderPadding; - -/// Background of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBg: var(--surface-hover); - -/// Border of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in hover state -/// @group panel -$accordionHeaderTextHoverColor: $textColor; - -/// Background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBg: $panelHeaderBg; - -/// Border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveColor: $textColor; - -/// Hover background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBg: var(--surface-hover); - -/// Hover border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveHoverColor: $textColor; - -/// Border for a content section of an accordion panel -/// @group panel -$accordionContentBorder: $panelContentBorder; - -/// Background for a content section of an accordion panel -/// @group panel -$accordionContentBg: $panelContentBg; - -/// Text color for a content section of an accordion panel -/// @group panel -$accordionContentTextColor: $panelContentTextColor; - -/// Padding for a content section of an accordion panel -/// @group panel -$accordionContentPadding: $panelContentPadding; - -/// Border for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorder: none; - -/// Border width for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorderWidth: none; - -/// Background for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBg: none; - -/// Spacing between tabview headers -/// @group panel -$tabviewHeaderSpacing: 0; - -/// Border of a tabview header -/// @group panel -$tabviewHeaderBorder: none; - -/// Border width of a tabview header -/// @group panel -$tabviewHeaderBorderWidth: none; - -/// Border color of a tabview header -/// @group panel -$tabviewHeaderBorderColor: none; - -/// Background of a tabview header -/// @group panel -$tabviewHeaderBg: none; - -/// Text color of a tabview header -/// @group panel -$tabviewHeaderTextColor: $textSecondaryColor; - -/// Font weight of a tabview header -/// @group panel -$tabviewHeaderFontWeight: 600; - -/// Padding of a tabview header -/// @group panel -$tabviewHeaderPadding: 0.375px 0.75rem; - -/// Margin of a tabview header -/// @group panel -$tabviewHeaderMargin: 0; - -/// Background of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBg: var(--surface-hover); - -/// Border of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBorderColor: none; - -/// Text color of a tabview header in hover state -/// @group panel -$tabviewHeaderTextHoverColor: $textColor; - -/// Background of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBg: $primaryColor; - -/// Border of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBorderColor: $primaryColor; - -/// Text color of a tabview header in selected state -/// @group panel -$tabviewHeaderTextActiveColor: $primaryTextColor; - -/// Border for content section of a tabview tab -/// @group panel -$tabviewContentBorder: 0 none; - -/// Background for content section of a tabview tab -/// @group panel -$tabviewContentBg: $panelContentBg; - -/// Text color for a content section of a tabview tab -/// @group panel -$tabviewContentTextColor: $panelContentTextColor; - -/// Padding for a content section of a tabview tab -/// @group panel -$tabviewContentPadding: $panelContentPadding; - -/// Background of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBg: #e9ecef; - -/// Border of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBorderColor: #171717; - -/// Text color of a fieldset header in hover state -/// @group panel -$panelHeaderTextHoverColor: rgba($primaryColor, 0.04); - -/// Border for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBorder: 0 none; - -/// Background for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBg: #f8f9fa; - -/// Padding of a card body -/// @group panel -$cardBodyPadding: none; - -/// Font size of a card title -/// @group panel -$cardTitleFontSize: 1.5rem; - -/// Font weight of a card title -/// @group panel -$cardTitleFontWeight: 700; - -/// Font size of a card subtitle -/// @group panel -$cardSubTitleFontWeight: 700; - -/// Text color of a card subtitle -/// @group panel -$cardSubTitleColor: $textSecondaryColor; - -/// Padding of a card content -/// @group panel -$cardContentPadding: 0; - -/// Padding of a card footer -/// @group panel -$cardFooterPadding: 0 0 0 0; - -/// Box shadow of a card -/// @group panel -$cardShadow: - 0px 2px 1px -1px rgba(0, 0, 0, 0.02), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), - 0px 1px 3px 0px rgba(0, 0, 0, 0.12), - 0px 0px 0px 1px #3c3c3c; - -/// Margin of divider in horizontal layout -/// @group panel -$dividerHorizontalMargin: 0; - -/// Padding of divider in horizontal layout -/// @group panel -$dividerHorizontalPadding: 0; - -/// Margin of divider in vertical layout -/// @group panel -$dividerVerticalMargin: 0; - -/// Padding of divider in vertical layout -/// @group panel -$dividerVerticalPadding: 0; - -/// Border width of the divider -/// @group panel -$dividerSize: 1px; - -/// Color of the divider border -/// @group panel -$dividerColor: var(--surface-border); - -/// Background of the splitter gutter -/// @group panel -$splitterGutterBg: #f8f9fa; - -/// Background of the splitter gutter handle -/// @group panel -$splitterGutterHandleBg: #3e3e3e; diff --git a/src/azion-light/_custom.scss b/src/azion-light/_custom.scss deleted file mode 100644 index 4a0c684..0000000 --- a/src/azion-light/_custom.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './custom/selection'; -@import './custom/special-button'; diff --git a/src/azion-light/_extensions.scss b/src/azion-light/_extensions.scss deleted file mode 100644 index 1ecae2e..0000000 --- a/src/azion-light/_extensions.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* Customizations to the designer theme should be defined here */ -@layer primevue { - @import '../azion-light/extended-components/button'; - @import '../azion-light/extended-components/selectbutton'; - @import '../azion-light/extended-components/tabview'; - @import '../azion-light/extended-components/tabmenu'; - @import '../azion-light/extended-components/divider'; - @import '../azion-light/extended-components/dropdownitem'; - @import '../azion-light/extended-components/inlinemessage'; - @import '../azion-light/extended-components/breadcumb'; - @import '../azion-light/extended-components/sidebar'; - @import '../azion-light/extended-components/tooltip'; - @import '../azion-light/extended-components/inputpassword'; - @import '../azion-light/extended-components/datatable'; - @import '../azion-light/extended-components/toast'; - @import '../azion-light/extended-components/inputswitch'; - @import '../azion-light/extended-components/radiobutton'; - @import '../azion-light/extended-components/checkbox'; - @import '../azion-light/extended-components/tag'; - @import '../azion-light/extended-components/markdown'; - @import '../azion-light/extended-components/listbox'; - @import '../azion-light/extended-components/inputnumber'; - @import '../azion-light/extended-components/calendar'; - @import '../azion-light/extended-components/badge'; - @import '../azion-light/extended-components/menuitem'; - @import '../azion-light/extended-components/progressbar'; - @import '../azion-light/extended-components/dialog'; - @import '../azion-light/extended-components/multiselect'; - @import '../azion-light/extended-components/carousel'; -} diff --git a/src/azion-light/_fonts.scss b/src/azion-light/_fonts.scss deleted file mode 100644 index 84eeed4..0000000 --- a/src/azion-light/_fonts.scss +++ /dev/null @@ -1,156 +0,0 @@ -// Configuration for the font-face of the theme, defaults to the system font so left as blank -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-light.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-light.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-light.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-light.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-light.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-light.svg#roboto-light') format('svg'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-regular.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-regular.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-regular.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-regular.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-regular.svg#Roboto-Regular') format('svg'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-italic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-italic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-italic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-italic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-italic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-italic.svg#roboto-italic') format('svg'); - font-weight: 400; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-medium.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-medium.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-medium.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-medium.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-medium.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-medium.svg#roboto-medium') format('svg'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-mediumitalic.svg#roboto-mediumitalic') format('svg'); - font-weight: 500; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bold.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bold.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bolditalic') format('svg'); - font-weight: bold; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bold') format('svg'); - font-weight: 600; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Roboto Mono'; - src: url('https://fonts.azion.com/roboto-mono/roboto-mono-regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto Mono'; - src: url('https://fonts.azion.com/roboto-mono/roboto-mono-light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('https://fonts.azion.com/roboto/roboto-black.eot'); - src: - url('https://fonts.azion.com/roboto/roboto-black.eot?#iefix') format('embedded-opentype'), - url('https://fonts.azion.com/roboto/roboto-black.woff2') format('woff2'), - url('https://fonts.azion.com/roboto/roboto-black.woff') format('woff'), - url('https://fonts.azion.com/roboto/roboto-black.ttf') format('truetype'), - url('https://fonts.azion.com/roboto/roboto-black.svg#roboto-black') format('svg'); - font-weight: 700; - font-style: normal; - font-display: swap; -} diff --git a/src/azion-light/_variables.scss b/src/azion-light/_variables.scss deleted file mode 100644 index 261d3b6..0000000 --- a/src/azion-light/_variables.scss +++ /dev/null @@ -1,112 +0,0 @@ -$primaryColor: #2b2b2b; -$primaryDarkColor: #000; -$primaryDarkerColor: #000; -$primaryTextColor: #f4f4f4; - -$colors: ( - 'blue': #2196f3, - 'green': #4caf50, - 'yellow': #fbc02d, - 'cyan': #00bcd4, - 'pink': #e91e63, - 'indigo': #3f51b5, - 'teal': #009688, - 'orange': #f57c00, - 'bluegray': #607d8b, - 'purple': #9c27b0, - 'red': #ff4032, - 'primary': $primaryColor -); - -@import './variables/general'; -@import './variables/form'; -@import './variables/button'; -@import './variables/panel'; -@import './variables/_data'; -@import './variables/_overlay'; -@import './variables/_message'; -@import './variables/_menu'; -@import './variables/_media'; -@import './variables/_misc'; - -:root.azion-light { - --surface-a: #ffffff; - --surface-b: #f8f9fa; - --surface-c: #e9ecef; - --surface-d: #dee2e6; - --surface-e: #ffffff; - --surface-f: #ffffff; - - --text-color: #1c1c1c; - --text-color-secondary: #666666; - --text-color-link: #3265cb; - - --primary-color: #1e1e1e; - --primary-color-text: #f4f4f4; - - --font-family: 'Roboto', sans-serif; - - --surface-0: #ffffff; - --surface-50: #f9fafb; - --surface-100: #f4f4f4; - --surface-200: #eeeeee; - --surface-300: #e8e8e8; - --surface-400: #e3e3e3; - --surface-500: #dddddd; - --surface-600: #d3d3d3; - --surface-700: #c9c9c9; - --surface-800: #b5b5b5; - --surface-900: #a7a7a7; - - --green-50: #f4fcf7; - --green-100: #caf1d8; - --green-200: #a0e6ba; - --green-300: #76db9b; - --green-400: #4cd07d; - --green-500: #22c55e; - --green-600: #1da750; - --green-700: #188a42; - --green-800: #136c34; - --green-900: #0e4f26; - - --red-50: #fff5f5; - --red-100: #ffd0ce; - --red-200: #ffaca7; - --red-300: #ff8780; - --red-400: #ff6259; - --red-500: #ff3d32; - --red-600: #d9342b; - --red-700: #b32b23; - --red-800: #8c221c; - --red-900: #661814; - - --gray-50: #fafafa; - --gray-100: #f5f5f5; - --gray-200: #eeeeee; - --gray-300: #e0e0e0; - --gray-400: #bdbdbd; - --gray-500: #9e9e9e; - --gray-600: #757575; - --gray-700: #616161; - --gray-800: #424242; - --gray-900: #212121; - - --content-padding: #{$panelContentPadding}; - --inline-spacing: #{$inlineSpacing}; - --border-radius: #{$borderRadius}; - - --surface-ground: #ffffff; - --surface-section: #ffffff; - --surface-card: #ffffff; - --surface-overlay: #ffffff; - --surface-border: #e8e8e8; - --surface-hover: #3b3b3b16; - - --focus-ring: #{$focusShadow}; - --maskbg: #{$maskBg}; - --highlight-bg: #{$highlightBg}; - --highlight-text-color: #{$highlightTextColor}; - --bg-selection: #F7966E; - - color-scheme: light; -} diff --git a/src/azion-light/custom/_focus.scss b/src/azion-light/custom/_focus.scss deleted file mode 100644 index d6b25e3..0000000 --- a/src/azion-light/custom/_focus.scss +++ /dev/null @@ -1,5 +0,0 @@ -a { - &:focus { - @include focused(); - } -} diff --git a/src/azion-light/custom/_scrollbehavior.scss b/src/azion-light/custom/_scrollbehavior.scss deleted file mode 100644 index cb7579e..0000000 --- a/src/azion-light/custom/_scrollbehavior.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Enable smooth scrolling on the whole document - */ - html { - scroll-behavior: smooth; -} \ No newline at end of file diff --git a/src/azion-light/custom/_selection.scss b/src/azion-light/custom/_selection.scss deleted file mode 100644 index 36043a9..0000000 --- a/src/azion-light/custom/_selection.scss +++ /dev/null @@ -1,3 +0,0 @@ -::selection { - background-color: var(--bg-selection); -} diff --git a/src/azion-light/custom/_special-button.scss b/src/azion-light/custom/_special-button.scss deleted file mode 100644 index 8ab69e4..0000000 --- a/src/azion-light/custom/_special-button.scss +++ /dev/null @@ -1,56 +0,0 @@ -.special-button { - position: relative; - display: flex; - justify-content: center; - align-items: center; - border: none; - padding: 1px; - background-color: transparent; - border-radius: 0.375rem; - overflow: hidden; - transition: background-color 0.3s ease; - - &::before { - content: ''; - position: absolute; - inset: 0; - filter: blur(12px); - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 1), /* white */ - rgba(0, 20, 255, 1), /* violet */ - rgba(255, 120, 0, 1) /* orange */ - ); - animation: rotate-background 8s linear infinite; - z-index: 1; - pointer-events: none; - } - - &:hover .special-button-content { - background-color: var(--special-button-hover-bg); - box-shadow: inset 0 0 0 0px var(--surface-border); - } -} - -.special-button-content { - position: relative; - z-index: 2; - display: flex; - align-items: center; - gap: 0.375rem; - padding: 0 0.75rem; - height: 2rem; - border-radius: 0.375rem; - background-color: var(--special-button-bg); - transition: background-color 0.3s ease; - box-shadow: inset 0 0 0 .5px var(--surface-border); -} - -@keyframes rotate-background { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/azion-light/extended-components/_badge.scss b/src/azion-light/extended-components/_badge.scss deleted file mode 100644 index 68e84d7..0000000 --- a/src/azion-light/extended-components/_badge.scss +++ /dev/null @@ -1,54 +0,0 @@ -// Custom badge -.p-badge { - border: 1px solid var(--surface-border) !important; - border-radius: $borderRadius; - color: $badgeTextColor; - font-size: 0.75rem !important; - font-weight: 600 !important; - min-width: $badgeMinWidth; - height: $badgeHeight; - line-height: $badgeHeight; - display: flex !important; - align-items: center !important; - justify-content: center !important; - - &.p-badge-secondary { - background-color: $secondaryButtonBg; - color: $secondaryButtonTextColor; - } - - &.p-badge-success { - background-color: $successButtonBg; - color: $successButtonTextColor; - } - - &.p-badge-info { - background-color: $infoButtonBg; - color: $infoButtonTextColor; - } - - &.p-badge-warning { - background-color: $warningButtonBg; - color: $warningButtonTextColor; - } - - &.p-badge-danger { - background-color: $dangerButtonBg; - color: $dangerButtonTextColor; - border: none !important; - } - - &.p-badge-lg { - font-size: 1.5 * $badgeFontSize; - min-width: 1.5 * $badgeMinWidth; - height: 1.5 * $badgeHeight; - line-height: 1.5 * $badgeHeight; - } - - &.p-badge-xl { - font-size: 2 * $badgeFontSize; - min-width: 2 * $badgeMinWidth; - height: 2 * $badgeHeight; - line-height: 2 * $badgeHeight; - } -} diff --git a/src/azion-light/extended-components/_breadcumb.scss b/src/azion-light/extended-components/_breadcumb.scss deleted file mode 100644 index d5e7ecd..0000000 --- a/src/azion-light/extended-components/_breadcumb.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Custom Breadcrumb -.p-breadcrumb { - .p-breadcrumb-list { - font-weight: 500 !important; - text-wrap: nowrap !important; - .p-menuitem-link { - padding: 0.25rem 0.125rem !important; - transition: $formElementTransition !important; - font-size: 0.875rem !important; - } - .p-menuitem:last-of-type { - font-weight: 500 !important; - } - .p-menuitem:hover { - text-decoration: underline; - } - } -} diff --git a/src/azion-light/extended-components/_button.scss b/src/azion-light/extended-components/_button.scss deleted file mode 100644 index c4d91fa..0000000 --- a/src/azion-light/extended-components/_button.scss +++ /dev/null @@ -1,138 +0,0 @@ -//Custom Button -.p-button { - font-weight: 500 !important; - - &.p-button-outlined { - color: $textColor !important; - - &:enabled:hover { - background-color: var(--surface-hover) !important; - } - - &:enabled:active { - background-color: var(--surface-hover) !important; - } - - &.p-button-plain { - color: $textColor !important; - - &:enabled:hover { - color: $textColor !important; - background-color: var(--surface-hover); - } - - &:enabled:active { - color: $textColor !important; - background-color: var(--surface-hover); - } - } - } - - &.p-button-text { - color: $textColor !important; - - &:enabled:hover { - color: $textColor !important; - background-color: var(--surface-300) !important; - } - - &:enabled:active { - color: $textColor !important; - background-color: var(--surface-hover); - } - - &.p-button-plain { - color: $textColor !important; - background-color: var(--surface-hover); - - &:enabled:hover { - color: $textColor !important; - background-color: var(--surface-hover); - } - - &:enabled:active { - color: $textColor !important; - background-color: var(--surface-hover); - } - } - } - - &.p-button-icon-only:not(.p-datepicker-trigger, .p-inputnumber-button) { - color: $textColor !important; - width: 2rem !important; - height: 2rem !important; - .p-button-icon-left, - .p-button-icon-right { - margin: 0; - } - - &.p-button-rounded { - border-radius: 50%; - height: $buttonIconOnlyWidth; - } - } - - &.p-button-sm { - @include scaledFontSize($fontSize, $scaleSM); - @include scaledPadding($buttonPadding, $scaleSM); - - .p-button-icon { - @include scaledFontSize($primeIconFontSize, $scaleSM); - } - } - - &.p-button-lg { - @include scaledFontSize($fontSize, $scaleLG); - @include scaledPadding($buttonPadding, $scaleLG); - - .p-button-icon { - @include scaledFontSize($primeIconFontSize, $scaleLG); - } - } - - &.p-button-loading-label-only { - .p-button-loading-icon { - margin-right: 0; - } - } -} - -.p-fluid { - .p-button { - width: 100%; - } - - .p-button-icon-only { - width: $buttonIconOnlyWidth; - } - - .p-buttonset { - display: flex; - - .p-button { - flex: 1; - } - } -} - -.p-button.p-button-link { - color: $linkButtonColor !important; - &:not(:disabled):focus { - box-shadow: none !important; - } - &:not(:disabled):focus-visible { - box-shadow: $linkButtonFocusShadow !important; - } -} - -.p-inputgroup > .p-button { - &.p-button-icon-only { - color: initial; - width: initial; - height: initial !important; - .p-button-icon-left, - .p-button-icon-right { - margin: initial; - } - } -} diff --git a/src/azion-light/extended-components/_calendar.scss b/src/azion-light/extended-components/_calendar.scss deleted file mode 100644 index 7eeffb6..0000000 --- a/src/azion-light/extended-components/_calendar.scss +++ /dev/null @@ -1,42 +0,0 @@ -.p-calendar { - .p-button-icon-only { - color: $inputIconColor; - background: $inputBg; - border: $inputBorder; - border-left: none; - - &:enabled:hover { - background: $secondaryButtonHoverBg; - color: $secondaryButtonTextHoverColor; - border-color: $secondaryButtonHoverBorderColor; - } - - &:enabled:focus { - box-shadow: $secondaryButtonFocusShadow; - } - - &:enabled:active { - background: $secondaryButtonActiveBg; - color: $secondaryButtonTextActiveColor; - border-color: $secondaryButtonActiveBorderColor; - } - - &.p-button-outlined { - background-color: transparent; - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - - &:enabled:hover { - background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - - &:enabled:active { - background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - } - } -} diff --git a/src/azion-light/extended-components/_carousel.scss b/src/azion-light/extended-components/_carousel.scss deleted file mode 100644 index 28e29e7..0000000 --- a/src/azion-light/extended-components/_carousel.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Custom carousel - -.p-carousel-indicators { - .p-carousel-indicator { - &.p-highlight { - background: #1c1c1c !important; - } - } -} \ No newline at end of file diff --git a/src/azion-light/extended-components/_checkbox.scss b/src/azion-light/extended-components/_checkbox.scss deleted file mode 100644 index 864ee8b..0000000 --- a/src/azion-light/extended-components/_checkbox.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Custom Checkbox -.p-checkbox { - .p-checkbox-box { - border: 2px solid var(--surface-border) !important; - .p-checkbox-icon { - color: white !important; - - &.p-icon { - } - } - - &.p-highlight { - border-color: #f3652b !important; - background: #f3652b !important; - } - } - - &:not(.p-checkbox-disabled) { - .p-checkbox-box { - &:hover { - background: var(--gray-100) !important; - border-color: #f5793f !important; - } - - &.p-focus { - @include focused-input(); - } - - &.p-highlight:hover { - border-color: #f5793f !important; - background: #f5793f !important; - } - } - } - - &.p-invalid > .p-checkbox-box { - @include invalid-input(); - } -} - -.p-input-filled { - .p-checkbox { - .p-checkbox-box { - &.p-highlight { - } - } - - &:not(.p-checkbox-disabled) { - .p-checkbox-box { - &:hover { - } - - &.p-highlight:hover { - } - } - } - } -} - -@if ($highlightBg == $checkboxActiveBg) { - .p-highlight { - .p-checkbox { - .p-checkbox-box { - } - } - } -} diff --git a/src/azion-light/extended-components/_datatable.scss b/src/azion-light/extended-components/_datatable.scss deleted file mode 100644 index 1a9867a..0000000 --- a/src/azion-light/extended-components/_datatable.scss +++ /dev/null @@ -1,102 +0,0 @@ -.p-datatable { - border: var(--surface-border) 1px solid; - border-radius: $borderRadius; - font-size: 0.875rem !important; - text-wrap: nowrap !important; - - .p-datatable-header { - border-top-right-radius: $borderRadius; - border-top-left-radius: $borderRadius; - } - - .p-datatable-tbody > .p-datatable-emptymessage:hover { - background: unset !important; - } - - .p-datatable-tbody > tr > td { - box-sizing: inherit !important; - font-size: 0.875rem; - } - - .p-datatable-thead > tr > th { - box-sizing: inherit !important; - font-size: 0.875rem; - text-wrap: nowrap !important; - - .p-column-header-content { - vertical-align: center; - } - } - - .p-sortable-column { - text-wrap: nowrap !important; - .p-sortable-column-icon { - opacity: 0 !important; - } - } - - .p-sortable-column:hover { - .p-sortable-column-icon { - opacity: 1 !important; - color: $tableHeaderCellHighlightTextColor !important; - } - } - - .p-sortable-column { - text-wrap: nowrap !important; - .p-sortable-column-icon { - opacity: 0; - } - - &.p-highlight { - .p-sortable-column-icon { - opacity: 1 !important; - } - } - } - - .p-datatable-wrapper { - overscroll-behavior: revert !important; - } - - .p-datatable-tbody > .p-datatable-emptymessage:hover { - background: unset !important; - } -} - -.p-overlaypanel:has(.hidden-columns-panel) { - box-shadow: none !important; -} -.hidden-columns-panel { - .p-listbox-item { - font-size: 0.875rem; - line-height: 0.875rem; - padding: 0.75rem 0.5rem !important; - color: var(--surface-700) !important; - background: transparent; - &::before { - font-family: primeicons; - content: '\e965' !important; - color: var(--surface-700); - margin-right: 0.5rem; - font-size: 0.875rem; - line-height: 0.875rem; - } - &:hover { - background: $inputListItemHoverBg !important; - } - &.p-highlight { - opacity: 1; - color: var(--text-color) !important; - background: transparent !important; - &::before { - font-family: primeicons; - content: '\e966' !important; - color: var(--text-color); - } - &:hover { - background: $inputListItemHoverBg !important; - } - } - } -} diff --git a/src/azion-light/extended-components/_dialog.scss b/src/azion-light/extended-components/_dialog.scss deleted file mode 100644 index 8416437..0000000 --- a/src/azion-light/extended-components/_dialog.scss +++ /dev/null @@ -1,45 +0,0 @@ -// Custom Dialog -.p-dialog { - margin-inline: 2rem !important; - .p-dialog-header { - justify-content: space-between; - font-size: 1.25rem !important; - min-height: 3.5rem !important; - font-weight: 500 !important; - padding-inline: 2rem !important; - border-bottom: 1px solid var(--surface-border) !important; - } - .p-dialog-footer { - height: 3.5rem !important; - padding-inline: 2rem !important; - display: flex !important; - flex-direction: row; - align-items: center !important; - justify-content: flex-end !important; - gap: 0.75rem !important; - button { - margin: 0 !important; - } - } -} - -@media only screen and (max-width: 768px) { - .p-dialog { - margin-inline: 0.75rem !important; - .p-dialog-header { - padding-inline: 0.75rem !important; - } - .p-dialog-content { - padding-inline: 0.75rem !important; - } - .p-dialog-footer { - button { - width: 100%; - } - height: auto !important ; - flex-direction: column; - padding-block: 0.75rem !important; - padding-inline: 0.75rem !important; - } - } -} diff --git a/src/azion-light/extended-components/_divider.scss b/src/azion-light/extended-components/_divider.scss deleted file mode 100644 index b789de2..0000000 --- a/src/azion-light/extended-components/_divider.scss +++ /dev/null @@ -1,31 +0,0 @@ -.p-divider { - .p-divider-content { - background-color: $panelContentBg; - } - - &.p-divider-horizontal { - margin: $dividerHorizontalMargin; - padding: $dividerHorizontalPadding; - - &:before { - border-top: 1px solid var(--surface-border); - } - - .p-divider-content { - padding: 0 $inlineSpacing; - } - } - - &.p-divider-vertical { - margin: $dividerVerticalMargin; - padding: $dividerVerticalPadding; - - &:before { - border-left: 1px solid var(--surface-border); - } - - .p-divider-content { - padding: $inlineSpacing 0; - } - } -} diff --git a/src/azion-light/extended-components/_dropdownitem.scss b/src/azion-light/extended-components/_dropdownitem.scss deleted file mode 100644 index ed60aa1..0000000 --- a/src/azion-light/extended-components/_dropdownitem.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Custom DropdownItem -.p-dropdown-item { - height: 2.375rem !important; - display: flex !important; - align-items: center !important; - font-size: 0.875rem !important; - font-weight: normal !important; -} -.p-dropdown-item-group { - font-size: 0.875rem !important; - font-weight: 500 !important; -} diff --git a/src/azion-light/extended-components/_inlinemessage.scss b/src/azion-light/extended-components/_inlinemessage.scss deleted file mode 100644 index 2968f45..0000000 --- a/src/azion-light/extended-components/_inlinemessage.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Custom InlineMessage -.p-inline-message .p-inline-message-icon { - font-size: 0.875rem !important; -} -.p-inline-message .p-inline-message-text { - font-size: 0.875rem !important; - line-height: 100% !important; - width: 100%; -} diff --git a/src/azion-light/extended-components/_inputnumber.scss b/src/azion-light/extended-components/_inputnumber.scss deleted file mode 100644 index dbb5ca2..0000000 --- a/src/azion-light/extended-components/_inputnumber.scss +++ /dev/null @@ -1,40 +0,0 @@ -.p-inputnumber-button { - color: $inputIconColor; - background: $inputBg; - border: $inputBorder; - border-left: none; - - &:enabled:hover { - background: $secondaryButtonHoverBg; - color: $secondaryButtonTextHoverColor; - border-color: $secondaryButtonHoverBorderColor; - } - - &:enabled:focus { - box-shadow: $secondaryButtonFocusShadow; - } - - &:enabled:active { - background: $secondaryButtonActiveBg; - color: $secondaryButtonTextActiveColor; - border-color: $secondaryButtonActiveBorderColor; - } - - &.p-button-outlined { - background-color: transparent; - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - - &:enabled:hover { - background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - - &:enabled:active { - background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); - color: $secondaryButtonBg; - border: $outlinedButtonBorder; - } - } -} diff --git a/src/azion-light/extended-components/_inputpassword.scss b/src/azion-light/extended-components/_inputpassword.scss deleted file mode 100644 index 49a0aa1..0000000 --- a/src/azion-light/extended-components/_inputpassword.scss +++ /dev/null @@ -1,4 +0,0 @@ -// Custom input password -.p-password-input { - width: 100% !important; -} diff --git a/src/azion-light/extended-components/_inputswitch.scss b/src/azion-light/extended-components/_inputswitch.scss deleted file mode 100644 index 1b7ecf7..0000000 --- a/src/azion-light/extended-components/_inputswitch.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Custom Switch -@use 'sass:math'; - -.p-inputswitch { - .p-inputswitch-slider { - background-color: var(--gray-400) !important; - padding-left: 2px; - - &:before { - margin-left: 1px; - } - } - - &.p-inputswitch-checked { - .p-inputswitch-slider:before { - background-color: #fff !important; - } - } - - &.p-focus { - .p-inputswitch-slider { - @include focused(); - } - } - - &:not(.p-disabled):hover { - .p-inputswitch-slider { - background: var(--gray-500) !important; - } - } - - &.p-inputswitch-checked { - .p-inputswitch-slider { - background: #f3652b !important; - - &:before { - background: $inputSwitchHandleOnBg; - } - } - - &:not(.p-disabled):hover { - .p-inputswitch-slider { - background: #f5793f !important; - } - } - } - - &.p-invalid { - .p-inputswitch-slider { - @include invalid-input(); - } - } -} diff --git a/src/azion-light/extended-components/_listbox.scss b/src/azion-light/extended-components/_listbox.scss deleted file mode 100644 index f0af87b..0000000 --- a/src/azion-light/extended-components/_listbox.scss +++ /dev/null @@ -1,25 +0,0 @@ -.p-listbox { - .p-listbox-list { - .p-listbox-item { - display: flex !important; - gap: 12px !important; - padding: 0 12px; - height: 38px !important; - align-items: center !important; - font-size: 0.875rem !important; - font-weight: 500 !important; - } - &.p-focus { - border-color: none !important; - outline: none !important; - outline-offset: none !important; - box-shadow: none !important; - } - &.p-focus:focus-visible { - border-color: none !important; - outline: $focusOutline !important; - outline-offset: $focusOutlineOffset !important; - box-shadow: $focusShadow !important; - } - } -} diff --git a/src/azion-light/extended-components/_markdown.scss b/src/azion-light/extended-components/_markdown.scss deleted file mode 100644 index f7cf12d..0000000 --- a/src/azion-light/extended-components/_markdown.scss +++ /dev/null @@ -1,127 +0,0 @@ -.prose { - *:not(p, a, li) { - color: var(--text-color) !important; - } - - *:is(a):not(.p-button), *:is(a > u):not(.p-button > u) { - color: var(--text-color-link) !important; - } - - *:is(table) { - border-collapse: separate; - border-spacing: .5px; - box-sizing: content-box; - border: 1px solid var(--surface-border); - border-radius: 6px; - } - - *:is(table > thead) { - border-collapse: separate; - background: #e7e7e7; - } - - *:is(tr > th) { - background: #e7e7e7; - } - - *:is(tr > th) { - font-size: .875rem; - text-wrap: nowrap; - color: var(--text-color); - font-weight: 600; - text-align: left; - padding: 1rem !important; - background: #e7e7e7; - } - - *:is(tr > td) { - font-size: .875rem; - color: var(--text-color); - padding: 1rem !important; - border-top: 1px solid var(--surface-border); - background: var(--surface-section); - } - - @media screen and (max-width: 640px) { - table { - display: block; - width: 100%; - overflow-x: scroll; - } - table td { - white-space: nowrap; - } - } - - *:is(p), *:is(li) { - color: var(--text-color-secondary) !important; - } - - *:is(hr) { - border-color: var(--surface-border) !important; - } - *:is(hr) { - border-color: var(--surface-border) !important; - } - *:is(header h1) { - margin-bottom: 0 !important; - } - *:is(hr + .heading-wrapper) { - align-items: flex-start !important; - - h1, h2, h3, h4, h5, h6 { - margin-top: 0 !important; - } - } - - *:is(aside.content) { - background: #f3652b15 !important; - border-radius: 0.325rem !important; - border-left: #f3652b 5px solid !important; - } - *:is(aside.content.note) { - background: var(--surface-200) !important; - border-left: var(--surface-600) 5px solid !important; - margin: 2rem 0 !important; - } - *:is(aside.content > p) { - color: var(--text-color) !important; - display: flex; - gap: 0.375rem; - fill: #f3652b !important; - margin: 1rem 0 !important; - padding-left: .375rem; - } - *:is(aside.content > section > p) { - margin: .5rem .5rem 0 0 !important; - font-size: 1rem; - padding-left: .375rem; - } - - *:is(._tablist_ugdi6_34){ - border-color: transparent !important; - } - *:is(.TabGroup) { - border-bottom: none !important; - } - *:is(.TabGroup > button){ - font-weight: 500 !important; - } - *:is(.TabGroup > span){ - color: #f3652b !important; - height: 10px !important; - background: #f3652b !important; - } - *:is(._tab-scroll-overflow_ugdi6_10 > .border) { - border-color: var(--surface-border) !important; - } - *:is(.expressive-code) { - margin-bottom: 1.8rem !important; - } - *:is(.expressive-code code) { - background: var(--surface-200) !important; - } - *:is(.p-button) { - margin: 0 .5rem .5rem 0; - } -} diff --git a/src/azion-light/extended-components/_menuitem.scss b/src/azion-light/extended-components/_menuitem.scss deleted file mode 100644 index 83c4eae..0000000 --- a/src/azion-light/extended-components/_menuitem.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Custom MenuItem -.p-menu { - .p-menuitem { - .p-menuitem-content { - .p-menuitem-link { - height: 38px !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - .p-menuitem-text { - font-size: 0.875rem !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .p-menuitem-icon { - font-size: 0.875rem !important; - } - } - } - } -} diff --git a/src/azion-light/extended-components/_multiselect.scss b/src/azion-light/extended-components/_multiselect.scss deleted file mode 100644 index 2c9d992..0000000 --- a/src/azion-light/extended-components/_multiselect.scss +++ /dev/null @@ -1,170 +0,0 @@ -@use 'sass:math'; - -.p-multiselect { - font-size: 0.875rem !important; - background: $inputBg; - border: $inputBorder; - transition: $formElementTransition; - border-radius: $borderRadius; - - &:not(.p-disabled):hover { - border-color: $inputHoverBorderColor; - } - - &:not(.p-disabled).p-focus { - @include focused-input(); - } - - .p-multiselect-label { - padding: $inputPadding; - transition: $formElementTransition; - - &.p-placeholder { - color: $inputPlaceholderTextColor; - } - } - - &.p-multiselect-chip { - .p-multiselect-token { - font-size: 0.875rem !important; - padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); - margin-right: $inlineSpacing; - background: $chipBg; - color: $chipTextColor; - border-radius: $chipBorderRadius; - - .p-multiselect-token-icon { - margin-left: $inlineSpacing; - } - } - } - - .p-multiselect-trigger { - background: transparent; - color: $inputIconColor; - width: $inputGroupAddOnMinWidth; - border-top-right-radius: $borderRadius; - border-bottom-right-radius: $borderRadius; - } - - &.p-invalid.p-component { - @include invalid-input(); - } -} - -.p-inputwrapper-filled { - &.p-multiselect { - &.p-multiselect-chip { - .p-multiselect-label { - padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); - } - } - } -} - -.p-multiselect-panel { - background: $inputOverlayBg; - color: $inputListTextColor; - border: $inputOverlayBorder; - border-radius: $borderRadius; - box-shadow: $inputOverlayShadow; - - .p-multiselect-header { - padding: $inputListHeaderPadding; - border-bottom: $inputListHeaderBorder; - color: $inputListHeaderTextColor; - background: $inputOverlayHeaderBg; - margin: $inputListHeaderMargin; - border-top-right-radius: $borderRadius; - border-top-left-radius: $borderRadius; - - .p-multiselect-filter-container { - .p-inputtext { - padding-right: nth($inputPadding, 2) + $primeIconFontSize; - } - - .p-multiselect-filter-icon { - right: nth($inputPadding, 2); - color: $inputIconColor; - } - } - - .p-checkbox { - margin-right: $inlineSpacing; - } - - .p-multiselect-close { - margin-left: $inlineSpacing; - @include action-icon(); - } - } - - .p-multiselect-items { - font-size: 0.875rem !important; - padding: $inputListPadding; - - .p-multiselect-item { - height: 2.375rem !important; - margin: $inputListItemMargin; - padding: $inputListItemPadding; - border: $inputListItemBorder; - color: $inputListItemTextColor; - background: $inputListItemBg; - transition: $listItemTransition; - border-radius: $inputListItemBorderRadius; - - &.p-highlight { - color: $highlightTextColor; - background: $highlightBg; - - &.p-focus { - background: $highlightFocusBg; - } - } - - &:not(.p-highlight):not(.p-disabled) { - &.p-focus { - color: $inputListItemTextFocusColor; - background: $inputListItemFocusBg; - } - - &:hover { - color: $inputListItemTextHoverColor; - background: $inputListItemHoverBg; - } - } - - .p-checkbox { - margin-right: $inlineSpacing; - } - } - - .p-multiselect-item-group { - margin: $submenuHeaderMargin; - padding: $submenuHeaderPadding; - color: $submenuHeaderTextColor; - background: $submenuHeaderBg; - font-weight: $submenuHeaderFontWeight; - } - - .p-multiselect-empty-message { - padding: $inputListItemPadding; - color: $inputListItemTextColor; - background: $inputListItemBg; - } - } -} - -.p-input-filled { - .p-multiselect { - background: $inputFilledBg; - - &:not(.p-disabled):hover { - background-color: $inputFilledHoverBg; - } - - &:not(.p-disabled).p-focus { - background-color: $inputFilledFocusBg; - } - } -} diff --git a/src/azion-light/extended-components/_overlaypanel.scss b/src/azion-light/extended-components/_overlaypanel.scss deleted file mode 100644 index 143ce0f..0000000 --- a/src/azion-light/extended-components/_overlaypanel.scss +++ /dev/null @@ -1,17 +0,0 @@ -.p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: none !important; - color: transparent; -} -.p-overlaypanel:after, -.p-overlaypanel:before { - content: none; -} -.p-overlaypanel.p-overlaypanel-flipped:after { - border-top-color: none !important; -} -.p-overlaypanel.p-overlaypanel-flipped:before { - border-top-color: none !important; -} -.p-overlaypanel { - margin-top: 0; -} diff --git a/src/azion-light/extended-components/_picklist.scss b/src/azion-light/extended-components/_picklist.scss deleted file mode 100644 index cd16a20..0000000 --- a/src/azion-light/extended-components/_picklist.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Custom PickList -.p-picklist { - .p-picklist-buttons { - .p-button { - background-color: transparent; - transition: all 150ms; - border: 1px solid var(--surface-border); - color: $textSecondaryColor !important; - } - .p-button:hover { - background-color: var(--surface-hover) !important; - } - } - .p-picklist-list { - .p-picklist-item { - padding: 0 0.5rem !important; - font-size: 0.875rem; - min-height: 2.375rem !important; - border-radius: $borderRadius; - display: flex; - align-items: center; - } - } -} diff --git a/src/azion-light/extended-components/_progressbar.scss b/src/azion-light/extended-components/_progressbar.scss deleted file mode 100644 index 16198e2..0000000 --- a/src/azion-light/extended-components/_progressbar.scss +++ /dev/null @@ -1,8 +0,0 @@ -.p-progressbar { - border-radius: 0px !important; - border: 0px !important; - .p-progressbar-value { - border-radius: 0px !important; - background: #f3652b !important; - } -} diff --git a/src/azion-light/extended-components/_radiobutton.scss b/src/azion-light/extended-components/_radiobutton.scss deleted file mode 100644 index 8dc0e29..0000000 --- a/src/azion-light/extended-components/_radiobutton.scss +++ /dev/null @@ -1,62 +0,0 @@ -.p-radiobutton { - .p-radiobutton-box { - border: 2px solid var(--surface-border) !important; - - &:not(.p-disabled):not(.p-highlight):hover { - border-color: #f3652b !important; - } - - &:not(.p-disabled).p-focus { - @include focused-input(); - } - - &.p-highlight { - border-color: #f3652b !important; - background: #f3652b !important; - - &:not(.p-disabled):hover { - border-color: #f3652b !important; - background: #f3652b !important; - color: #f3652b !important; - } - } - } - - &.p-invalid > .p-radiobutton-box { - @include invalid-input(); - } - - &:focus-visible { - outline: 0 none; - } -} - -.p-input-filled { - .p-radiobutton { - .p-radiobutton-box { - background-color: #f3652b !important; - - &:not(.p-disabled):hover { - background-color: #f3652b !important; - } - - &.p-highlight { - background: #f3652b !important; - - &:not(.p-disabled):hover { - background: #f3652b !important; - } - } - } - } -} - -@if ($highlightBg == $radiobuttonActiveBg) { - .p-highlight { - .p-radiobutton { - .p-radiobutton-box { - border-color: #f3652b !important; - } - } - } -} diff --git a/src/azion-light/extended-components/_selectbutton.scss b/src/azion-light/extended-components/_selectbutton.scss deleted file mode 100644 index 1174847..0000000 --- a/src/azion-light/extended-components/_selectbutton.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Custom SelectButton -.p-selectbutton { - background: var(--surface-300) !important; - padding: 0.3rem; - border-radius: $borderRadius !important; - - .p-button { - background: none !important; - border: none !important; - height: 1.7rem !important; - font-size: 0.875rem !important; - border-radius: 0.25rem !important; - color: var(--text-color-secondary) !important; - font-weight: 600 !important; - - &:not(.p-disabled):not(.p-highlight):hover { - border-color: none !important; - color: var(--text-color) !important; - } - - &.p-highlight { - background: var(--surface-0) !important; - border-color: none !important; - font-weight: 600 !important; - border-radius: 0.25rem !important; - color: var(--text-color) !important; - - &:hover { - background: var(--surface-0) !important; - border-color: none !important; - color: $toggleButtonTextActiveHoverColor !important; - color: var(--text-color) !important; - } - } - } -} diff --git a/src/azion-light/extended-components/_sidebar.scss b/src/azion-light/extended-components/_sidebar.scss deleted file mode 100644 index c02af8e..0000000 --- a/src/azion-light/extended-components/_sidebar.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Custom Header Sidebar -.p-sidebar { - .p-sidebar-header { - justify-content: space-between; - font-size: 1.25rem !important; - font-weight: 500 !important; - height: 3.5rem !important; - padding-left: 32px !important; - padding-right: 32px !important; - border-bottom: 1px solid var(--surface-border) !important; - } - - .p-sidebar-content { - padding: 10rem; - } -} - -@media only screen and (max-width: 768px) { - .p-sidebar { - .p-sidebar-header { - padding: 0.75rem !important; - } - .p-sidebar-content { - padding: 0.75rem !important; - } - } -} diff --git a/src/azion-light/extended-components/_tabmenu.scss b/src/azion-light/extended-components/_tabmenu.scss deleted file mode 100644 index c6bc98a..0000000 --- a/src/azion-light/extended-components/_tabmenu.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Custom TabMenu -.p-tabmenu { - .p-tabmenu-nav { - gap: 0.5rem !important; - - .p-tabmenuitem { - .p-menuitem-link { - font-weight: 600 !important; - min-height: 2rem !important; - font-size: 0.875rem !important; - border-radius: $borderRadius !important; - } - &.p-highlight { - .p-menuitem-link { - color: #f4f4f4 !important; - font-weight: 500 !important; - } - } - } - } -} diff --git a/src/azion-light/extended-components/_tabview.scss b/src/azion-light/extended-components/_tabview.scss deleted file mode 100644 index bceff30..0000000 --- a/src/azion-light/extended-components/_tabview.scss +++ /dev/null @@ -1,40 +0,0 @@ -// Custom TabView -.p-tabview { - .p-tabview-nav { - gap: 0.5rem !important; - padding: 0 !important; - - li { - .p-tabview-nav-link { - font-weight: 600 !important; - min-height: 2rem; - font-size: 0.875rem; - border-radius: $borderRadius; - } - &.p-highlight { - .p-tabview-nav-link { - font-weight: 700 !important; - } - } - } - } - .p-tabview-nav-btn.p-link { - background-color: var(--surface-section) !important; - color: $textColor !important; - width: 2rem; - transition: all 150ms; - &:enabled:hover { - background: var(--surface-hover) !important; - color: $buttonBg; - } - } - .p-tabview-panels { - height: 100%; - background: transparent !important; - padding: 0 !important; - - .p-tabview-panel { - height: 100%; - } - } -} diff --git a/src/azion-light/extended-components/_tag.scss b/src/azion-light/extended-components/_tag.scss deleted file mode 100644 index 818ba55..0000000 --- a/src/azion-light/extended-components/_tag.scss +++ /dev/null @@ -1,42 +0,0 @@ -// Custom Tag -@use 'sass:math'; - -.p-tag { - background: #ff6c4729 !important; - color: #ff6c47 !important; - font-size: 0.75rem !important; - font-weight: 500 !important; - letter-spacing: 0.01rem; - padding: $tagPadding; - - &.p-tag-success { - background-color: #16a34a33 !important; - color: #16a34a !important; - } - - &.p-tag-info { - background-color: var(--surface-section) !important; - color: $textColor !important; - box-shadow: 0px 0px 0px 1px var(--surface-border) !important; - } - - &.p-tag-warning { - background-color: #c5970733 !important; - color: #c59707 !important; - } - - &.p-tag-danger { - background-color: #ef404033 !important; - color: #ef4040 !important; - } - - .p-tag-icon { - margin-right: math.div($inlineSpacing, 2); - font-size: $badgeFontSize; - - &.p-icon { - width: $badgeFontSize; - height: $badgeFontSize; - } - } -} diff --git a/src/azion-light/extended-components/_toast.scss b/src/azion-light/extended-components/_toast.scss deleted file mode 100644 index b4dffad..0000000 --- a/src/azion-light/extended-components/_toast.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Custom TabView -.p-toast { - .p-toast-message { - .p-toast-message-content { - background: var(--surface-card) !important; - border-radius: $borderRadius !important; - .p-toast-message-text { - } - - .p-toast-message-icon { - &.p-icon { - } - } - - .p-toast-summary { - } - - .p-toast-detail { - } - } - - .p-toast-icon-close { - border: 1px solid var(--surface-border) !important; - - &:hover { - } - - &:focus-visible { - } - } - - &.p-toast-message-info { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-success { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-warn { - background: var(--surface-section) !important; - - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - - &.p-toast-message-error { - background: var(--surface-section) !important; - .p-toast-message-icon { - } - .p-toast-icon-close { - } - } - } -} diff --git a/src/azion-light/extended-components/_tooltip.scss b/src/azion-light/extended-components/_tooltip.scss deleted file mode 100644 index 269ad32..0000000 --- a/src/azion-light/extended-components/_tooltip.scss +++ /dev/null @@ -1,10 +0,0 @@ -.p-tooltip { - .p-tooltip-text { - box-shadow: - 0 20px 25px -5px rgb(0 0 0 / 0.1), - 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; - background: #2a2a2a !important; - font-size: 0.875rem !important; - padding: 0.375rem 0.5rem !important; - } -} diff --git a/src/azion-light/theme.scss b/src/azion-light/theme.scss deleted file mode 100644 index 6beda50..0000000 --- a/src/azion-light/theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import './variables'; - -.azion-light { - @import './_fonts'; - @import '../primevue-sass-theme/theme-base/components.scss'; - @import './_extensions'; - @import './custom'; -} diff --git a/src/azion-light/variables/_button.scss b/src/azion-light/variables/_button.scss deleted file mode 100644 index 20fa12f..0000000 --- a/src/azion-light/variables/_button.scss +++ /dev/null @@ -1,438 +0,0 @@ -/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group button -$buttonPadding: 0.344rem 0.75rem; - -/// Width of a button having an icon with no label -/// @group button -$buttonIconOnlyWidth: 2.313rem; - -/// Padding of a button having an icon with no label -/// @group button -$buttonIconOnlyPadding: 0.1875rem 0; - -/// Background of a button -/// @group button -$buttonBg: #f3652b; - -/// Text color of a button -/// @group button -$buttonTextColor: $primaryTextColor; - -/// Border of a button -/// @group button -$buttonBorder: 1px solid #f3652b; - -/// Background of a button in hover state -/// @group button -$buttonHoverBg: #f5793f; - -/// Text color of a button in hover state -/// @group button -$buttonTextHoverColor: $primaryTextColor; - -/// Border color of a button in hover state -/// @group button -$buttonHoverBorderColor: #f5793f; - -/// Background of a button in pressed state -/// @group button -$buttonActiveBg: #eb6f3f; - -/// Color of a button in pressed state -/// @group button -$buttonTextActiveColor: $primaryTextColor; - -/// Border color of a button in pressed state -/// @group button -$buttonActiveBorderColor: #eb6f3f; - -/// Shadow of a raised button -/// @group button -$raisedButtonShadow: - 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), - 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - -/// Border radius of a rounded button -/// @group button -$roundedButtonBorderRadius: 2rem; - -/// Alpha level of a text button background in hover state -/// @group button -$textButtonHoverBgOpacity: 0.04; - -/// Alpha level of a text button background in active state -/// @group button -$textButtonActiveBgOpacity: 0.16; - -/// Border style of a outlined button -/// @group button -$outlinedButtonBorder: 1px solid var(--surface-border); - -/// Text color of a plain text button -/// @group button -$plainButtonTextColor: $textColor; - -/// Background color of a plain text button in hover state -/// @group button -$plainButtonHoverBgColor: rgba(30, 30, 30, 0.08); - -/// Background color of a plain text button in active state -/// @group button -$plainButtonActiveBgColor: rgba(30, 30, 30, 0.2); - -/// Background of a secondary button -/// @group button -$secondaryButtonBg: #1e1e1e; - -/// Text color of a secondary button -/// @group button -$secondaryButtonTextColor: #f4f4f4; - -/// Border of a secondary button -/// @group button -$secondaryButtonBorder: 1px solid #1e1e1e; - -/// Background of a secondary button in hover state -/// @group button -$secondaryButtonHoverBg: #404040; - -/// Text color of a secondary button in hover state -/// @group button -$secondaryButtonTextHoverColor: #f4f4f4; - -/// Border color of a secondary button in hover state -/// @group button -$secondaryButtonHoverBorderColor: #323232; - -/// Background of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBg: #303030; - -/// Text color of a secondary button in pressed state -/// @group button -$secondaryButtonTextActiveColor: #ffffff; - -/// Border color of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBorderColor: #303030; - -/// Box shadow of a secondary button in focused state -/// @group button -$secondaryButtonFocusShadow: 0 0 0 0.2rem $focusOutline; - -/// Background of an info button -/// @group button -$infoButtonBg: #0b61c4; - -/// Text color of an info button -/// @group button -$infoButtonTextColor: #ffffff; - -/// Border of an info button -/// @group button -$infoButtonBorder: 1px solid #0b61c4; - -/// Background of an info button in hover state -/// @group button -$infoButtonHoverBg: #0953a6; - -/// Text color of an info button in hover state -/// @group button -$infoButtonTextHoverColor: #ffffff; - -/// Border color of an info button in hover state -/// @group button -$infoButtonHoverBorderColor: #0953a6; - -/// Background of an info button in pressed state -/// @group button -$infoButtonActiveBg: #0953a6; - -/// Text color of an info button in pressed state -/// @group button -$infoButtonTextActiveColor: #ffffff; - -/// Border color of an info button in pressed state -/// @group button -$infoButtonActiveBorderColor: #0953a6; - -/// Box shadow of an info button in focused state -/// @group button -$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%); - -/// Background of a success button -/// @group button -$successButtonBg: #198236; - -/// Text color of a success button -/// @group button -$successButtonTextColor: #ffffff; - -/// Border of a success button -/// @group button -$successButtonBorder: 1px solid #198236; - -/// Background of a success button in hover state -/// @group button -$successButtonHoverBg: #156f2e; - -/// Text color of a success button in hover state -/// @group button -$successButtonTextHoverColor: #ffffff; - -/// Border color of a success button in hover state -/// @group button -$successButtonHoverBorderColor: #156f2e; - -/// Background of a success button in pressed state -/// @group button -$successButtonActiveBg: #156f2e; - -/// Text Color of a success button in pressed state -/// @group button -$successButtonTextActiveColor: #ffffff; - -/// Border color of a success button in pressed state -/// @group button -$successButtonActiveBorderColor: #156f2e; - -/// Box shadow of a success button in focused state -/// @group button -$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%); - -/// Background of a warning button -/// @group button -$warningButtonBg: #e9ae18; - -/// Text color of a warning button -/// @group button -$warningButtonTextColor: $textColor; - -/// Border of a warning button -/// @group button -$warningButtonBorder: 1px solid #e9ae18; - -/// Background of a warning button in hover state -/// @group button -$warningButtonHoverBg: #c79413; - -/// Text color of a warning button in hover state -/// @group button -$warningButtonTextHoverColor: $textColor; - -/// Border color of a warning button in hover state -/// @group button -$warningButtonHoverBorderColor: #c79413; - -/// Background of a warning button in pressed state -/// @group button -$warningButtonActiveBg: #c79413; - -/// Text color of a warning button in pressed state -/// @group button -$warningButtonTextActiveColor: $textColor; - -/// Border color of a warning button in pressed state -/// @group button -$warningButtonActiveBorderColor: #c79413; - -/// Box shadow of a warning button in focused state -/// @group button -$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%); - -/// Background of a help button -/// @group button -$helpButtonBg: #9c27b0; - -/// Text color of a help button -/// @group button -$helpButtonTextColor: #ffffff; - -/// Border of a help button -/// @group button -$helpButtonBorder: 1px solid #9c27b0; - -/// Background of a help help in hover state -/// @group button -$helpButtonHoverBg: #8e24aa; - -/// Text color of a help button in hover state -/// @group button -$helpButtonTextHoverColor: #ffffff; - -/// Border color of a help button in hover state -/// @group button -$helpButtonHoverBorderColor: #0953a6; - -/// Background of a help button in pressed state -/// @group button -$helpButtonActiveBg: #0953a6; - -/// Text color of a help button in pressed state -/// @group button -$helpButtonTextActiveColor: #ffffff; - -/// Border color of a help button in pressed state -/// @group button -$helpButtonActiveBorderColor: #0953a6; - -/// Box shadow of a help button in focused state -/// @group button -$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8; - -/// Background of a danger button -/// @group button -$dangerButtonBg: #c4170b; - -/// Text color of a danger button -/// @group button -$dangerButtonTextColor: #ffffff; - -/// Border of a danger button -/// @group button -$dangerButtonBorder: 1px solid #c4170b; - -/// Background of a danger button in hover state -/// @group button -$dangerButtonHoverBg: #a61409; - -/// Text color of a danger button in hover state -/// @group button -$dangerButtonTextHoverColor: #ffffff; - -/// Border color of a danger button in hover state -/// @group button -$dangerButtonHoverBorderColor: #a61409; - -/// Background of a danger button in pressed state -/// @group button -$dangerButtonActiveBg: #a61409; - -/// Text color of a danger button in pressed state -/// @group button -$dangerButtonTextActiveColor: #ffffff; - -/// Border color of a danger button in pressed state -/// @group button -$dangerButtonActiveBorderColor: #a61409; - -/// Box shadow of a danger button in focused state -/// @group button -$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%); - -/// Text color of a link button -/// @group button -$linkButtonColor: #3265cb; - -/// Text color of a link button in hover state -/// @group button -$linkButtonHoverColor: #2851a4; - -/// Text decoration of a link button in hover state -/// @group button -$linkButtonTextHoverDecoration: underline; - -/// Box shadow of a link button in focused state -/// @group button -$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Background of a toggle button -/// @group button -$toggleButtonBg: #ffffff; - -/// Border of a toggle button -/// @group button -$toggleButtonBorder: 1px solid #ced4da; - -/// Text color of a toggle button -/// @group button -$toggleButtonTextColor: $textColor; - -/// Icon color of a toggle button -/// @group button -$toggleButtonIconColor: $textSecondaryColor; - -/// Background of a toggle button in hover state -/// @group button -$toggleButtonHoverBg: #e9ecef; - -/// Border color of a toggle button in hover state -/// @group button -$toggleButtonHoverBorderColor: #ced4da; - -/// Text color of a toggle button in hover state -/// @group button -$toggleButtonTextHoverColor: $textColor; - -/// Icon color of a toggle button in hover state -/// @group button -$toggleButtonIconHoverColor: $textSecondaryColor; - -/// Background of a toggle button in selected state -/// @group button -$toggleButtonActiveBg: $primaryColor; - -/// Border color of a toggle button in selected state -/// @group button -$toggleButtonActiveBorderColor: $primaryColor; - -/// Text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveColor: $primaryTextColor; - -/// Icon color of a toggle button in selected state -/// @group button -$toggleButtonIconActiveColor: $primaryTextColor; - -/// Hover background of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBg: $primaryDarkColor; - -/// Hover border color of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBorderColor: $primaryDarkColor; - -/// Hover text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveHoverColor: $primaryTextColor; - -/// Hover icon of a toggle button in selected state -/// @group button -$toggleButtonIconActiveHoverColor: $primaryTextColor; - -/// Width of the speed dial button -/// @group button -$speedDialButtonWidth: 4rem; - -/// Height of the speed dial button -/// @group button -$speedDialButtonHeight: 4rem; - -/// Icon size of the speed dial button -/// @group button -$speedDialButtonIconFontSize: 1.3rem; - -/// Width of a speed dial item -/// @group button -$speedDialActionWidth: 3rem; - -/// Height of a speed dial item -/// @group button -$speedDialActionHeight: 3rem; - -/// Background color of a speed dial item -/// @group button -$speedDialActionBg: #ffffff; - -/// Background color of a speed dial item in hover state -/// @group button -$speedDialActionHoverBg: #f5f5f5; - -/// Text color of a speed dial item -/// @group button -$speedDialActionTextColor: #212121; - -/// Text color of a speed dial item in hover state -/// @group button -$speedDialActionTextHoverColor: #212121; diff --git a/src/azion-light/variables/_data.scss b/src/azion-light/variables/_data.scss deleted file mode 100644 index 491deb4..0000000 --- a/src/azion-light/variables/_data.scss +++ /dev/null @@ -1,346 +0,0 @@ -/// Background of a paginator -/// @group data -$paginatorBg: #ffffff; - -/// Text color of a paginator -/// @group data -$paginatorTextColor: $textSecondaryColor; - -/// Border of a paginator -/// @group data -$paginatorBorder: none; - -/// Border width of a paginator -/// @group data -$paginatorBorderWidth: none; - -/// Padding of a paginator -/// @group data -$paginatorPadding: 0.5rem 1rem; - -/// Width of a paginator element -/// @group data -$paginatorElementWidth: $buttonIconOnlyWidth; - -/// Height of a paginator element -/// @group data -$paginatorElementHeight: $buttonIconOnlyWidth; - -/// Background of a paginator element -/// @group data -$paginatorElementBg: transparent; - -/// Border of a paginator element -/// @group data -$paginatorElementBorder: 0 none; - -/// Icon color of a paginator element -/// @group data -$paginatorElementIconColor: $textSecondaryColor; - -/// Background of a paginator element in hover state -/// @group data -$paginatorElementHoverBg: #e9ecef; - -/// Border color of a paginator element in hover state -/// @group data -$paginatorElementHoverBorderColor: transparent; - -/// Icon color of a paginator element in hover state -/// @group data -$paginatorElementIconHoverColor: $textSecondaryColor; - -/// Border radius of a paginator element -/// @group data -$paginatorElementBorderRadius: $borderRadius; - -/// Margin of a paginator element -/// @group data -$paginatorElementMargin: 0.143rem; - -/// Padding of a paginator element -/// @group data -$paginatorElementPadding: 0; - -/// Border of a table header -/// @group data -$tableHeaderBorder: 1px solid var(--surface-border); - -/// Border width of a table header -/// @group data -$tableHeaderBorderWidth: 0 0 1px 0; - -/// Background of a table header -/// @group data -$tableHeaderBg: #ffffff; - -/// Text color of a table header -/// @group data -$tableHeaderTextColor: $textColor; - -/// Font weight of a table header -/// @group data -$tableHeaderFontWeight: 600; - -/// Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderPadding: 0.875rem 0.875rem; - -/// Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderCellPadding: 0.595rem 0.875rem; - -/// Background of a table header cell -/// @group data -$tableHeaderCellBg: #fcfdfd; - -/// Text color of a table header cell -/// @group data -$tableHeaderCellTextColor: $textColor; - -/// Font weight of a table header cell -/// @group data -$tableHeaderCellFontWeight: 500; - -/// Border of a table header cell -/// @group data -$tableHeaderCellBorder: 1px solid var(--surface-border); - -/// Border width of a table header cell -/// @group data -$tableHeaderCellBorderWidth: 0 0 1px 0; - -/// Background of a table header cell in hover state -/// @group data -$tableHeaderCellHoverBg: #e9ecef; - -/// Text color of a table header cell in hover state -/// @group data -$tableHeaderCellTextHoverColor: $textColor; - -/// Icon color of a table header cell -/// @group data -$tableHeaderCellIconColor: $textSecondaryColor; - -/// Icon color of a table header cell in hover state -/// @group data -$tableHeaderCellIconHoverColor: $textSecondaryColor; - -/// Background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightBg: #f8f9fa; - -/// Text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextColor: $primaryColor; - -/// Hover background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightHoverBg: #e9ecef; - -/// Hover text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextHoverColor: $primaryColor; - -/// Size of a multiple column sorting order indicator -/// @group data -$tableSortableColumnBadgeSize: 1.143rem; - -/// Background of a table body row -/// @group data -$tableBodyRowBg: #ffffff; - -/// Text color of a table body row -/// @group data -$tableBodyRowTextColor: $textColor; - -/// Background of an even table body row -/// @group data -$tableBodyRowEvenBg: #ffffff; - -/// Background of a table body row in hover state -/// @group data -$tableBodyRowHoverBg: #f7f7f7; - -/// Text color of a table body row in hover state -/// @group data -$tableBodyRowTextHoverColor: $textColor; - -/// Border for a cell of a table toby row -/// @group data -$tableBodyCellBorder: 1px solid var(--surface-border); - -/// Border width for a cell of a table toby row -/// @group data -$tableBodyCellBorderWidth: 0 0 1px 0; - -/// Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableBodyCellPadding: 0.595rem 0.875rem; - -/// Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterCellPadding: 0.595rem 0.875rem; - -/// Background of a table footer cell -/// @group data -$tableFooterCellBg: #f8f9fa; - -/// Text color of a table footer cell -/// @group data -$tableFooterCellTextColor: $textColor; - -/// Font weight of a table footer cell -/// @group data -$tableFooterCellFontWeight: 600; - -/// Border of a table footer cell -/// @group data - -/// Border of a table footer cell -/// @group data -$tableFooterCellBorder: 1px solid var(--surface-border); - -/// Border width of a table footer cell -/// @group data -$tableFooterCellBorderWidth: 0 0 1px 0; - -/// Backgground of a table column resize indicator bar -/// @group data -$tableResizerHelperBg: $primaryColor; - -/// Border of a table footer -/// @group data -$tableFooterBorder: 1px solid #e9ecef; - -/// Border width of a table footer -/// @group data -$tableFooterBorderWidth: 0 0 1px 0; - -/// Background of a table footer -/// @group data -$tableFooterBg: #f8f9fa; - -/// Text color of a table footer -/// @group data -$tableFooterTextColor: $textColor; - -/// Font weight of a table footer -/// @group data -$tableFooterFontWeight: 600; - -/// Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterPadding: 0.875rem 0.875rem; - -/// Content alignment of a table cell -/// @group data -$tableCellContentAlignment: left; - -/// Border width of a table paginator positioned at top -/// @group data -$tableTopPaginatorBorderWidth: none; - -/// Border width of a table paginator positioned at bottom -/// @group data -$tableBottomPaginatorBorderWidth: none; - -/// Scale factor of a small datatable -/// @group data -$tableScaleSM: 0.5; - -/// Scale factor of a large datatable -/// @group data -$tableScaleLG: 1.25; - -/// Padding for content section of a dataview -/// @group data -$dataViewContentPadding: 0; - -/// Border for content section of a dataview -/// @group data -$dataViewContentBorder: 0 none; - -/// Border for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorder: solid #e9ecef; - -/// Border width for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorderWidth: 0 0 1px 0; - -/// Background of a full calendar event -/// @group data -$fullCalendarEventBg: $primaryDarkColor; - -/// Border color of a full calendar event -/// @group data -$fullCalendarEventBorderColor: $primaryDarkColor; - -/// Border of a full calendar event -/// @group data -$fullCalendarEventBorder: 1px solid $primaryDarkColor; - -/// Text color of a full calendar event -/// @group data -$fullCalendarEventTextColor: $primaryTextColor; - -/// Padding of a tree -/// @group data -$treeContainerPadding: 0.286rem; - -/// Padding of a tree node -/// @group data -$treeNodePadding: 0.143rem; - -/// Padding of a tree node content consists of toggler, icon and label -/// @group data -$treeNodeContentPadding: 0.5rem; - -/// Padding of a tree node children container -/// @group data -$treeNodeChildrenPadding: 0 0 0 1rem; - -/// Color of a treenode data icon, $dataActionIconColor for the toggler element -/// @group data -$treeNodeIconColor: $textSecondaryColor; - -/// Padding of a vertical timeline content element -/// @group data -$timelineVerticalEventContentPadding: 0 1rem; - -/// Padding of a horizontal timeline content element -/// @group data -$timelineHorizontalEventContentPadding: 1rem 0; - -/// Width of a timeline marker -/// @group data -$timelineEventMarkerWidth: 1rem; - -/// Height of a timeline marker -/// @group data -$timelineEventMarkerHeight: 1rem; - -/// Border radius of a timeline marker -/// @group data -$timelineEventMarkerBorderRadius: 50%; - -/// Border of a timeline marker -/// @group data -$timelineEventMarkerBorder: 2px solid $highlightBg; - -/// Background of a timeline marker -/// @group data -$timelineEventMarkerBackground: $highlightTextColor; - -/// Size of a timeline connector -/// @group data -$timelineEventConnectorSize: 2px; - -/// Color of a timeline event -/// @group data -$timelineEventColor: var(--surface-border); - -/// Color of a line to connect to organization chart nodes -/// @group data -$organizationChartConnectorColor: var(--surface-border); diff --git a/src/azion-light/variables/_form.scss b/src/azion-light/variables/_form.scss deleted file mode 100644 index 1c24986..0000000 --- a/src/azion-light/variables/_form.scss +++ /dev/null @@ -1,572 +0,0 @@ -/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group form -$inputPadding: 0.344rem 0.5rem; - -/// Background of an input field -/// @group form -$inputBg: #f4f4f4; - -/// Font size of an input field -/// @group form -$inputTextFontSize: 0.875rem; - -/// Text color of an input field -/// @group form -$inputTextColor: $textColor; - -/// Color of an icon inside an input field -/// @group form -$inputIconColor: $textColor; - -/// Border of an input field -/// @group form -$inputBorder: 1px solid var(--surface-border); - -/// Border of an input field in hover state -/// @group form -$inputHoverBorderColor: #f3652b; - -/// Border of an input field in focus state -/// @group form -$inputFocusBorderColor: #f3652b; - -/// Color of an input field in invalid state -/// @group form -$inputErrorBorderColor: $errorColor; - -/// Text color of a placeholder -/// @group form -$inputPlaceholderTextColor: #979797; - -/// Background of a filled input -/// @group form -$inputFilledBg: #f4f4f4; - -/// Background of a filled input in hover state -/// @group form -$inputFilledHoverBg: #eaeaea; - -/// Background of a filled input in focus state -/// @group form -$inputFilledFocusBg: #f8f9fa; - -/// Backgroud color of an input group addon -/// @group form -$inputGroupBg: #eaeaea; - -/// Text color of an input group addon -/// @group form -$inputGroupTextColor: $textSecondaryColor; - -/// Minimum width of an input group addon -/// @group form -$inputGroupAddOnMinWidth: 2.357rem; - -/// Background of an input list such as dropdown, listbox, multiselect -/// @group form -$inputListBg: #ffffff; - -/// Text color of an input list -/// @group form -$inputListTextColor: $textColor; - -/// Border of an input list -/// @group form -$inputListBorder: $inputBorder; - -/// Padding of an input list -/// @group form -$inputListPadding: 0.5rem; - -/// Padding for an individual itrem of an input list -/// @group form -$inputListItemPadding: 0.75rem 0.5rem; - -/// Background for an individual itrem of an input list -/// @group form -$inputListItemBg: transparent; - -/// Text color for an individual itrem of an input list -/// @group form -$inputListItemTextColor: $textColor; - -/// Hover state background for an individual itrem of an input list -/// @group form -$inputListItemHoverBg: rgba($primaryColor, 0.06); - -/// Hover state text color for an individual itrem of an input list -/// @group form -$inputListItemTextHoverColor: $textColor; - -/// Focus state background for an individual itrem of an input list -/// @group form -$inputListItemFocusBg: rgba($primaryColor, 0.06); - -/// Focus state text color for an individual itrem of an input list -/// @group form -$inputListItemTextFocusColor: $textColor; - -/// Border for an individual itrem of an input list -/// @group form -$inputListItemBorder: 0 none; - -/// Border radius for an individual itrem of an input list -/// @group form -$inputListItemBorderRadius: $borderRadius; - -/// Margin for an individual itrem of an input list -/// @group form -$inputListItemMargin: 0; - -/// Box shadow for an individual itrem of an input list in focused state -/// @group form -$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor; - -/// Padding for a header of an input list -/// @group form -$inputListHeaderPadding: 0.5rem 1rem; - -/// Margin for a header of an input list -/// @group form -$inputListHeaderMargin: 0; - -/// Background for a header of an input list -/// @group form -$inputListHeaderBg: #f8f9fa; - -/// Text color for a header of an input list -/// @group form -$inputListHeaderTextColor: $textColor; - -/// Border for a header of an input list -/// @group form -$inputListHeaderBorder: 0 none; - -/// Background for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBg: $inputListBg; - -/// Background for an overlay header of an input such as autocomplete or dropdown -/// @group form -$inputOverlayHeaderBg: $inputListHeaderBg; - -/// Border for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBorder: 0 none; - -/// Shadow for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayShadow: - 0px 0px 0px 1px #e7e7e7, - 0px 1px 4px 0px rgba(0, 0, 0, 0.04); - -/// Width of a checkbox -/// @group form -$checkboxWidth: 20px; - -/// Height of a checkbox -/// @group form -$checkboxHeight: 20px; - -/// Border of a checkbox -/// @group form -$checkboxBorder: 2px solid var(--surface-border); - -/// Size of a checkbox icon -/// @group form -$checkboxIconFontSize: 14px; - -/// Border color of a selected checkbox -/// @group form -$checkboxActiveBorderColor: $primaryColor; - -/// Background of a selected checkbox -/// @group form -$checkboxActiveBg: $primaryColor; - -/// Icon color of a selected checkbox -/// @group form -$checkboxIconActiveColor: $primaryTextColor; - -/// Background of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected checkbox in hover state -/// @group form -$checkboxIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a radiobutton -/// @group form -$radiobuttonWidth: 20px; - -/// Height of a radiobutton -/// @group form -$radiobuttonHeight: 20px; - -/// Border of a radiobutton -/// @group form -$radiobuttonBorder: 2px solid var(--surface-border); - -/// Font size of a radiobutton icon -/// @group form -$radiobuttonIconSize: 10px; - -/// Border color of a selected radiobutton -/// @group form -$radiobuttonActiveBorderColor: #f3652b; - -/// Background of a selected radiobutton -/// @group form -$radiobuttonActiveBg: #f3652b; - -/// Icon color of a selected radiobutton -/// @group form -$radiobuttonIconActiveColor: $primaryTextColor; - -/// Background of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected radiobutton in hover state -/// @group form -$radiobuttonIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a color picker preview element -/// @group form -$colorPickerPreviewWidth: 2rem; - -/// Height of a color picker preview element -/// @group form -$colorPickerPreviewHeight: 2rem; - -/// Background of a color picker -/// @group form -$colorPickerBg: #323232; - -/// Border color of a color picker -/// @group form -$colorPickerBorder: 1px solid #191919; - -/// Handle color of a color picker -/// @group form -$colorPickerHandleColor: #ffffff; - -/// Font size of a rating icon -/// @group form -$ratingIconFontSize: 1.143rem; - -/// Icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconColor: #e74c3c; - -/// Hover icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconHoverColor: #c0392b; - -/// Icon color for the star icon of a rating in unselected state -/// @group form -$ratingStarIconOffColor: $textColor; - -/// Icon color for the star icon of a rating in selected state -/// @group form -$ratingStarIconOnColor: $primaryColor; - -/// Icon color for the star icon of a rating in hover state -/// @group form -$ratingStarIconHoverColor: $primaryColor; - -/// Background of a slider -/// @group form -$sliderBg: #dee2e6; - -/// Border of a slider -/// @group form -$sliderBorder: 0 none; - -/// Height of a horizontal slider -/// @group form -$sliderHorizontalHeight: 0.286rem; - -/// Width of a vertical slider -/// @group form -$sliderVerticalWidth: 0.286rem; - -/// Width of a slider handle -/// @group form -$sliderHandleWidth: 1.143rem; - -/// Height of a slider handle -/// @group form -$sliderHandleHeight: 1.143rem; - -/// Background of a slider handle -/// @group form -$sliderHandleBg: #ffffff; - -/// Border of a slider handle -/// @group form -$sliderHandleBorder: 2px solid $primaryColor; - -/// Border radius of a slider handle -/// @group form -$sliderHandleBorderRadius: 50%; - -/// Border of a slider handle in hover state -/// @group form -$sliderHandleHoverBorderColor: $primaryColor; - -/// Background of a slider handle in hover state -/// @group form -$sliderHandleHoverBg: $primaryColor; - -/// Background color of a range slider -/// @group form -$sliderRangeBg: $primaryColor; - -/// Margin of a calendar table -/// @group form -$calendarTableMargin: 0.5rem 0; - -/// Margin of a calendar -/// @group form -$calendarPadding: 0.5rem; - -/// Background of a calendar -/// @group form -$calendarBg: #ffffff; - -/// Background of an inlime calendar -/// @group form -$calendarInlineBg: $calendarBg; - -/// Text color of a calendar -/// @group form -$calendarTextColor: $textColor; - -/// Border of an inline calendar -/// @group form -$calendarBorder: $inputListBorder; - -/// Border of an overlay calendar -/// @group form -$calendarOverlayBorder: $inputOverlayBorder; - -/// Padding of a calendar header -/// @group form -$calendarHeaderPadding: 0.5rem; - -/// Background of a calendar header -/// @group form -$calendarHeaderBg: #ffffff; - -/// Background of an inline calendar header -/// @group form -$calendarInlineHeaderBg: $calendarBg; - -/// Border of a calendar header -/// @group form -$calendarHeaderBorder: 1px solid var(--surface-border); - -/// Text color of a calendar header -/// @group form -$calendarHeaderTextColor: $textColor; - -/// Font weight of a calendar header -/// @group form -$calendarHeaderFontWeight: 600; - -/// Padding of a calendar weekday cell -/// @group form -$calendarHeaderCellPadding: 0.5rem; - -/// Text color of current month and year text in hover state -/// @group form -$calendarMonthYearHeaderHoverTextColor: $primaryColor !default; - -/// Padding of a calendar date cell -/// @group form -$calendarCellDatePadding: 0.5rem; - -/// Width of a calendar date cell -/// @group form -$calendarCellDateWidth: 2.5rem; - -/// Height of a calendar date cell -/// @group form -$calendarCellDateHeight: 2.5rem; - -/// Border radius of a calendar date cell -/// @group form -$calendarCellDateBorderRadius: 50%; - -/// Border of a calendar date cell -/// @group form -$calendarCellDateBorder: 1px solid transparent; - -/// Background of a calendar date cell in hover state -/// @group form -$calendarCellDateHoverBg: rgba($primaryColor, 0.06); - -/// Background of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBg: #1e1e1e; - -/// Border color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBorderColor: transparent; - -/// Text color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayTextColor: #f4f4f4; - -/// Padding of the calendar button bar -/// @group form -$calendarButtonBarPadding: 1rem 0; - -/// Padding of a time picker container of a calendar -/// @group form -$calendarTimePickerPadding: 0.5rem; - -/// Padding of a time picker element of a calendar -/// @group form -$calendarTimePickerElementPadding: 0 0.429rem; - -/// Font size of a time picker element of a calendar -/// @group form -$calendarTimePickerTimeFontSize: 1.286rem; - -/// Breakpoint of calendar to apply styles for small screens like phones -/// @group form -$calendarBreakpoint: 769px; - -/// Padding of a calendar date cell on small screens like phones -/// @group form -$calendarCellDatePaddingSM: 0; - -/// Width of an inputswitch -/// @group form -$inputSwitchWidth: 2.25rem; - -/// Height of an inputswitch -/// @group form -$inputSwitchHeight: 1.25rem; - -/// Border radius of an inputswitch -/// @group form -$inputSwitchBorderRadius: 30px; - -/// Width of an inputswitch handle -/// @group form -$inputSwitchHandleWidth: 1rem; - -/// Height of an inputswitch handle -/// @group form -$inputSwitchHandleHeight: 1rem; - -/// Border radius of an inputswitch handle -/// @group form -$inputSwitchHandleBorderRadius: 50%; - -/// Padding of an inputswitch slider -/// @group form -$inputSwitchSliderPadding: 0.063rem; - -/// Background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffBg: #a1a1a1; - -/// Background color of an inputswitch handle when unselected -/// @group form -$inputSwitchHandleOffBg: #ffffff; - -/// Hover background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffHoverBg: #5e5e5e; - -/// Background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnBg: $primaryColor; - -/// Hover background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnHoverBg: $primaryDarkColor; - -/// Background color of an inputswitch handle when selected -/// @group form -$inputSwitchHandleOnBg: #ffffff; - -/// Height for the progress bar of a fileupload -/// @group form -$fileUploadProgressBarHeight: 0.25rem; - -/// Padding of the fileupload content section -/// @group form -$fileUploadContentPadding: 2rem 1rem; - -/// Border of the fileupload content section -$fileUploadContentHoverBorder: 1px dashed $primaryColor !default; - -/// Border of the fileupload content item section -/// @group form -$fileUploadFileBorder: 1px solid #e7e7e7; - -/// Padding of the fileupload content item section -/// @group form -$fileUploadFilePadding: 1rem; - -/// Background of an editor toolbar -/// @group form -$editorToolbarBg: #f8f9fa; - -/// Border of an editor toolbar -/// @group form -$editorToolbarBorder: 1px solid #e7e7e7; - -/// Padding of an editor toolbar -/// @group form -$editorToolbarPadding: 1rem; - -/// Icon color of an editor toolbar -/// @group form -$editorToolbarIconColor: #6c757d; - -/// Icon color of an editor toolbar in hover state -/// @group form -$editorToolbarIconHoverColor: #495057; - -/// Icon color of an editor toolbar in active state -/// @group form -$editorIconActiveColor: $primaryColor; - -/// Border of an editor content -/// @group form -$editorContentBorder: 1px solid #dee2e6; - -/// Background of an editor content -/// @group form -$editorContentBg: #ffffff; - -/// Background of a password meter -/// @group form -$passwordMeterBg: #dee2e6; - -/// Background of a week password -/// @group form -$passwordWeakBg: #e53935; - -/// Background of a medium password -/// @group form -$passwordMediumBg: #ffb300; - -/// Background of a strong password -/// @group form -$passwordStrongBg: #43a047; diff --git a/src/azion-light/variables/_general.scss b/src/azion-light/variables/_general.scss deleted file mode 100644 index 6004af9..0000000 --- a/src/azion-light/variables/_general.scss +++ /dev/null @@ -1,149 +0,0 @@ -/// Font of the theme -/// @group general -$fontFamily: 'Roboto', sans-serif; - -/// Size of the font -/// @group general -$fontSize: 1rem; - -/// Thickness of the texts -/// @group general -$fontWeight: normal; - -/// Primary text color -/// @group general -$textColor: #1c1c1c; - -/// Secondary text color -/// @group general -$textSecondaryColor: #666666; - -/// Background of a highlighted item -/// @group general -$highlightBg: rgba($primaryColor, 0.08); - -/// Text color of a highlighted item -/// @group general -$highlightTextColor: none; - -/// Background of a highlighted item in focus state -/// @group general -$highlightFocusBg: rgba($primaryColor, 0.06); - -/// Radius of the corners -/// @group general -$borderRadius: 6px; - -/// Duration of the property transitions -/// @group general -$transitionDuration: 0.2s; - -/// Properties of a form element transition -/// @group general -$formElementTransition: - background-color $transitionDuration, - color $transitionDuration, - border-color $transitionDuration, - box-shadow $transitionDuration; - -/// Properties of a action icon transition -/// @group general -$actionIconTransition: - background-color $transitionDuration, - color $transitionDuration, - box-shadow $transitionDuration; - -/// Properties of a list item transition -/// @group general -$listItemTransition: - background-color $transitionDuration, - border-color $transitionDuration, - box-shadow $transitionDuration; - -/// Size of the Icons -/// @group general -$primeIconFontSize: 1rem; - -/// Separator border -/// @group general -$divider: 1px solid var(--surface-border); - -/// Space between two inline items -/// @group general -$inlineSpacing: 0.5rem; - -/// Opacity of the disabled elements -/// @group general -$disabledOpacity: 0.4; - -/// Background of the modal layer -/// @group general -$maskBg: #1e1e1e32; - -/// Font size of the loading icons -/// @group general -$loadingIconFontSize: 2rem; - -/// Color to use on an invalid element e.g. invalid input -/// @group general -$errorColor: #ef4040; - -/// Outline color of a focused element -/// @group general -$focusOutlineColor: #f3642b9f; - -/// Outline of a focused element -/// @group general -$focusOutline: 0 none; - -/// Outline offset of a focused element -/// @group general -$focusOutlineOffset: 0; - -/// Box shadow of a focused element -/// @group general -$focusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Width of an action icon -/// @group general -$actionIconWidth: 2rem; - -/// Height of an action icon -/// @group general -$actionIconHeight: 2rem; - -/// Background of an action icon -/// @group general -$actionIconBg: transparent; - -/// Border of an action icon -/// @group general -$actionIconBorder: 1px solid #e7e7e7; - -/// Color of an action icon -/// @group general -$actionIconColor: $textColor; - -/// Backgroun of an action icon in hover state -/// @group general -$actionIconHoverBg: #1e1e1e04; - -/// Border of an action icon in hover state -/// @group general -$actionIconHoverBorderColor: 1px solid #e7e7e7; - -/// Color of an action icon in hover state -/// @group general -$actionIconHoverColor: $textColor; - -/// Border radius of an action icon -/// @group general -$actionIconBorderRadius: 6px; - -/// Scale factor of small component size -/// @group general -$scaleSM: 0.875; - -/// Scale factor of small large size -/// @group general -$scaleLG: 1.25; diff --git a/src/azion-light/variables/_media.scss b/src/azion-light/variables/_media.scss deleted file mode 100644 index 2ef8af7..0000000 --- a/src/azion-light/variables/_media.scss +++ /dev/null @@ -1,231 +0,0 @@ -/// Padding of a carousel indicators container -/// @group media -$carouselIndicatorsPadding: 1rem; - -/// Padding of a carousel indicator -/// @group media -$carouselIndicatorBg: #e9ecef; - -/// Padding of a carousel indicator in hover state -/// @group media -$carouselIndicatorHoverBg: #dee2e6; - -/// Border radius of a carousel indicator -/// @group media -$carouselIndicatorBorderRadius: 0; - -/// Width of a carousel indicator -/// @group media -$carouselIndicatorWidth: 2rem; - -/// Height of a carousel indicator -/// @group media -$carouselIndicatorHeight: 0.5rem; - -/// Background of a galleria modal -/// @group media -$galleriaMaskBg: rgba(0, 0, 0, 0.9); - -/// Margin of a galleria close icon -/// @group media -$galleriaCloseIconMargin: 0.5rem; - -/// Font size of a galleria close icon -/// @group media -$galleriaCloseIconFontSize: 2rem; - -/// Background of a galleria close icon -/// @group media -$galleriaCloseIconBg: transparent; - -/// Color of a galleria close icon -/// @group media -$galleriaCloseIconColor: #ebedef; - -/// Background of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverColor: #ebedef; - -/// Width of a galleria close icon -/// @group media -$galleriaCloseIconWidth: 4rem; - -/// Height of a galleria close icon -/// @group media -$galleriaCloseIconHeight: 4rem; - -/// Border radius of a galleria close icon -/// @group media -$galleriaCloseIconBorderRadius: 50%; - -/// Background of a galleria navigator item -/// @group media -$galleriaItemNavigatorBg: rgba(0, 0, 0, 0.2); - -/// Color of a galleria navigator item -/// @group media -$galleriaItemNavigatorColor: #aeb6bf; - -/// Margin of a galleria navigator item -/// @group media -$galleriaItemNavigatorMargin: 0.5rem 0; - -/// Font size of a galleria navigator item -/// @group media -$galleriaItemNavigatorFontSize: 2rem; - -/// Background of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverBg: rgba(0, 0, 0, 0.3); - -/// Color of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverColor: #ebedef; - -/// Width of a galleria navigator item -/// @group media -$galleriaItemNavigatorWidth: 4rem; - -/// Height of a galleria navigator item -/// @group media -$galleriaItemNavigatorHeight: 4rem; - -/// Border radius of a galleria navigator item -/// @group media -$galleriaItemNavigatorBorderRadius: $borderRadius; - -/// Background of a galleria caption -/// @group media -$galleriaCaptionBg: rgba(0, 0, 0, 0.5); - -/// Color of a galleria caption -/// @group media -$galleriaCaptionTextColor: #ebedef; - -/// Padding of a galleria caption -/// @group media -$galleriaCaptionPadding: 1rem; - -/// Padding of a galleria indicators container -/// @group media -$galleriaIndicatorsPadding: 1rem; - -/// Background of a galleria indicator -/// @group media -$galleriaIndicatorBg: #e9ecef; - -/// Background of a galleria indicator in hover state -/// @group media -$galleriaIndicatorHoverBg: #dee2e6; - -/// Border radius of a galleria indicator -/// @group media -$galleriaIndicatorBorderRadius: 50%; - -/// Width of a galleria indicator -/// @group media -$galleriaIndicatorWidth: 1rem; - -/// Height of a galleria indicator -/// @group media -$galleriaIndicatorHeight: 1rem; - -/// Background of a galleria indicator container when placed inside the viewport -/// @group media -$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5); - -/// Background of a galleria indicator when placed inside the viewport -/// @group media -$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4); - -/// Background of a galleria indicator in hover state when placed inside the viewport -/// @group media -$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6); - -/// Background of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9); - -/// Padding of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerPadding: 1rem 0.25rem; - -/// Background of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorBg: transparent; - -/// Color of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorColor: #aeb6bf; - -/// Background of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverColor: #aeb6bf; - -/// Border radius of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorBorderRadius: 50%; - -/// Width of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorWidth: 2rem; - -/// Height of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHeight: 2rem; - -/// Background of an image preview modal -/// @group media -$imageMaskBg: rgba(0, 0, 0, 0.9) !default; - -/// Padding of image preview toolbar -/// @group media -$imagePreviewToolbarPadding: 1rem !default; - -/// Text color of the image preview indicator -/// @group media -$imagePreviewIndicatorColor: #f8f9fa !default; - -/// Background of the image preview indicator -/// @group media -$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default; - -/// Background of an image action item -/// @group media -$imagePreviewActionIconBg: transparent !default; - -/// Text color of an image action item -/// @group media -$imagePreviewActionIconColor: #f8f9fa !default; - -/// Background of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default; - -/// Tect color of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverColor: #f8f9fa !default; - -/// Width of an image action item -/// @group media -$imagePreviewActionIconWidth: 3rem !default; - -/// Height of an image action item -/// @group media -$imagePreviewActionIconHeight: 3rem !default; - -/// Font size of an image action item icon -/// @group media -$imagePreviewActionIconFontSize: 1.5rem !default; - -/// Border radius of an image action item -/// @group media -$imagePreviewActionIconBorderRadius: 50% !default; diff --git a/src/azion-light/variables/_menu.scss b/src/azion-light/variables/_menu.scss deleted file mode 100644 index 624b016..0000000 --- a/src/azion-light/variables/_menu.scss +++ /dev/null @@ -1,289 +0,0 @@ -/// Background of a steps item -/// @group menu -$stepsItemBg: #ffffff00; - -/// Border of a steps item -/// @group menu -$stepsItemBorder: 1px solid #e7e7e7; - -/// Text color of a steps item -/// @group menu -$stepsItemTextColor: $textSecondaryColor; - -/// Width of a steps itrem number -/// @group menu -$stepsItemNumberWidth: 1.75rem; - -/// Height of a steps itrem number -/// @group menu -$stepsItemNumberHeight: 1.75rem; - -/// Font size of a steps itrem number -/// @group menu -$stepsItemNumberFontSize: 1rem; - -/// Color of a steps itrem number -/// @group menu -$stepsItemNumberColor: $textColor; - -/// Border radius of a steps itrem number -/// @group menu -$stepsItemNumberBorderRadius: $borderRadius; - -/// Font weight of an active steps itrem number -/// @group menu -$stepsItemActiveFontWeight: 600; - -/// Width of a vertical menu such as tieredmenu or context menu -/// @group menu -$menuWidth: 12.5rem; - -/// Background of a menu -/// @group menu -$menuBg: #ffffff; - -/// Border of a menu -/// @group menu -$menuBorder: 1px solid #e7e7e7; - -/// Text color of a menu -/// @group menu -$menuTextColor: $textColor; - -/// Padding of a menuitem -/// @group menu -$menuitemPadding: 0.75rem 0.5rem; - -/// Border radius of a menuitem -/// @group menu -$menuitemBorderRadius: 6px; - -/// Text color of a menuitem -/// @group menu -$menuitemTextColor: $textColor; - -/// Icon color of a menuitem -/// @group menu -$menuitemIconColor: $textColor; - -/// Text color of a menuitem in hover state -/// @group menu -$menuitemTextHoverColor: $textColor; - -/// Icon color of a menuitem in hover state -/// @group menu -$menuitemIconHoverColor: $textColor; - -/// Background of a menuitem in hover state -/// @group menu -$menuitemHoverBg: rgba($primaryColor, 0.06); - -/// Text color of a menuitem in focus state -/// @group menu -$menuitemTextFocusColor: $textColor; - -/// Icon color of a menuitem in focus state -/// @group menu -$menuitemIconFocusColor: $textColor; - -/// Background of a menuitem in focus state -/// @group menu -$menuitemFocusBg: rgba($primaryColor, 0.06); - -/// Text color of a menuitem in active state -/// @group menu -$menuitemTextActiveColor: $textColor; - -/// Icon color of a menuitem in active state -/// @group menu -$menuitemIconActiveColor: $textSecondaryColor; - -/// Background of a menuitem in active state -/// @group menu -$menuitemActiveBg: rgba($primaryColor, 0.08); - -/// Background of a menuitem in active and focus states -/// @group menu -$menuitemActiveFocusBg: rgba($primaryColor, 0.06); - -/// Font size of an icon indicating the item has a submenu -/// @group menu -$menuitemSubmenuIconFontSize: 0.875rem; - -/// Margin of a submenu header -/// @group menu -$submenuHeaderMargin: 0; - -/// Padding of a submenu header -/// @group menu -$submenuHeaderPadding: 0.5rem; - -/// Background of a submenu header -/// @group menu -$submenuHeaderBg: transparent; - -/// Text color of a submenu header -/// @group menu -$submenuHeaderTextColor: $textColor; - -/// Border radius of a submenu header -/// @group menu -$submenuHeaderBorderRadius: 0; - -/// Font weight of a submenu header -/// @group menu -$submenuHeaderFontWeight: 400; - -/// Background of an overlay menu -/// @group menu -$overlayMenuBg: $menuBg; - -/// Border of an overlay menu -/// @group menu -$overlayMenuBorder: 0 none; - -/// Box shadow of an overlay menu -/// @group menu -$overlayMenuShadow: - 0px 1px 4px 0px rgba(0, 0, 0, 0.04), - 0px 0px 0px 1px #e7e7e7; - -/// Padding of a vertical menu e.g. tieredmenu, contextmenu -/// @group menu -$verticalMenuPadding: 0.5rem; - -/// Margin of a menuitem separator -/// @group menu -$menuSeparatorMargin: 0.25rem 0; - -/// Padding of a breadcrumb -/// @group menu -$breadcrumbPadding: 0.25rem; - -/// Background of a breadcrumb -/// @group menu -$breadcrumbBg: none; - -/// Border of a breadcrumb -/// @group menu -$breadcrumbBorder: none; - -/// Text color of a breadcrumb item -/// @group menu -$breadcrumbItemTextColor: var(--text-color-secondary); - -/// Icon color of a breadcrumb item -/// @group menu -$breadcrumbItemIconColor: var(--text-color-secondary); - -/// Text color of the breadcrumb item -/// @group menu -$breadcrumbLastItemTextColor: var(--text-color); - -/// Icon color of the breadcrumb item -/// @group menu -$breadcrumbLastItemIconColor: var(--text-color); - -/// Color of a breadcrumb separator -/// @group menu -$breadcrumbSeparatorColor: var(--text-color-secondary); - -/// Padding of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuPadding: 0.375rem; - -/// Background of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBg: #f8f9fa; - -/// Border of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBorder: $menuBorder; - -/// Text color of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuTextColor: $menuTextColor; - -/// Padding of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemPadding: $menuitemPadding; - -/// Border radius of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemBorderRadius: $borderRadius; - -/// Text color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextColor: $menuitemTextColor; - -/// Icon color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconColor: $menuitemIconColor; - -/// Text color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor; - -/// Icon color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor; - -/// Background of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg; - -/// Text color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor; - -/// Icon color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor; - -/// Background of a horizontal menu root item in active state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg; - -/// Width of an action item on dock -/// @group menu -$dockActionWidth: 4rem; - -/// Height of an action item on dock -/// @group menu -$dockActionHeight: 4rem; - -/// Padding of an action item on dock -/// @group menu -$dockItemPadding: 0.5rem; - -/// Border radius of an action item on dock -/// @group menu -$dockItemBorderRadius: $borderRadius; - -/// Margin of the current action item on dock -/// @group menu -$dockCurrentItemMargin: 1.5rem; - -/// Margin of the previous and next action item on dock -/// @group menu -$dockFirstItemsMargin: 1.3rem; - -/// Margin of the second previous and second next action item on dock -/// @group menu -$dockSecondItemsMargin: 0.9rem; - -/// Background of the list on dock -/// @group menu -$dockBg: rgba(255, 255, 255, 0.1); - -/// Border of the list on dock -/// @group menu -$dockBorder: 1px solid rgba(255, 255, 255, 0.2); - -/// Padding of the list on dock -/// @group menu -$dockPadding: 0.5rem 0.5rem; - -/// Border Radius of the list on dock -/// @group menu -$dockBorderRadius: 0.5rem; diff --git a/src/azion-light/variables/_message.scss b/src/azion-light/variables/_message.scss deleted file mode 100644 index f14874e..0000000 --- a/src/azion-light/variables/_message.scss +++ /dev/null @@ -1,145 +0,0 @@ -/// Margin of a message -/// @group message -$messageMargin: 0; - -/// Padding of a message -/// @group message -$messagePadding: 0.5rem; - -/// Border width of a message -/// @group message -$messageBorderWidth: none; - -/// Font size of a message icon -/// @group message -$messageIconFontSize: 24px; - -/// Font size of a message text -/// @group message -$messageTextFontSize: 1rem; - -/// Font weight of a message text -/// @group message -$messageTextFontWeight: 500; - -/// Padding of an inline message -/// @group message -$inlineMessagePadding: 0.5rem; - -/// Margin of an inline message -/// @group message -$inlineMessageMargin: 0; - -/// Font size of an inline message icon -/// @group message -$inlineMessageIconFontSize: 1rem; - -/// Padding of an inline message text -/// @group message -$inlineMessageTextFontSize: 1rem; - -/// Border width of an inline message text -/// @group message -$inlineMessageBorderWidth: none; - -/// Font size of a toast message icon -/// @group message -$toastIconFontSize: 32px; - -/// Margin of a toast message text -/// @group message -$toastMessageTextMargin: 0 0 0 1rem; - -/// Margin of a toast message -/// @group message -$toastMargin: 0 0 1rem 0; - -/// Padding of a toast message -/// @group message -$toastPadding: 1rem; - -/// Border width of a toast message -/// @group message -$toastBorderWidth: none; - -/// Box shadow of a toast message -/// @group message -$toastShadow: - 0px 1px 4px 0px rgba(0, 0, 0, 0.08), - 0px 0px 0px 1px #e7e7e7; - -/// Opacity of a toast message -/// @group message -$toastOpacity: 1; - -/// Font weight of a toast message title text -/// @group message -$toastTitleFontWeight: 700; - -/// Margin of a toast message detail text -/// @group message -$toastDetailMargin: $inlineSpacing 0 0 0; - -/// Background of an info message -/// @group message -$infoMessageBg: #a6a6a61f; - -/// Border of an info message -/// @group message -$infoMessageBorder: none; - -/// Text color of an info message -/// @group message -$infoMessageTextColor: $textColor; - -/// Icon color of an info message -/// @group message -$infoMessageIconColor: $textColor; - -/// Background of a success message -/// @group message -$successMessageBg: #1982361f; - -/// Border of a success message -/// @group message -$successMessageBorder: none; - -/// Text color of a success message -/// @group message -$successMessageTextColor: $textColor; - -/// Icon color of a success message -/// @group message -$successMessageIconColor: #198236; - -/// Background of a warning message -/// @group message -$warningMessageBg: #ffb64d1f; - -/// Border of a warning message -/// @group message -$warningMessageBorder: none; - -/// Text color of a warning message -/// @group message -$warningMessageTextColor: $textColor; - -/// Icon color of a warning message -/// @group message -$warningMessageIconColor: #ffb64d; - -/// Background of an error message -/// @group message -$errorMessageBg: #ef40401f; - -/// Border of an error message -/// @group message -$errorMessageBorder: none; - -/// Text color of an error message -/// @group message -$errorMessageTextColor: $textColor; - -/// Icon color of an error message -/// @group message -$errorMessageIconColor: #ef4040; diff --git a/src/azion-light/variables/_misc.scss b/src/azion-light/variables/_misc.scss deleted file mode 100644 index ea6450f..0000000 --- a/src/azion-light/variables/_misc.scss +++ /dev/null @@ -1,143 +0,0 @@ -/// Padding of an inplace element -/// @group misc -$inplacePadding: $inputPadding; - -/// Background of an inplace element in hover state -/// @group misc -$inplaceHoverBg: #e9ecef; - -/// Text color of an inplace element in hover state -/// @group misc -$inplaceTextHoverColor: $textColor; - -/// Background of a badge -/// @group misc -$badgeBg: var(--surface-section); - -/// Text color of a badge -/// @group misc -$badgeTextColor: $textColor; - -/// Minimum width of a badge -/// @group misc -$badgeMinWidth: 1.5rem; - -/// Height of a badge -/// @group misc -$badgeHeight: 1.25rem; - -/// Font weight of a badge -/// @group misc -$badgeFontWeight: 500; - -/// Font size of a badge -/// @group misc -$badgeFontSize: 0.75rem; - -/// Padding of a badge -/// @group misc -$tagPadding: 0.25rem 0.4rem; - -/// Height of a progress bar -/// @group misc -$progressBarHeight: 1.5rem; - -/// Border of a progress bar -/// @group misc -$progressBarBorder: 0 none; - -/// Background of a progress bar -/// @group misc -$progressBarBg: var(--surface-600); - -/// Background of a progress bar value -/// @group misc -$progressBarValueBg: #f3652b; - -/// Text color of a progress bar value -/// @group misc -$progressBarValueTextColor: $primaryTextColor; - -/// Stroke color of a progress spinner -/// @group misc -$progressSpinnerStrokeColor: $errorMessageTextColor !default; - -/// First spinner color of a progress spinner -/// @group misc -$progressSpinnerColorOne: $errorMessageTextColor !default; - -/// Second spinner color of a progress spinner -/// @group misc -$progressSpinnerColorTwo: $infoMessageTextColor !default; - -/// Third spinner color of a progress spinner -/// @group misc -$progressSpinnerColorThree: $successMessageTextColor !default; - -/// Fourth spinner color of a progress spinner -/// @group misc -$progressSpinnerColorFour: $warningMessageTextColor !default; - -/// Background of an avatar -/// @group misc -$avatarBg: #e7e7e7; - -/// Text color of an avatar -/// @group misc -$avatarTextColor: $textColor; - -/// Background of a chip -/// @group misc -$chipBg: #dedede; - -/// Text color of a chip -/// @group misc -$chipTextColor: $textColor; - -/// Border radius of a chip -/// @group misc -$chipBorderRadius: $borderRadius; - -/// Background of a chip in focus state -/// @group misc -$chipFocusBg: #dee2e6 !default; - -/// Color of a chip in focus state -/// @group misc -$chipFocusTextColor: $textColor !default; - -/// Background of a scrollTop -/// @group misc -$scrollTopBg: rgba(0, 0, 0, 0.7); - -/// Background of a scrollTop in hover state -/// @group misc -$scrollTopHoverBg: rgba(0, 0, 0, 0.8); - -/// Width of a scrollTop -/// @group misc -$scrollTopWidth: 3rem; - -/// Height of a scrollTop -/// @group misc -$scrollTopHeight: 3rem; - -/// Border radius of a scrollTop -/// @group misc -$scrollTopBorderRadius: 50%; - -/// Font size of a scrollTop -/// @group misc -$scrollTopFontSize: 1.5rem; - -/// Text color of a scrollTop -/// @group misc -$scrollTopTextColor: #f8f9fa; - -/// Background of a skeleton -/// @group misc -$skeletonBg: #eaeaea; - -/// Background of a skeleton animation -/// @group misc -$skeletonAnimationBg: #d6d6d6; diff --git a/src/azion-light/variables/_overlay.scss b/src/azion-light/variables/_overlay.scss deleted file mode 100644 index 86b7f94..0000000 --- a/src/azion-light/variables/_overlay.scss +++ /dev/null @@ -1,69 +0,0 @@ -/// Border of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBorder: 0 none; - -/// Background of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBg: $panelContentBg; - -/// Box shadow of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContainerShadow: - 0px 0px 0px 1px #e7e7e7, - 0px 5px 10px 0px rgba(0, 0, 0, 0.05); - -/// Background of a dialog header -/// @group overlay -$dialogHeaderBg: #ffffff; - -/// Border of a dialog header -/// @group overlay -$dialogHeaderBorder: 1px solid var(--surface-border); - -/// Text color of a dialog header -/// @group overlay -$dialogHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of a dialog header -/// @group overlay -$dialogHeaderFontWeight: 500; - -/// Font size of a dialog header -/// @group overlay -$dialogHeaderFontSize: 1.125rem; - -/// Padding of a dialog header -/// @group overlay -$dialogHeaderPadding: 0 2rem; - -/// Padding of a dialog content -/// @group overlay -$dialogContentPadding: 1.25rem 2rem; - -/// Border of a dialog footer -/// @group overlay -$dialogFooterBorder: 1px solid var(--surface-border); - -/// Padding of a dialog footer -/// @group overlay -$dialogFooterPadding: 0 2rem; - -/// Padding of a confirmpopup content -/// @group overlay -$confirmPopupContentPadding: $panelContentPadding; - -/// Padding of a confirmpopup footer -/// @group overlay -$confirmPopupFooterPadding: 0 1rem 1rem 1rem; - -/// Background of a tooltip -/// @group overlay -$tooltipBg: $textColor; - -/// Text color of a tooltip -/// @group overlay -$tooltipTextColor: #ffffff; - -/// Padding of a tooltip -/// @group overlay -$tooltipPadding: $inputPadding; diff --git a/src/azion-light/variables/_panel.scss b/src/azion-light/variables/_panel.scss deleted file mode 100644 index ef82325..0000000 --- a/src/azion-light/variables/_panel.scss +++ /dev/null @@ -1,327 +0,0 @@ -/// Border color of a panel header -/// @group panel -$panelHeaderBorderColor: var(--surface-border); - -/// Border of a panel header -/// @group panel -$panelHeaderBorder: 1px solid var(--surface-border); - -/// Background of a panel header -/// @group panel -$panelHeaderBg: var(--surface-section); - -/// Text color of a panel header -/// @group panel -$panelHeaderTextColor: $textColor; - -/// Font weight of a panel header -/// @group panel -$panelHeaderFontWeight: 500; - -/// Padding of a panel header -/// @group panel -$panelHeaderPadding: 1rem; - -/// Font weight of a toggleable panel header -/// @group panel -$panelToggleableHeaderPadding: 0.5rem 1rem; - -/// Background of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderHoverBg: var(--surface-hover); - -/// Border color of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderHoverBorderColor: var(--surface-border); - -/// Text color of a panel header in hover state e.g. toggleable state -/// @group panel -$panelHeaderTextHoverColor: $textColor; - -/// Border color for the content section of a panel -/// @group panel -$panelContentBorderColor: var(--surface-border); - -/// Border for the content section of a panel -/// @group panel -$panelContentBorder: 1px solid var(--surface-border); - -/// Background for the content section of a panel -/// @group panel -$panelContentBg: #ffffff; - -/// Background for the striped row. -/// @group panel -$panelContentEvenRowBg: #e9ecef; - -/// Text color for the content section of a panel -/// @group panel -$panelContentTextColor: $textColor; - -/// Padding for the content section of a panel -/// @group panel -$panelContentPadding: 1.25rem; - -/// Border for the footer section of a panel -/// @group panel -$panelFooterBorder: 1px solid var(--surface-border); - -/// Background for the footer section of a panel -/// @group panel -$panelFooterBg: var(--surface-section); - -/// Text color for the footer section of a panel -/// @group panel -$panelFooterTextColor: $textColor; - -/// Padding for the footer section of a panel -/// @group panel -$panelFooterPadding: 0.5rem 1rem; - -/// Spacing between to accordion panels -/// @group panel -$accordionSpacing: 0; - -/// Border of an accordion panel header -/// @group panel -$accordionHeaderBorder: $panelHeaderBorder; - -/// Background of an accordion panel header -/// @group panel -$accordionHeaderBg: $panelHeaderBg; - -/// Text color of an accordion panel header -/// @group panel -$accordionHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of an accordion panel header -/// @group panel -$accordionHeaderFontWeight: $panelHeaderFontWeight; - -/// Padding of an accordion panel header -/// @group panel -$accordionHeaderPadding: $panelHeaderPadding; - -/// Background of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBg: var(--surface-hover); - -/// Border of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in hover state -/// @group panel -$accordionHeaderTextHoverColor: $textColor; - -/// Background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBg: $panelHeaderBg; - -/// Border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveColor: $textColor; - -/// Hover background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBg: var(--surface-hover); - -/// Hover border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBorderColor: var(--surface-border); - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveHoverColor: $textColor; - -/// Border for a content section of an accordion panel -/// @group panel -$accordionContentBorder: $panelContentBorder; - -/// Background for a content section of an accordion panel -/// @group panel -$accordionContentBg: $panelContentBg; - -/// Text color for a content section of an accordion panel -/// @group panel -$accordionContentTextColor: $panelContentTextColor; - -/// Padding for a content section of an accordion panel -/// @group panel -$accordionContentPadding: $panelContentPadding; - -/// Border for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorder: none; - -/// Border width for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorderWidth: none; - -/// Background for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBg: none; - -/// Spacing between tabview headers -/// @group panel -$tabviewHeaderSpacing: 0; - -/// Border of a tabview header -/// @group panel -$tabviewHeaderBorder: none; - -/// Border width of a tabview header -/// @group panel -$tabviewHeaderBorderWidth: none; - -/// Border color of a tabview header -/// @group panel -$tabviewHeaderBorderColor: none; - -/// Background of a tabview header -/// @group panel -$tabviewHeaderBg: none; - -/// Text color of a tabview header -/// @group panel -$tabviewHeaderTextColor: $textSecondaryColor; - -/// Font weight of a tabview header -/// @group panel -$tabviewHeaderFontWeight: 600; - -/// Padding of a tabview header -/// @group panel -$tabviewHeaderPadding: 0.375px 0.75rem; - -/// Margin of a tabview header -/// @group panel -$tabviewHeaderMargin: 0; - -/// Background of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBg: var(--surface-hover); - -/// Border of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBorderColor: none; - -/// Text color of a tabview header in hover state -/// @group panel -$tabviewHeaderTextHoverColor: $textColor; - -/// Background of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBg: $primaryColor; - -/// Border of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBorderColor: $primaryColor; - -/// Text color of a tabview header in selected state -/// @group panel -$tabviewHeaderTextActiveColor: $primaryTextColor; - -/// Border for content section of a tabview tab -/// @group panel -$tabviewContentBorder: 0 none; - -/// Background for content section of a tabview tab -/// @group panel -$tabviewContentBg: $panelContentBg; - -/// Text color for a content section of a tabview tab -/// @group panel -$tabviewContentTextColor: $panelContentTextColor; - -/// Padding for a content section of a tabview tab -/// @group panel -$tabviewContentPadding: $panelContentPadding; - -/// Background of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBg: #e9ecef; - -/// Border of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBorderColor: #dee2e6; - -/// Text color of a fieldset header in hover state -/// @group panel -$panelHeaderTextHoverColor: $textColor; - -/// Border for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBorder: 0 none; - -/// Background for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBg: #f8f9fa; - -/// Padding of a card body -/// @group panel -$cardBodyPadding: none; - -/// Font size of a card title -/// @group panel -$cardTitleFontSize: 1.5rem; - -/// Font weight of a card title -/// @group panel -$cardTitleFontWeight: 700; - -/// Font size of a card subtitle -/// @group panel -$cardSubTitleFontWeight: 700; - -/// Text color of a card subtitle -/// @group panel -$cardSubTitleColor: $textSecondaryColor; - -/// Padding of a card content -/// @group panel -$cardContentPadding: none; - -/// Padding of a card footer -/// @group panel -$cardFooterPadding: 0 0 0 0; - -/// Box shadow of a card -/// @group panel -$cardShadow: 0px 0px 0px 1px #e7e7e7; - -/// Margin of divider in horizontal layout -/// @group panel -$dividerHorizontalMargin: 0; - -/// Padding of divider in horizontal layout -/// @group panel -$dividerHorizontalPadding: 0; - -/// Margin of divider in vertical layout -/// @group panel -$dividerVerticalMargin: 0; - -/// Padding of divider in vertical layout -/// @group panel -$dividerVerticalPadding: 0; - -/// Border width of the divider -/// @group panel -$dividerSize: 1px; - -/// Color of the divider border -/// @group panel -$dividerColor: var(--surface-border); - -/// Background of the splitter gutter -/// @group panel -$splitterGutterBg: #f8f9fa; - -/// Background of the splitter gutter handle -/// @group panel -$splitterGutterHandleBg: #e7e7e7; diff --git a/src/primevue-sass-theme/.gitignore b/src/primevue-sass-theme/.gitignore deleted file mode 100644 index 6221984..0000000 --- a/src/primevue-sass-theme/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -theme.css -.DS_STORE -node_modules -.vscode \ No newline at end of file diff --git a/src/primevue-sass-theme/CHANGELOG.md b/src/primevue-sass-theme/CHANGELOG.md deleted file mode 100644 index 6efea15..0000000 --- a/src/primevue-sass-theme/CHANGELOG.md +++ /dev/null @@ -1,172 +0,0 @@ -# Changelog - -## [3.40.1](https://github.com/primefaces/primevue-sass-theme/tree/3.40.1) (2023-11-09) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.40.1 - -## [3.40.0](https://github.com/primefaces/primevue-sass-theme/tree/3.40.0) (2023-11-09) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.39.0...3.40.0) - -**Implemented New Features and Enhancements:** - -- Lara Theme updates -- DataTable and Button component style improvements - -## [3.39.0](https://github.com/primefaces/primevue-sass-theme/tree/3.39.0) (2023-11-01) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.38.1...3.39.0) - -**Fixed bugs:** - -- ConfirmPopup: arrow defect [#29](https://github.com/primefaces/primevue-sass-theme/issues/29) - -**Implemented New Features and Enhancements:** - -- Improve Striped Row colors in Lara [#30](https://github.com/primefaces/primevue-sass-theme/issues/30) - - -## [3.38.1](https://github.com/primefaces/primevue-sass-theme/tree/3.38.1) (2023-10-26) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.38.1 - -## [3.38.0](https://github.com/primefaces/primevue-sass-theme/tree/3.38.0) (2023-10-26) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.37.0...3.38.0) - -**Implemented New Features and Enhancements:** - -- Lara Theme updates - -## [3.37.0](https://github.com/primefaces/primevue-sass-theme/tree/3.37.0) (2023-10-18) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.36.0...3.37.0) - -**Implemented New Features and Enhancements:** - -- Lara Theme updates - -## [3.36.0](https://github.com/primefaces/primevue-sass-theme/tree/3.36.0) (2023-10-11) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.35.0...3.36.0) - -**Fixed bugs:** - -- Editor layer defect [#26](https://github.com/primefaces/primevue-sass-theme/issues/26) - -**Deprecation** - -- Remove FullCalendar theme support [#25](https://github.com/primefaces/primevue-sass-theme/issues/25) - -## [3.35.0](https://github.com/primefaces/primevue-sass-theme/tree/3.35.0) (2023-09-26) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.34.1...3.35.0) - -**Implemented New Features and Enhancements:** - -- New `@layer` implementation [\#24](https://github.com/primefaces/primevue-sass-theme/issues/24) -- focus-visible updates [\#23](https://github.com/primefaces/primevue-sass-theme/issues/23) -- Use Inter Var instead of System Font for Lara [\#22](https://github.com/primefaces/primevue-sass-theme/issues/22) -- Calendar: focus state update [\#21](https://github.com/primefaces/primevue-sass-theme/issues/21) - -## [3.34.1](https://github.com/primefaces/primevue-sass-theme/tree/3.34.1) (2023-09-08) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.34.0 - -## [3.34.0](https://github.com/primefaces/primevue-sass-theme/tree/3.34.0) (2023-09-05) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.34.0 - -## [3.33.0](https://github.com/primefaces/primevue-sass-theme/tree/3.33.0) (2023-09-01) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.33.0 - -## [3.32.2](https://github.com/primefaces/primevue-sass-theme/tree/3.32.2) (2023-08-23) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.32.2 - -## [3.32.1](https://github.com/primefaces/primevue-sass-theme/tree/3.32.1) (2023-08-18) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.32.0...3.32.1) - -**Fixed bugs:** - -- https://github.com/primefaces/primevue-sass-theme/issues/17 [#17](https://github.com/primefaces/primevue-sass-theme/issues/17) - -## [3.32.0](https://github.com/primefaces/primevue-sass-theme/tree/3.32.0) (2023-08-11) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.31.0...3.32.0) - -**Fixed bugs:** - -- SplitButton: menu icon not visible in large size [#12](https://github.com/primefaces/primevue-sass-theme/issues/12) - -## [3.31.0](https://github.com/primefaces/primevue-sass-theme/tree/3.31.0) (2023-07-25) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.30.2...3.31.0) - -**Fixed bugs:** - -- Bootstrap: remove unused Breadcrumb extensions [\#16](https://github.com/primefaces/primevue-sass-theme/issues/16) - -## [3.30.2](https://github.com/primefaces/primevue-sass-theme/tree/3.30.2) (2023-07-20) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.30.2 - -## [3.30.1](https://github.com/primefaces/primevue-sass-theme/tree/3.30.1) (2023-07-14) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.30.1 - -## [3.30.0](https://github.com/primefaces/primevue-sass-theme/tree/3.30.0) (2023-07-11) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.30.0 - -## [3.29.2](https://github.com/primefaces/primevue-sass-theme/tree/3.29.2) (2023-07-11) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.29.2 - -## [3.29.1](https://github.com/primefaces/primevue-sass-theme/tree/3.29.1) (2023-05-15) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.29.1 - -## [3.29.0](https://github.com/primefaces/primevue-sass-theme/tree/3.29.0) (2023-05-11) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.29.0 - -## [3.28.0](https://github.com/primefaces/primevue-sass-theme/tree/3.28.0) (2023-05-02) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.27.0...3.28.0) - -**Fixed bugs:** - -- Calendar: Material theme icon color defect [\#10](https://github.com/primefaces/primevue-sass-theme/issues/10) -- Message: wrong close icon size [\#9](https://github.com/primefaces/primevue-sass-theme/issues/9) - -## [3.27.0](https://github.com/primefaces/primevue-sass-theme/tree/3.27.0) (2023-04-19) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.26.1...3.27.0) - -**Implemented New Features and Enhancements:** - -- SVG: icon width & height fixes [\#7](https://github.com/primefaces/primevue-sass-theme/issues/7) -- Panel: content and footer border defects [\#5](https://github.com/primefaces/primevue-sass-theme/issues/5) - -## [3.26.1](https://github.com/primefaces/primevue-sass-theme/tree/3.26.1) (2023-03-27) - -[Full Changelog](https://github.com/primefaces/primevue-sass-theme/compare/3.26.0...3.26.1) - -**Fixed bugs:** - -- Missing styles from PrimeVue v3.24.0 [\#3](https://github.com/primefaces/primevue-sass-theme/issues/3) - -## [3.26.0](https://github.com/primefaces/primevue-sass-theme/tree/3.26.0) (2023-03-21) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.26.0 - -## [3.25.0](https://github.com/primefaces/primevue-sass-theme/tree/3.25.0) (2023-03-13) - -- No changes, provides semantic versioning compatibility for PrimeVue 3.25.0 - -## [3.24.0](https://github.com/primefaces/primevue-sass-theme/tree/3.24.0) (2023-03-13) - -- Initial release diff --git a/src/primevue-sass-theme/LICENSE.md b/src/primevue-sass-theme/LICENSE.md deleted file mode 100644 index e9890f8..0000000 --- a/src/primevue-sass-theme/LICENSE.md +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2018-2023 PrimeTek - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file diff --git a/src/primevue-sass-theme/README.md b/src/primevue-sass-theme/README.md deleted file mode 100644 index efb780e..0000000 --- a/src/primevue-sass-theme/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# PrimeVue Theming with SASS - -Visit the [official documentation](https://primevue.org/theming/#customtheme) for more information. diff --git a/src/primevue-sass-theme/package.json b/src/primevue-sass-theme/package.json deleted file mode 100644 index 9fd3ec9..0000000 --- a/src/primevue-sass-theme/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "primevue-sass-theme", - "version": "3.40.0", - "description": "PrimeVue Sass Theme", - "homepage": "https://primevue.org/", - "repository": { - "type": "git", - "url": "git+https://github.com/primefaces/primevue-sass-theme.git" - }, - "keywords": [ - "primevue", - "vue", - "vue.js", - "vue2", - "vue3", - "ui library", - "component library", - "material", - "bootstrap", - "fluent", - "tailwind", - "unstyled", - "passthrough" - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/primefaces/primevue-sass-theme/issues" - } -} \ No newline at end of file diff --git a/src/primevue-sass-theme/theme-base/_colors.scss b/src/primevue-sass-theme/theme-base/_colors.scss deleted file mode 100644 index de70590..0000000 --- a/src/primevue-sass-theme/theme-base/_colors.scss +++ /dev/null @@ -1,18 +0,0 @@ -:root { - @if variable-exists(colors) { - @each $name, $color in $colors { - @for $i from 0 through 5 { - @if ($i == 0) { - --#{$name}-50:#{tint($color, (5 - $i) * 19%)}; - } - @else { - --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)}; - } - } - - @for $i from 1 through 4 { - --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)}; - } - } - } -} \ No newline at end of file diff --git a/src/primevue-sass-theme/theme-base/_common.scss b/src/primevue-sass-theme/theme-base/_common.scss deleted file mode 100644 index 7723961..0000000 --- a/src/primevue-sass-theme/theme-base/_common.scss +++ /dev/null @@ -1,75 +0,0 @@ -* { - box-sizing: border-box; -} - -.p-component { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); - font-size: $fontSize; - font-weight: $fontWeight; -} - -.p-component-overlay { - background-color: $maskBg; - transition-duration: $transitionDuration; -} - -.p-disabled, .p-component:disabled { - opacity: $disabledOpacity; -} - -.p-error { - color: $errorColor; -} - -.p-text-secondary { - color: $textSecondaryColor; -} - -.pi { - font-size: $primeIconFontSize; -} - -.p-icon { - width: $primeIconFontSize; - height: $primeIconFontSize; -} - -.p-link { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); - font-size: $fontSize; - border-radius: $borderRadius; - - &:focus-visible { - @include focused(); - } -} - -.p-component-overlay-enter { - animation: p-component-overlay-enter-animation 150ms forwards; -} - -.p-component-overlay-leave { - animation: p-component-overlay-leave-animation 150ms forwards; -} - -.p-component-overlay { - @keyframes p-component-overlay-enter-animation { - from { - background-color: transparent; - } - to { - background-color: var(--maskbg); - } - } - - @keyframes p-component-overlay-leave-animation { - from { - background-color: var(--maskbg); - } - to { - background-color: transparent; - } - } -} diff --git a/src/primevue-sass-theme/theme-base/_components.scss b/src/primevue-sass-theme/theme-base/_components.scss deleted file mode 100644 index cc76ab9..0000000 --- a/src/primevue-sass-theme/theme-base/_components.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import '_mixins'; -@import '_colors'; - -@import './components/input/_editor'; - -@layer primevue { - @import '_common'; - - //Input - @import './components/input/_autocomplete'; - @import './components/input/_calendar'; - @import './components/input/_cascadeselect'; - @import './components/input/_checkbox'; - @import './components/input/_chips'; - @import './components/input/_colorpicker'; - @import './components/input/_dropdown'; - @import './components/input/_inputgroup'; - @import './components/input/_inputnumber'; - @import './components/input/_inputswitch'; - @import './components/input/_inputtext'; - @import './components/input/_listbox'; - @import './components/input/_multiselect'; - @import './components/input/_password'; - @import './components/input/_radiobutton'; - @import './components/input/_rating'; - @import './components/input/_selectbutton'; - @import './components/input/_slider'; - @import './components/input/_treeselect'; - @import './components/input/_togglebutton'; - - //Button - @import './components/button/_button'; - @import './components/button/_speeddial'; - @import './components/button/_splitbutton'; - - //Data - @import './components/data/_carousel'; - @import './components/data/_datatable'; - @import './components/data/_dataview'; - @import './components/data/_filter'; - @import './components/data/_orderlist'; - @import './components/data/_organizationchart'; - @import './components/data/_paginator'; - @import './components/data/_picklist'; - @import './components/data/_timeline'; - @import './components/data/_tree'; - @import './components/data/_treetable'; - - //Panel - @import './components/panel/_accordion'; - @import './components/panel/_card'; - @import './components/panel/_fieldset'; - @import './components/panel/_divider'; - @import './components/panel/_panel'; - @import './components/panel/_scrollpanel'; - @import './components/panel/_splitter'; - @import './components/panel/_tabview'; - @import './components/panel/_toolbar'; - - //Overlay - @import './components/overlay/_confirmpopup'; - @import './components/overlay/_dialog'; - @import './components/overlay/_overlaypanel'; - @import './components/overlay/_sidebar'; - @import './components/overlay/_tooltip'; - - //File - @import './components/file/_fileupload'; - - //Menu - @import './components/menu/_breadcrumb'; - @import './components/menu/_contextmenu'; - @import './components/menu/_dock'; - @import './components/menu/_megamenu'; - @import './components/menu/_menu'; - @import './components/menu/_menubar'; - @import './components/menu/_panelmenu'; - @import './components/menu/_steps'; - @import './components/menu/_tabmenu'; - @import './components/menu/_tieredmenu'; - - //Messages - @import './components/messages/_inlinemessage'; - @import './components/messages/_message'; - @import 'components/messages/toast'; - - //MultiMedia - @import './components/multimedia/_galleria'; - @import './components/multimedia/_image'; - - //Misc - @import './components/misc/_avatar'; - @import './components/misc/_badge'; - @import './components/misc/_blockui'; - @import './components/misc/_chip'; - @import './components/misc/_inplace'; - @import './components/misc/_progressbar'; - @import './components/misc/_progressspinner'; - @import './components/misc/_scrolltop'; - @import './components/misc/_skeleton'; - @import './components/misc/_tag'; - @import './components/misc/_terminal'; -} \ No newline at end of file diff --git a/src/primevue-sass-theme/theme-base/_mixins.scss b/src/primevue-sass-theme/theme-base/_mixins.scss deleted file mode 100644 index d09daa8..0000000 --- a/src/primevue-sass-theme/theme-base/_mixins.scss +++ /dev/null @@ -1,250 +0,0 @@ -@mixin icon-override($icon) { - &:before { - content: $icon; - } -} - -@mixin focused() { - outline: $focusOutline; - outline-offset: $focusOutlineOffset; - box-shadow: $focusShadow; -} - -@mixin focused-inset() { - outline: $focusOutline; - outline-offset: $focusOutlineOffset; - box-shadow: inset $focusShadow; -} - -@mixin focused-input() { - @include focused(); - border-color: $inputFocusBorderColor; -} - -@mixin focused-listitem() { - outline: $focusOutline; - outline-offset: $focusOutlineOffset; - box-shadow: $inputListItemFocusShadow; -} - -@mixin invalid-input() { - border-color: $inputErrorBorderColor; -} - -@mixin menuitem { - > .p-menuitem-content { - color: $menuitemTextColor; - transition: $listItemTransition; - border-radius: $menuitemBorderRadius; - - .p-menuitem-link { - color: $menuitemTextColor; - padding: $menuitemPadding; - user-select: none; - - .p-menuitem-text { - color: $menuitemTextColor; - } - - .p-menuitem-icon { - color: $menuitemIconColor; - margin-right: $inlineSpacing; - } - - .p-submenu-icon { - color: $menuitemIconColor; - } - } - } - - &.p-highlight { - > .p-menuitem-content { - color: $menuitemTextActiveColor; - background: $menuitemActiveBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextActiveColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconActiveColor; - } - } - } - - &.p-focus { - > .p-menuitem-content { - background: $menuitemActiveFocusBg; - } - } - } - - &:not(.p-highlight):not(.p-disabled) { - &.p-focus { - > .p-menuitem-content { - color: $menuitemTextFocusColor; - background: $menuitemFocusBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextFocusColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconFocusColor; - } - } - } - } - - > .p-menuitem-content { - &:hover { - color: $menuitemTextHoverColor; - background: $menuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconHoverColor; - } - } - } - } - } -} - -@mixin horizontal-rootmenuitem { - > .p-menuitem-content { - color: $horizontalMenuRootMenuitemTextColor; - transition: $listItemTransition; - border-radius: $horizontalMenuRootMenuitemBorderRadius; - - .p-menuitem-link { - padding: $horizontalMenuRootMenuitemPadding; - user-select: none; - - .p-menuitem-text { - color: $horizontalMenuRootMenuitemTextColor; - } - - .p-menuitem-icon { - color: $horizontalMenuRootMenuitemIconColor; - margin-right: $inlineSpacing; - } - - .p-submenu-icon { - color: $horizontalMenuRootMenuitemIconColor; - margin-left: $inlineSpacing; - } - } - } - - &:not(.p-highlight):not(.p-disabled) { - > .p-menuitem-content { - &:hover { - color: $horizontalMenuRootMenuitemTextHoverColor; - background: $horizontalMenuRootMenuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $horizontalMenuRootMenuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $horizontalMenuRootMenuitemIconHoverColor; - } - } - } - } - } -} - -@mixin placeholder { - ::-webkit-input-placeholder { - @content - } - :-moz-placeholder { - @content - } - ::-moz-placeholder { - @content - } - :-ms-input-placeholder { - @content - } -} - -@mixin scaledPadding($val, $scale) { - padding: nth($val, 1) * $scale nth($val, 2) * $scale; -} - -@mixin scaledFontSize($val, $scale) { - font-size: $val * $scale; -} - -@mixin nested-submenu-indents($val, $index, $length) { - .p-submenu-list { - .p-menuitem { - .p-menuitem-content { - .p-menuitem-link { - padding-left: $val * ($index + 1); - } - - } - @if $index < $length { - @include nested-submenu-indents($val, $index + 2, $length); - } - } - } -} - -@mixin action-icon($enabled: true) { - width: $actionIconWidth; - height: $actionIconHeight; - color: $actionIconColor; - border: $actionIconBorder; - background: $actionIconBg; - border-radius: $actionIconBorderRadius; - transition: $actionIconTransition; - - @if $enabled { - &:enabled:hover { - @include action-icon-hover(); - } - } @else { - &:hover { - @include action-icon-hover(); - } - } - - &:focus-visible { - @include focused(); - } -} - -@mixin action-icon-hover() { - color: $actionIconHoverColor; - border-color: $actionIconHoverBorderColor; - background: $actionIconHoverBg; -} - -@mixin button-states { - //