diff --git a/default.js b/default.js new file mode 100644 index 0000000..7e86e3c --- /dev/null +++ b/default.js @@ -0,0 +1 @@ +import './src/azion/theme.scss'; diff --git a/package.json b/package.json index db47ec1..a5ff6c6 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ ], "exports": { "./dark": "./dark.js", - "./light": "./light.js" + "./light": "./light.js", + ".": "./default.js" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/src/azion/_custom.scss b/src/azion/_custom.scss new file mode 100644 index 0000000..5ea336f --- /dev/null +++ b/src/azion/_custom.scss @@ -0,0 +1 @@ +@import './custom/selection' diff --git a/src/azion/_extensions.scss b/src/azion/_extensions.scss new file mode 100644 index 0000000..487b5e9 --- /dev/null +++ b/src/azion/_extensions.scss @@ -0,0 +1,30 @@ +/* Customizations to the designer theme should be defined here */ +@layer primevue { + @import './extended-components/button'; + @import './extended-components/selectbutton'; + @import './extended-components/tabview'; + @import './extended-components/tabmenu'; + @import './extended-components/divider'; + @import './extended-components/dropdownitem'; + @import './extended-components/inlinemessage'; + @import './extended-components/breadcumb'; + @import './extended-components/sidebar'; + @import './extended-components/tooltip'; + @import './extended-components/datatable'; + @import './extended-components/inputpassword'; + @import './extended-components/toast'; + @import './extended-components/inputswitch'; + @import './extended-components/radiobutton'; + @import './extended-components/checkbox'; + @import './extended-components/tag'; + @import './extended-components/markdown'; + @import './extended-components/listbox'; + @import './extended-components/inputnumber'; + @import './extended-components/calendar'; + @import './extended-components/badge'; + @import './extended-components/menuitem'; + @import './extended-components/progressbar'; + @import './extended-components/dialog'; + @import './extended-components/multiselect'; + +} diff --git a/src/azion/_fonts.scss b/src/azion/_fonts.scss new file mode 100644 index 0000000..7a1d748 --- /dev/null +++ b/src/azion/_fonts.scss @@ -0,0 +1,156 @@ +// 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/_variables.scss b/src/azion/_variables.scss new file mode 100644 index 0000000..f67e9b2 --- /dev/null +++ b/src/azion/_variables.scss @@ -0,0 +1,369 @@ +// Theme Specific Variables + +$pc: #f4f4f4; +$pdc: hsla(0, 0%, 96%, 0.5); +$pderc: #f4f4f4; +$ptc: #f4f4f4; +$highlightBg: rgba($pc, 0.06); +$overlayContentBg: #171717; + +:root.azion-light { + $pc: #2b2b2b; + $pdc: #000; + $pderc: #000; + $ptc: #f4f4f4; + $highlightBg: rgba($pc, 0.06); + $overlayContentBg: #ffffff; +} + +$primaryColor: $pc; +$primaryDarkColor: $pdc; +$primaryDarkerColor: $pderc; +$primaryTextColor: $ptc; + +$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 { + --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; + + --font-family: "Roboto", sans-serif; +} + +:root.azion.azion-dark { + color-scheme: dark; + --text-color: #ededed; + --text-color-secondary: #b5b5b5; + --text-color-link: #93c5fd; + --text-color-link-hover: #93c5fd; + + --primary-color: #f4f4f4; + --primary-color-text: #1e1e1e; + --primary-dark-color: hsla(0, 0%, 96%, 0.5); + --primary-darker-color: #f4f4f4; + --primary-text-color: #f4f4f4; + + --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; + + --surface-ground: #171717; + --surface-section: #171717; + --surface-card: #171717; + --surface-overlay: #ffffff; + --surface-border: #282828; + --surface-hover: #f5f5f516; + + --content-padding: #{$panelContentPadding}; + --inline-spacing: #{$inlineSpacing}; + --border-radius: #{$borderRadius}; + --focus-ring: #{$focusShadow}; + + --maskbg: #{$maskBg}; + --highlight-bg: rgba(var(--primary-color), 0.06); + --highlight-text-color: #{$highlightTextColor}; + --highlight-focus-bg: rgba(var(--primary-color), 0.08); + --disabled-opacity: 0.5; + --error-color: #f26464; + --mask-bg: #1c1c1c80; + --bg-selection: #fab99e; + --table-bg-color: #1c1c1c; + --tab-menu-link: #f4f4f4; + --paginator-bg: #1c1c1c; + --paginator-border: #282828; + --paginator-element-hover-bg: hsla(0, 0%, 100%, 0.03); + --table-header-font-weight: 500; + --table-cell-font-weight: 600; + --table-header-cell-hover-bg: #ffffff0d; + --table-header-cell-bg: #1c1c1c; + --table-header-cell-highlight-bg: #1c1c1c; + --table-cell-highlight-hover-bg: rgba(var(--primary-color), 0.16); + --table-body-row-even-bg: #212121; + --table-body-row-hover-bg: #353535; + --table-footer-cell-bg: #1c1c1c; + --table-footer-border: var(--surface-border); + --table-footer-border-width: none; + --table-footer-bg: #1c1c1c; + --plain-button-active-bg-color: #222222; + --secondary-button-bg: #ffffff; + --secondary-button-text-color: #222222; + --secondary-button-border: #f4f4f4; + --secondary-button-hover-bg: #e1e1e1; + --secondary-button-text-hover-color: #e1e1e1; + --secondary-button-hover-border-color: #e1e1e1; + --secondary-button-active-bg: #d9d9d9; + --secondary-button-active-border-color: #d9d9d9; + --secondary-button-text-hover-color: #1e1e1e; + --secondary-button-hover-border-color: #e1e1e1; + --secondary-button-text-active-color: #1e1e1e; + --secondary-button-active-border-color: #d9d9d9; + --warning-button-text-color: #1e1e1e; + --help-button-hover-border-color: #8e24aa; + --help-button-active: #7b1fa2; + --toggle-button-bg: #1e1e1e; + --toggle-button-border: #3e3e3e; + --toggle-button-hover-bg: #282828; + --input-bg: #292929; + --input-placeholder-text-color: #666; + --input-filled-bg: #181818; + --input-filled-hover-bg: #2b2b2b; + --input-filled-focus-bg: #181818; + --input-group-bg: #1c1c1c; + --input-list-bg: #171717; + --input-list-header-bg: #1c1c1c; + --input-overlay-shadow: 0px 0px 0px 1px #3b3b3b, + 0px 5px 10px 0px rgba(0, 0, 0, 0.05); + --checkbox-border: #666666; + --calendar-bg: #292929; + --calendar-cell-date-today-bg: #f4f4f4; + --calendar-cell-date-today-text-color: #1e1e1e; + --input-switch-slider-off-bg: #a1a1a1; + --input-switch-slider-off-hover-bg: #5e5e5e; + --input-switch-handle-on-bg: #ffffff; + --file-upload-file-border: 1px solid #e7e7e7; + --editor-toolbar-border: 1px solid #e7e7e7; + --action-icon-border: #3e3e3e; + --action-icon-color: $textSecondaryColor; + --action-icon-hover-bg: #282828; + --action-icon-hover-border-color: 1px solid #3e3e3e; + --panel-content-bg: #171717; + --panel-header-hover-border-color: #171717; + --panel-header-text-hover-color: rgba(var(--primary-color), 0.04); + --card-shadow: 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; + --splitter-gutter-handle-bg: #3e3e3e; + --overlay-container-shadow: 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); + --dialog-header-bg: #1c1c1c; + --tooltip-text-color: #1c1c1c; + --badge-font-weight: 400; + --tag-padding: 0.25rem 0.5rem; + --progress-bar-value-bg: #($primaryColor); + --progress-spinner-stroke-color: var(--surface-600); + --avatar-bg: #363636; + --chip-bg: #404040; + --chip-focus-bg: #363636; + --skeleton-bg: #3131316d; + --skeleton-animation-bg: #31313199; + --toast-shadow: #3e3e3e; + --success-message-bg: #39e4781f; + --success-message-icon-color: #39e478; + --error-message--bg: #f2646433; + --error-message-icon-color: #f26464; + --steps-item-bg: #00000000; + --steps-item-border: 1px solid #3e3e3e; + --menu-bg: #1c1c1c; + --menu-border: 1px solid #3e3e3e; + --submenu-header-font-weight: 500; + --overlay-menu-shadow: 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; + --horizontal-menu-bg: #1c1c1c; +} + +:root.azion.azion-light { + color-scheme: light; + --text-color: #1c1c1c; + --text-color-secondary: #666666; + --text-color-link: #3265cb; + --text-color-link-hover: #2851a4; + + --primary-color: #1e1e1e; + --primary-color-text: #f4f4f4; + + --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; + + --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; + + --surface-ground: #ffffff; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e8e8e8; + --surface-hover: #3b3b3b16; + + --maskbg: #{$maskBg}; + --highlight-bg: rgba(var(--primary-color), 0.06); + --highlight-text-color: #{$highlightTextColor}; + --highlight-focus-bg: rgba(var(--primary-color), 0.08); + --disabled-opacity: 0.4; + --mask-bg: #1e1e1e32; + --error-color: #ef4040; + --bg-selection: #f7966e; + --table-bg-color: #e7e7e7; + --tab-menu-link: #1c1c1c; + --paginator-bg: #ffffff; + --paginator-border: none; + --paginator-element-hover-bg: #e9ecef; + --table-header-cell-hover-bg: #e9ecef; + --table-cell-highlight-hover-bg: #e9ecef; + --table-header-font-weight: 600; + --table-cell-font-weight: 500; + --table-header-cell-bg: #fcfdfd; + --table-header-cell-highlight-bg: #f8f9fa; + --table-body-row-even-bg: #ffffff; + --table-body-row-hover-bg: #f7f7f7; + --table-footer-border: #e9ecef; + --table-footer-border-width: 0 0 1px 0; + --table-footer-bg: #f8f9fa; + --plain-button-active-bg-color: #1e1e1e33; + --secondary-button-bg: #1e1e1e; + --secondary-button-text-color: #f4f4f4; + --secondary-button-text-hover-bg: #404040; + --secondary-button-text-hover-color: #f4f4f4; + --secondary-button-hover-border-color: #323232; + --secondary-button-active-bg: #303030; + --secondary-button-text-active-color: #ffffff; + --secondary-button-active-border-color: #303030; + --warning-button-text-color: #1c1c1c; + --help-button-hover-border-color: #0953a6; + --help-button-active: #0953a6; + --toggle-button-bg: #ffffff; + --toggle-button-border: #ced4da; + --toggle-button-hover-bg: #e9ecef; + --input-bg: #f4f4f4; + --input-placeholder-text-color: #979797; + --input-filled-bg: #f4f4f4; + --input-filled-hover-bg: #eaeaea; + --input-filled-focus-bg: #f8f9fa; + --input-group-bg: #eaeaea; + --input-list-bg: #ffffff; + --input-list-header-bg: #f8f9fa; + --input-overlay-shadow: 0px 0px 0px 1px #e7e7e7, + 0px 1px 4px 0px rgba(0, 0, 0, 0.04); + --checkbox-border: var(--surface-border); + --calendar-bg: #ffffff; + --calendar-cell-date-today-bg: #1e1e1e; + --calendar-cell-date-today-text-color: #f4f4f4; + --input-switch-slider-off-bg: #ced4da; + --input-switch-slider-off-hover-bg: #c3cad2; + --input-switch-handle-on-bg: #1e1e1e; + --file-upload-file-border: 1px solid #c3cad2; + --editor-toolbar-border: 1px solid #dee2e6; + --action-icon-border: #e7e7e7; + --action-icon-color: $textColor; + --action-icon-hover-bg: #1e1e1e04; + --action-icon-hover-border-color: 1px solid #e7e7e7; + --panel-content-bg: #ffffff; + --panel-header-hover-border-color: #dee2e6; + --panel-header-text-hover-color: var(--text-color); + --card-shadow: 0px 0px 0px 1px #e7e7e7; + --splitter-gutter-handle-bg: #e7e7e7; + --overlay-container-shadow: 0px 0px 0px 1px #e7e7e7, + 0px 5px 10px 0px rgba(0, 0, 0, 0.05); + --dialog-header-bg: #ffffff; + --tooltip-text-color: #ffffff; + --badge-font-weight: 500; + --tag-padding: 0.25rem 0.4rem; + --progress-bar-value-bg: #f3652b; + --progress-spinner-stroke-color: $errorMessageTextColor; + --avatar-bg: #e7e7e7; + --chip-bg: #dedede; + --chip-focus-bg: #dee2e6; + --skeleton-bg: #eaeaea; + --skeleton-animation-bg: #d6d6d6; + --toast-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px #e7e7e7; + --success-message-bg: #1982361f; + --success-message-icon-color: #198236; + --error-message--bg: #ef40401f; + --error-message-icon-color: #ef4040; + --steps-item-bg: #ffffff00; + --steps-item-border: 1px solid #e7e7e7; + --menu-bg: #ffffff; + --menu-border: 1px solid #e7e7e7; + --submenu-header-font-weight: 400; + --overlay-menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), + 0px 0px 0px 1px #e7e7e7; + --horizontal-menu-bg: #f8f9fa; +} diff --git a/src/azion/custom/_focus.scss b/src/azion/custom/_focus.scss new file mode 100644 index 0000000..a1a9edb --- /dev/null +++ b/src/azion/custom/_focus.scss @@ -0,0 +1,5 @@ +a { + &:focus-visible { + @include focused(); + } +} diff --git a/src/azion/custom/_scrollbehavior.scss b/src/azion/custom/_scrollbehavior.scss new file mode 100644 index 0000000..cb7579e --- /dev/null +++ b/src/azion/custom/_scrollbehavior.scss @@ -0,0 +1,6 @@ +/** + * Enable smooth scrolling on the whole document + */ + html { + scroll-behavior: smooth; +} \ No newline at end of file diff --git a/src/azion/custom/_selection.scss b/src/azion/custom/_selection.scss new file mode 100644 index 0000000..f6c452d --- /dev/null +++ b/src/azion/custom/_selection.scss @@ -0,0 +1,4 @@ +::selection { + color: var(--primary-color-text); + background-color: var(--bg-selection); +} diff --git a/src/azion/extended-components/_badge.scss b/src/azion/extended-components/_badge.scss new file mode 100644 index 0000000..5ed58aa --- /dev/null +++ b/src/azion/extended-components/_badge.scss @@ -0,0 +1,53 @@ +// 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/extended-components/_breadcumb.scss b/src/azion/extended-components/_breadcumb.scss new file mode 100644 index 0000000..d5e7ecd --- /dev/null +++ b/src/azion/extended-components/_breadcumb.scss @@ -0,0 +1,18 @@ +// 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/extended-components/_button.scss b/src/azion/extended-components/_button.scss new file mode 100644 index 0000000..89d9e18 --- /dev/null +++ b/src/azion/extended-components/_button.scss @@ -0,0 +1,131 @@ +//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/extended-components/_calendar.scss b/src/azion/extended-components/_calendar.scss new file mode 100644 index 0000000..7eeffb6 --- /dev/null +++ b/src/azion/extended-components/_calendar.scss @@ -0,0 +1,42 @@ +.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/extended-components/_checkbox.scss b/src/azion/extended-components/_checkbox.scss new file mode 100644 index 0000000..864ee8b --- /dev/null +++ b/src/azion/extended-components/_checkbox.scss @@ -0,0 +1,67 @@ +// 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/extended-components/_datatable.scss b/src/azion/extended-components/_datatable.scss new file mode 100644 index 0000000..183b747 --- /dev/null +++ b/src/azion/extended-components/_datatable.scss @@ -0,0 +1,92 @@ +.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 > 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-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/extended-components/_dialog.scss b/src/azion/extended-components/_dialog.scss new file mode 100644 index 0000000..8416437 --- /dev/null +++ b/src/azion/extended-components/_dialog.scss @@ -0,0 +1,45 @@ +// 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/extended-components/_divider.scss b/src/azion/extended-components/_divider.scss new file mode 100644 index 0000000..b789de2 --- /dev/null +++ b/src/azion/extended-components/_divider.scss @@ -0,0 +1,31 @@ +.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/extended-components/_dropdownitem.scss b/src/azion/extended-components/_dropdownitem.scss new file mode 100644 index 0000000..ed60aa1 --- /dev/null +++ b/src/azion/extended-components/_dropdownitem.scss @@ -0,0 +1,12 @@ +// 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/extended-components/_inlinemessage.scss b/src/azion/extended-components/_inlinemessage.scss new file mode 100644 index 0000000..074a54c --- /dev/null +++ b/src/azion/extended-components/_inlinemessage.scss @@ -0,0 +1,10 @@ +// 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/extended-components/_inputnumber.scss b/src/azion/extended-components/_inputnumber.scss new file mode 100644 index 0000000..dbb5ca2 --- /dev/null +++ b/src/azion/extended-components/_inputnumber.scss @@ -0,0 +1,40 @@ +.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/extended-components/_inputpassword.scss b/src/azion/extended-components/_inputpassword.scss new file mode 100644 index 0000000..49a0aa1 --- /dev/null +++ b/src/azion/extended-components/_inputpassword.scss @@ -0,0 +1,4 @@ +// Custom input password +.p-password-input { + width: 100% !important; +} diff --git a/src/azion/extended-components/_inputswitch.scss b/src/azion/extended-components/_inputswitch.scss new file mode 100644 index 0000000..71ed850 --- /dev/null +++ b/src/azion/extended-components/_inputswitch.scss @@ -0,0 +1,53 @@ +// 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/extended-components/_listbox.scss b/src/azion/extended-components/_listbox.scss new file mode 100644 index 0000000..ddf7d51 --- /dev/null +++ b/src/azion/extended-components/_listbox.scss @@ -0,0 +1,25 @@ +.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/extended-components/_markdown.scss b/src/azion/extended-components/_markdown.scss new file mode 100644 index 0000000..fd0d61a --- /dev/null +++ b/src/azion/extended-components/_markdown.scss @@ -0,0 +1,123 @@ +.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: var(--table-bg-color); + } + + *:is(tr > th) { + background: var(--table-bg-color); + } + + *:is(tr > th) { + font-size: .875rem; + text-wrap: nowrap; + color: var(--text-color); + font-weight: 600; + text-align: left; + padding: 1rem !important; + background: var(--table-bg-color); + } + + *: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/extended-components/_menuitem.scss b/src/azion/extended-components/_menuitem.scss new file mode 100644 index 0000000..83c4eae --- /dev/null +++ b/src/azion/extended-components/_menuitem.scss @@ -0,0 +1,22 @@ +// 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/extended-components/_multiselect.scss b/src/azion/extended-components/_multiselect.scss new file mode 100644 index 0000000..2c9d992 --- /dev/null +++ b/src/azion/extended-components/_multiselect.scss @@ -0,0 +1,170 @@ +@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/extended-components/_overlaypanel.scss b/src/azion/extended-components/_overlaypanel.scss new file mode 100644 index 0000000..3aae124 --- /dev/null +++ b/src/azion/extended-components/_overlaypanel.scss @@ -0,0 +1,18 @@ +.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/extended-components/_picklist.scss b/src/azion/extended-components/_picklist.scss new file mode 100644 index 0000000..987e8c7 --- /dev/null +++ b/src/azion/extended-components/_picklist.scss @@ -0,0 +1,25 @@ +// 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/extended-components/_progressbar.scss b/src/azion/extended-components/_progressbar.scss new file mode 100644 index 0000000..d019ada --- /dev/null +++ b/src/azion/extended-components/_progressbar.scss @@ -0,0 +1,6 @@ +.p-progressbar { + border-radius: none !important; + .p-progressbar-value { + background: #f3652b !important; + } +} diff --git a/src/azion/extended-components/_radiobutton.scss b/src/azion/extended-components/_radiobutton.scss new file mode 100644 index 0000000..9f5a2ac --- /dev/null +++ b/src/azion/extended-components/_radiobutton.scss @@ -0,0 +1,63 @@ +// 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/extended-components/_selectbutton.scss b/src/azion/extended-components/_selectbutton.scss new file mode 100644 index 0000000..1174847 --- /dev/null +++ b/src/azion/extended-components/_selectbutton.scss @@ -0,0 +1,36 @@ +// 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/extended-components/_sidebar.scss b/src/azion/extended-components/_sidebar.scss new file mode 100644 index 0000000..fedbd7b --- /dev/null +++ b/src/azion/extended-components/_sidebar.scss @@ -0,0 +1,27 @@ +// 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/extended-components/_tabmenu.scss b/src/azion/extended-components/_tabmenu.scss new file mode 100644 index 0000000..09c2b9d --- /dev/null +++ b/src/azion/extended-components/_tabmenu.scss @@ -0,0 +1,21 @@ +// 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: var(--tab-menu-link) !important; + font-weight: 500 !important; + } + } + } + } +} diff --git a/src/azion/extended-components/_tabview.scss b/src/azion/extended-components/_tabview.scss new file mode 100644 index 0000000..4f3dba7 --- /dev/null +++ b/src/azion/extended-components/_tabview.scss @@ -0,0 +1,41 @@ +// 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/extended-components/_tag.scss b/src/azion/extended-components/_tag.scss new file mode 100644 index 0000000..c76c8a1 --- /dev/null +++ b/src/azion/extended-components/_tag.scss @@ -0,0 +1,42 @@ +// 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/extended-components/_toast.scss b/src/azion/extended-components/_toast.scss new file mode 100644 index 0000000..b4dffad --- /dev/null +++ b/src/azion/extended-components/_toast.scss @@ -0,0 +1,67 @@ +// 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/extended-components/_tooltip.scss b/src/azion/extended-components/_tooltip.scss new file mode 100644 index 0000000..6a53035 --- /dev/null +++ b/src/azion/extended-components/_tooltip.scss @@ -0,0 +1,7 @@ +.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/theme.scss b/src/azion/theme.scss new file mode 100644 index 0000000..ab48c3c --- /dev/null +++ b/src/azion/theme.scss @@ -0,0 +1,10 @@ +@import './variables'; + +.azion { + @import './_fonts'; + @import '../primevue-sass-theme/theme-base/components.scss'; + @import './_extensions'; + @import './custom'; + + transition: background-color 0.5s ease, color 0.5s ease; +} diff --git a/src/azion/variables/_button.scss b/src/azion/variables/_button.scss new file mode 100644 index 0000000..9a1805f --- /dev/null +++ b/src/azion/variables/_button.scss @@ -0,0 +1,438 @@ +/// 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: var(--plain-button-active-bg-color); + +/// Background of a secondary button +/// @group button +$secondaryButtonBg: var(--secondary-button-bg); + +/// Text color of a secondary button +/// @group button +$secondaryButtonTextColor: var(--secondary-button-text-color); + +/// Border of a secondary button +/// @group button +$secondaryButtonBorder: 1px solid var(--secondary-button-bg); + +/// Background of a secondary button in hover state +/// @group button +$secondaryButtonHoverBg: var(--secondary-button-text-hover-bg); + +/// Text color of a secondary button in hover state +/// @group button +$secondaryButtonTextHoverColor: var(--secondary-button-text-hover-color); + +/// Border color of a secondary button in hover state +/// @group button +$secondaryButtonHoverBorderColor: var(--secondary-button-hover-border-color); + +/// Background of a secondary button in pressed state +/// @group button +$secondaryButtonActiveBg: var(--secondary-button-active-bg); + +/// Text color of a secondary button in pressed state +/// @group button +$secondaryButtonTextActiveColor: var(--secondary-button-text-active-color); + +/// Border color of a secondary button in pressed state +/// @group button +$secondaryButtonActiveBorderColor: var(--secondary-button-active-border-color); + +/// 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: var(--warning-button-text-color); + +/// 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: var(--warning-button-text-color); + +/// 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: var(--warning-button-text-color); + +/// 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: var(--help-button-hover-border-color); + +/// Background of a help button in pressed state +/// @group button +$helpButtonActiveBg: var(--help-button-active); + +/// 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: var(--help-button-active); + +/// 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: var(--text-color-link); + +/// Text color of a link button in hover state +/// @group button +$linkButtonHoverColor: var(--text-color-link-hover); + +/// 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: var(--toggle-button-bg); + +/// Border of a toggle button +/// @group button +$toggleButtonBorder: 1px solid var(--toggle-button-border); + +/// 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: var(--toggle-button-hover-bg); + +/// Border color of a toggle button in hover state +/// @group button +$toggleButtonHoverBorderColor: var(--toggle-button-border); + +/// 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/variables/_data.scss b/src/azion/variables/_data.scss new file mode 100644 index 0000000..265e5de --- /dev/null +++ b/src/azion/variables/_data.scss @@ -0,0 +1,346 @@ +/// Background of a paginator +/// @group data +$paginatorBg: var(--paginator-bg); + +/// Text color of a paginator +/// @group data +$paginatorTextColor: $textSecondaryColor; + +/// Border of a paginator +/// @group data +$paginatorBorder: solid var(--paginator-border); + +/// 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: var(--paginator-element-hover-bg); + +/// 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: var(--paginator-bg); + +/// Text color of a table header +/// @group data +$tableHeaderTextColor: $textColor; + +/// Font weight of a table header +/// @group data +$tableHeaderFontWeight: var(--table-header-font-weight); + +/// 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: var(--table-header-cell-bg); + +/// Text color of a table header cell +/// @group data +$tableHeaderCellTextColor: $textColor; + +/// Font weight of a table header cell +/// @group data +$tableHeaderCellFontWeight: var(--table-cell-font-weight); + +/// 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: var(--table-header-cell-hover-bg); + +/// 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: var(--table-header-cell-highlight-bg); + +/// 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: var(--table-cell-highlight-hover-bg); + +/// 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: var(--surface-ground); + +/// 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: var(--table-header-cell-highlight-bg); + +/// 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 var(--table-footer-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/variables/_form.scss b/src/azion/variables/_form.scss new file mode 100644 index 0000000..666047c --- /dev/null +++ b/src/azion/variables/_form.scss @@ -0,0 +1,570 @@ +/// 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: var(--input-bg); + +/// 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: var(--input-placeholder-text-color); + +/// Background of a filled input +/// @group form +$inputFilledBg: var(--input-filled-bg); + +/// Background of a filled input in hover state +/// @group form +$inputFilledHoverBg: var(--input-filled-hover-bg); + +/// Background of a filled input in focus state +/// @group form +$inputFilledFocusBg: var(--input-filled-focus-bg); + +/// Backgroud color of an input group addon +/// @group form +$inputGroupBg: var(--input-group-bg); + +/// 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: var(--input-list-bg); + +/// 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: var(--input-list-header-bg); + +/// 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: var(--input-overlay-shadow); + +/// 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(--checkbox-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: var(--calendar-bg); + +/// 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: var(--calendar-bg); + +/// 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: var(--calendar-cell-date-today-bg); + +/// 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: var(--calendar-cell-date-today-text-color); + +/// 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: var(--input-switch-slider-off-bg); + +/// Background color of an inputswitch handle when unselected +/// @group form +$inputSwitchHandleOffBg: #ffffff; + +/// Hover background color of an inputswitch slider when unselected +/// @group form +$inputSwitchSliderOffHoverBg: var(--input-switch-slider-off-hover-bg); + +/// 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: var(--input-switch-handle-on-bg); + +/// 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 var(--file-upload-file-border); + +/// 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 var(--editor-toolbar-border); + +/// 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/variables/_general.scss b/src/azion/variables/_general.scss new file mode 100644 index 0000000..509d2a4 --- /dev/null +++ b/src/azion/variables/_general.scss @@ -0,0 +1,149 @@ +/// 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: var(--text-color); + +/// Secondary text color +/// @group general +$textSecondaryColor: var(--text-color-secondary); + +/// Background of a highlighted item +/// @group general +$highlightBg: $highlightBg; + +/// Text color of a highlighted item +/// @group general +$highlightTextColor: none; + +/// Background of a highlighted item in focus state +/// @group general +$highlightFocusBg: var(--highlight-focus-bg); + +/// 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: var(--disabled-opacity); + +/// Background of the modal layer +/// @group general +$maskBg: var(--mask-bg); + +/// Font size of the loading icons +/// @group general +$loadingIconFontSize: 2rem; + +/// Color to use on an invalid element e.g. invalid input +/// @group general +$errorColor: var(--error-color); + +/// 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: var(--section-icon-border); + +/// Color of an action icon +/// @group general +$actionIconColor: var(--section-icon-color); + +/// Backgroun of an action icon in hover state +/// @group general +$actionIconHoverBg: var(--section-icon-hover-bg); + +/// Border of an action icon in hover state +/// @group general +$actionIconHoverBorderColor: 1px solid var(--section-icon-hover-border-color); + +/// 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/variables/_media.scss b/src/azion/variables/_media.scss new file mode 100644 index 0000000..2ef8af7 --- /dev/null +++ b/src/azion/variables/_media.scss @@ -0,0 +1,231 @@ +/// 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/variables/_menu.scss b/src/azion/variables/_menu.scss new file mode 100644 index 0000000..6a1f99f --- /dev/null +++ b/src/azion/variables/_menu.scss @@ -0,0 +1,287 @@ +/// Background of a steps item +/// @group menu +$stepsItemBg: var(--steps-item-bg); + +/// Border of a steps item +/// @group menu +$stepsItemBorder: 1px solid var(--steps-item-border); + +/// 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: var(--menu-bg); + +/// Border of a menu +/// @group menu +$menuBorder: 1px solid var(--menu-border); + +/// 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: var(--submenu-header-font-weight); + +/// 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: var(--overlay-menu-shadow); + +/// 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: var(--horizontal-menu-bg); + +/// 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/variables/_message.scss b/src/azion/variables/_message.scss new file mode 100644 index 0000000..d57b083 --- /dev/null +++ b/src/azion/variables/_message.scss @@ -0,0 +1,145 @@ +/// 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 var(--toast-shadow); + +/// 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: var(--success-message-bg); + +/// 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: var(--success-message-icon-color); + +/// 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: var(--error-message--bg); + +/// 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: var(--error-message-icon-color); diff --git a/src/azion/variables/_misc.scss b/src/azion/variables/_misc.scss new file mode 100644 index 0000000..e8aebdc --- /dev/null +++ b/src/azion/variables/_misc.scss @@ -0,0 +1,143 @@ +/// 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: var(--progress-bar-value-bg); + +/// Text color of a progress bar value +/// @group misc +$progressBarValueTextColor: $primaryTextColor; + +/// Stroke color of a progress spinner +/// @group misc +$progressSpinnerStrokeColor: var(--progress-spinner-stroke-color); + +/// 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: var(--avatar-bg); + +/// Text color of an avatar +/// @group misc +$avatarTextColor: $textColor; + +/// Background of a chip +/// @group misc +$chipBg: var(--chip-bg); + +/// 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: var(--chip-focus-bg); + +/// 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: var(--skeleton-bg); + +/// Background of a skeleton animation +/// @group misc +$skeletonAnimationBg: var(--skeleton-animation-bg); diff --git a/src/azion/variables/_overlay.scss b/src/azion/variables/_overlay.scss new file mode 100644 index 0000000..31d89a0 --- /dev/null +++ b/src/azion/variables/_overlay.scss @@ -0,0 +1,67 @@ +/// 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: $overlayContentBg; + +/// Box shadow of an overlay container element such as dialog or overlaypanel +/// @group overlay +$overlayContainerShadow: var(--overlay-container-shadow); + +/// Background of a dialog header +/// @group overlay +$dialogHeaderBg: var(--dialog-header-bg); + +/// 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: var(--tooltip-text-color); + +/// Padding of a tooltip +/// @group overlay +$tooltipPadding: $inputPadding; diff --git a/src/azion/variables/_panel.scss b/src/azion/variables/_panel.scss new file mode 100644 index 0000000..1e33fc3 --- /dev/null +++ b/src/azion/variables/_panel.scss @@ -0,0 +1,327 @@ +/// 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: var(--panel-content-bg); + +/// 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: var(--panel-header-hover-border-color); + +/// Text color of a fieldset header in hover state +/// @group panel +$panelHeaderTextHoverColor: var(--panel-header-text-hover-color); + +/// 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: var(--card-shadow); + +/// 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: var(--splitter-gutter-handle-bg);