mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-10 05:37:44 +02:00
feat:#47 updated primevue theme for sass
This commit is contained in:
Elmar Kresse
@@ -0,0 +1,166 @@
|
||||
@mixin focused-ring($ring-color) {
|
||||
box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
|
||||
}
|
||||
|
||||
@layer primevue {
|
||||
.p-button-label {
|
||||
font-weight: 0;
|
||||
}
|
||||
|
||||
.p-selectbutton > .p-button,
|
||||
.p-togglebutton.p-button {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
|
||||
.p-accordion {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
li {
|
||||
.p-tabview-nav-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
.p-tabmenuitem {
|
||||
.p-menuitem-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-carousel {
|
||||
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria {
|
||||
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
&:focus {
|
||||
@include focused-ring(rgba($buttonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-secondary:enabled:focus {
|
||||
@include focused-ring(rgba($secondaryButtonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-success:enabled:focus {
|
||||
@include focused-ring(rgba($successButtonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-info:enabled:focus {
|
||||
@include focused-ring(rgba($infoButtonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-warning:enabled:focus {
|
||||
@include focused-ring(rgba($warningButtonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-help:enabled:focus {
|
||||
@include focused-ring(rgba($helpButtonBg, .7));
|
||||
}
|
||||
|
||||
&.p-button-danger:enabled:focus {
|
||||
@include focused-ring(rgba($dangerButtonBg, .7));
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $primaryColor;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-item {
|
||||
&.p-focus > .p-speeddial-action {
|
||||
@include focused-ring(rgba($buttonBg, .7));
|
||||
}
|
||||
}
|
||||
|
||||
.p-toast-message {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.p-message {
|
||||
.p-message-close {
|
||||
&:hover {
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-toast {
|
||||
.p-toast-message {
|
||||
.p-toast-icon-close {
|
||||
&:hover {
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inline-message-text {
|
||||
font-weight: 0;
|
||||
}
|
||||
|
||||
.p-picklist-buttons .p-button,
|
||||
.p-orderlist-controls .p-button {
|
||||
transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
|
||||
.p-steps {
|
||||
.p-steps-item {
|
||||
&.p-highlight {
|
||||
.p-steps-number {
|
||||
background: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-stepper {
|
||||
.p-stepper-header {
|
||||
.p-stepper-action {
|
||||
.p-stepper-number {
|
||||
border-style: solid;
|
||||
border-color: $shade600;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-stepper-action {
|
||||
.p-stepper-number {
|
||||
background: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,944 @@
|
||||
$colors: (
|
||||
"blue": #004699,
|
||||
"green": #00964e,
|
||||
"yellow": #ffed00,
|
||||
"cyan": #009ee3,
|
||||
"pink": #e5007d,
|
||||
"indigo": #6366f1,
|
||||
"teal": #14b8a6,
|
||||
"orange": #f97316,
|
||||
"bluegray": #64748b,
|
||||
"purple": #a855f7,
|
||||
"red": #e53009,
|
||||
"primary": $primaryColor,
|
||||
"htwk-yellow": #ffed00,
|
||||
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
|
||||
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
|
||||
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
|
||||
"htwk-magenta": #e5007d,
|
||||
"htwk-rot": #e53009,
|
||||
"htwk-gruen": #00964e,
|
||||
"htwk-cyan": #009ee3,
|
||||
"htwk-blau": #004699,
|
||||
"htwk-silbergrau": #bec3c6,
|
||||
"htwk-silbergrau-80": #cbd3d1,
|
||||
"htwk-silbergrau-60": #d8dedc,
|
||||
"htwk-silbergrau-40": #e5e9e8,
|
||||
"htwk-grau-140": #1b2022,
|
||||
"htwk-grau-120": #242b2d,
|
||||
"htwk-grau": #2e3639,
|
||||
"htwk-grau-80": #575e60,
|
||||
"htwk-grau-60": #818688,
|
||||
"htwk-grau-40": #abaeaf,
|
||||
"htwk-dunkelblau": #022541,
|
||||
"htwk-dunkelblau-80": #345067,
|
||||
"htwk-dunkelblau-60": #677c8d,
|
||||
"htwk-dunkelblau-40": #99a7b3,
|
||||
"htwk-schwarz": #000000,
|
||||
);
|
||||
|
||||
//shades
|
||||
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
|
||||
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
|
||||
$shade500: #6b7280 !default;
|
||||
$shade600: map-get($colors, "htwk-grau-140") !default; //input bg, border, divider
|
||||
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
|
||||
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
|
||||
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
|
||||
|
||||
$hoverBg: rgba(255, 255, 255, 0.03) !default;
|
||||
|
||||
//global
|
||||
$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
|
||||
$fontSize: 1rem !default;
|
||||
$fontWeight: normal !default;
|
||||
$textColor: $shade000 !default;
|
||||
$textSecondaryColor: $shade100 !default;
|
||||
$borderRadius: 6px !default;
|
||||
$transitionDuration: 0.2s !default;
|
||||
$formElementTransition: background-color $transitionDuration,
|
||||
color $transitionDuration, border-color $transitionDuration,
|
||||
box-shadow $transitionDuration !default;
|
||||
$actionIconTransition: background-color $transitionDuration,
|
||||
color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$listItemTransition: box-shadow $transitionDuration !default;
|
||||
$primeIconFontSize: 1rem !default;
|
||||
$divider: 1px solid $shade600 !default;
|
||||
$inlineSpacing: 0.5rem !default; //spacing between inline elements
|
||||
$disabledOpacity: 0.4 !default; //opacity of a disabled item
|
||||
$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
|
||||
$loadingIconFontSize: 2rem !default;
|
||||
$errorColor: #fca5a5 !default;
|
||||
|
||||
//scale
|
||||
$scaleSM: 0.875 !default;
|
||||
$scaleLG: 1.25 !default;
|
||||
|
||||
//focus
|
||||
$focusOutlineColor: $primaryLightestColor !default;
|
||||
$focusOutline: 0 none !default;
|
||||
$focusOutlineOffset: 0 !default;
|
||||
$inputFocusOutlineOffset: $focusOutlineOffset !default;
|
||||
$focusShadow: 0 0 0 0.2rem rgba(map-get($colors, "htwk-yellow"), 0.5) !default;
|
||||
|
||||
//action icons
|
||||
$actionIconWidth: 2rem !default;
|
||||
$actionIconHeight: 2rem !default;
|
||||
$actionIconBg: transparent !default;
|
||||
$actionIconBorder: 0 none !default;
|
||||
$actionIconColor: $shade100 !default;
|
||||
$actionIconHoverBg: $hoverBg !default;
|
||||
$actionIconHoverBorderColor: transparent !default;
|
||||
$actionIconHoverColor: $shade000 !default;
|
||||
$actionIconBorderRadius: 50% !default;
|
||||
|
||||
//input field (e.g. inputtext, spinner, inputmask)
|
||||
$inputPadding: 0.75rem 0.75rem !default;
|
||||
$inputTextFontSize: 1rem !default;
|
||||
$inputBg: $shade900 !default;
|
||||
$inputTextColor: $shade000 !default;
|
||||
$inputIconColor: $shade100 !default;
|
||||
$inputBorder: 1px solid $shade600 !default;
|
||||
$inputHoverBorderColor: $primaryColor !default;
|
||||
$inputFocusBorderColor: $primaryColor !default;
|
||||
$inputErrorBorderColor: $errorColor !default;
|
||||
$inputPlaceholderTextColor: $shade100 !default;
|
||||
$inputFilledBg: $shade600 !default;
|
||||
$inputFilledHoverBg: $inputFilledBg !default;
|
||||
$inputFilledFocusBg: $inputFilledBg !default;
|
||||
|
||||
//input groups
|
||||
$inputGroupBg: $shade800 !default;
|
||||
$inputGroupTextColor: $shade100 !default;
|
||||
$inputGroupAddOnMinWidth: 3rem !default;
|
||||
|
||||
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
|
||||
$inputListBg: $shade800 !default;
|
||||
$inputListTextColor: $shade000 !default;
|
||||
$inputListBorder: $inputBorder !default;
|
||||
$inputListPadding: 0.75rem 0 !default;
|
||||
$inputListItemPadding: 0.75rem 1.25rem !default;
|
||||
$inputListItemBg: transparent !default;
|
||||
$inputListItemTextColor: $shade000 !default;
|
||||
$inputListItemHoverBg: $hoverBg !default;
|
||||
$inputListItemTextHoverColor: $shade000 !default;
|
||||
$inputListItemFocusBg: $shade600 !default;
|
||||
$inputListItemTextFocusColor: $shade000 !default;
|
||||
$inputListItemBorder: 0 none !default;
|
||||
$inputListItemBorderRadius: 0 !default;
|
||||
$inputListItemMargin: 0 !default;
|
||||
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor !default;
|
||||
$inputListHeaderPadding: 0.75rem 1.25rem !default;
|
||||
$inputListHeaderMargin: 0 !default;
|
||||
$inputListHeaderBg: $shade800 !default;
|
||||
$inputListHeaderTextColor: $shade000 !default;
|
||||
$inputListHeaderBorder: 1px solid $shade600 !default;
|
||||
|
||||
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
|
||||
$inputOverlayBg: $inputListBg !default;
|
||||
$inputOverlayHeaderBg: $inputListHeaderBg !default;
|
||||
$inputOverlayBorder: 1px solid $shade600 !default;
|
||||
$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
//password
|
||||
$passwordMeterBg: $shade600 !default;
|
||||
$passwordWeakBg: #eb9a9c !default;
|
||||
$passwordMediumBg: #ffcf91 !default;
|
||||
$passwordStrongBg: #93deac !default;
|
||||
|
||||
//button
|
||||
$buttonPadding: 0.75rem 1.25rem !default;
|
||||
$buttonIconOnlyWidth: 3rem !default;
|
||||
$buttonIconOnlyPadding: 0.75rem 0 !default;
|
||||
$buttonBg: $primaryColor !default;
|
||||
$buttonTextColor: $primaryTextColor !default;
|
||||
$buttonBorder: 1px solid $primaryColor !default;
|
||||
$buttonHoverBg: $primaryLightColor !default;
|
||||
$buttonTextHoverColor: $primaryTextColor !default;
|
||||
$buttonHoverBorderColor: $primaryLightColor !default;
|
||||
$buttonActiveBg: $primaryLighterColor !default;
|
||||
$buttonTextActiveColor: $primaryTextColor !default;
|
||||
$buttonActiveBorderColor: $primaryLighterColor !default;
|
||||
$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) !default;
|
||||
$roundedButtonBorderRadius: 2rem !default;
|
||||
|
||||
$textButtonHoverBgOpacity: 0.04 !default;
|
||||
$textButtonActiveBgOpacity: 0.16 !default;
|
||||
$outlinedButtonBorder: 1px solid !default;
|
||||
$plainButtonTextColor: $textSecondaryColor !default;
|
||||
$plainButtonHoverBgColor: $hoverBg !default;
|
||||
$plainButtonActiveBgColor: rgba(255, 255, 255, 0.16) !default;
|
||||
|
||||
$secondaryButtonBg: #94a3b8 !default;
|
||||
$secondaryButtonTextColor: #020617 !default;
|
||||
$secondaryButtonBorder: 1px solid #94a3b8 !default;
|
||||
$secondaryButtonHoverBg: #cbd5e1 !default;
|
||||
$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
|
||||
$secondaryButtonHoverBorderColor: #cbd5e1 !default;
|
||||
$secondaryButtonActiveBg: #e2e8f0 !default;
|
||||
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
|
||||
$secondaryButtonActiveBorderColor: #e2e8f0 !default;
|
||||
$secondaryButtonFocusShadow: 0 0 0 1px
|
||||
scale-color($secondaryButtonBg, $lightness: 30%) !default;
|
||||
|
||||
$infoButtonBg: map-get($colors, "htwk-blau") !default;
|
||||
$infoButtonTextColor: #b1dafa !default;
|
||||
$infoButtonBorder: 1px solid map-get($colors, "htwk-blau") !default;
|
||||
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
|
||||
$infoButtonTextHoverColor: $infoButtonTextColor !default;
|
||||
$infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
|
||||
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
|
||||
$infoButtonTextActiveColor: $infoButtonTextColor !default;
|
||||
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
|
||||
$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonHoverBg, $lightness: 30%) !default;
|
||||
|
||||
$successButtonBg: map-get($colors, "htwk-gruen") !default;
|
||||
$successButtonTextColor: #052e16 !default;
|
||||
$successButtonBorder: 1px solid map-get($colors, "htwk-gruen") !default;
|
||||
$successButtonHoverBg: scale-color($successButtonBg, $lightness: 30%) !default;
|
||||
$successButtonTextHoverColor: $successButtonTextColor !default;
|
||||
$successButtonHoverBorderColor: #86efac !default;
|
||||
$successButtonActiveBg: #bbf7d0 !default;
|
||||
$successButtonTextActiveColor: $successButtonTextColor !default;
|
||||
$successButtonActiveBorderColor: #bbf7d0 !default;
|
||||
$successButtonFocusShadow: 0 0 0 1px
|
||||
scale-color($successButtonBg, $lightness: 30%) !default;
|
||||
|
||||
$warningButtonBg: map-get($colors, "htwk-yellow") !default;
|
||||
$warningButtonTextColor: #493c08 !default;
|
||||
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
|
||||
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||
$warningButtonTextHoverColor: $warningButtonTextColor !default;
|
||||
$warningButtonHoverBorderColor: scale-color($warningButtonBg, $lightness: 10%) !default;
|
||||
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||
$warningButtonTextActiveColor: $warningButtonTextColor !default;
|
||||
$warningButtonActiveBorderColor: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||
$warningButtonFocusShadow: 0 0 0 1px
|
||||
scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||
|
||||
$helpButtonBg: #c084fc !default;
|
||||
$helpButtonTextColor: #3b0764 !default;
|
||||
$helpButtonBorder: 1px solid #c084fc !default;
|
||||
$helpButtonHoverBg: #d8b4fe !default;
|
||||
$helpButtonTextHoverColor: $helpButtonTextColor !default;
|
||||
$helpButtonHoverBorderColor: #d8b4fe !default;
|
||||
$helpButtonActiveBg: #e9d5ff !default;
|
||||
$helpButtonTextActiveColor: $helpButtonTextColor !default;
|
||||
$helpButtonActiveBorderColor: #e9d5ff !default;
|
||||
$helpButtonFocusShadow: 0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
|
||||
|
||||
$dangerButtonBg: #f87171 !default;
|
||||
$dangerButtonTextColor: #450a0a !default;
|
||||
$dangerButtonBorder: 1px solid #f87171 !default;
|
||||
$dangerButtonHoverBg: #fca5a5 !default;
|
||||
$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
|
||||
$dangerButtonHoverBorderColor: #fca5a5 !default;
|
||||
$dangerButtonActiveBg: #fecaca !default;
|
||||
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
|
||||
$dangerButtonActiveBorderColor: #fecaca !default;
|
||||
$dangerButtonFocusShadow: 0 0 0 1px
|
||||
scale-color($dangerButtonBg, $lightness: 30%) !default;
|
||||
|
||||
$contrastButtonBg: #ffffff !default;
|
||||
$contrastButtonTextColor: $shade900 !default;
|
||||
$contrastButtonBorder: 1px solid $contrastButtonBg !default;
|
||||
$contrastButtonHoverBg: #f3f4f6 !default;
|
||||
$contrastButtonTextHoverColor: $contrastButtonTextColor !default;
|
||||
$contrastButtonHoverBorderColor: #f3f4f6 !default;
|
||||
$contrastButtonActiveBg: #e5e7eb !default;
|
||||
$contrastButtonTextActiveColor: $contrastButtonTextColor !default;
|
||||
$contrastButtonActiveBorderColor: #e5e7eb !default;
|
||||
$contrastButtonFocusShadow: none !default;
|
||||
|
||||
$linkButtonColor: $primaryColor !default;
|
||||
$linkButtonHoverColor: $primaryColor !default;
|
||||
$linkButtonTextHoverDecoration: underline !default;
|
||||
$linkButtonFocusShadow: 0 0 0 1px $focusOutlineColor !default;
|
||||
|
||||
//checkbox
|
||||
$checkboxWidth: 22px !default;
|
||||
$checkboxHeight: 22px !default;
|
||||
$checkboxBorder: 2px solid $shade600 !default;
|
||||
$checkboxIconFontSize: 14px !default;
|
||||
$checkboxActiveBorderColor: $primaryColor !default;
|
||||
$checkboxActiveBg: $primaryColor !default;
|
||||
$checkboxIconActiveColor: $primaryTextColor !default;
|
||||
$checkboxActiveHoverBg: $primaryLighterColor !default;
|
||||
$checkboxIconActiveHoverColor: $primaryTextColor !default;
|
||||
$checkboxActiveHoverBorderColor: $primaryLighterColor !default;
|
||||
|
||||
//radiobutton
|
||||
$radiobuttonWidth: 22px !default;
|
||||
$radiobuttonHeight: 22px !default;
|
||||
$radiobuttonBorder: 2px solid $shade600 !default;
|
||||
$radiobuttonIconSize: 12px !default;
|
||||
$radiobuttonActiveBorderColor: $primaryColor !default;
|
||||
$radiobuttonActiveBg: $primaryColor !default;
|
||||
$radiobuttonIconActiveColor: $primaryTextColor !default;
|
||||
$radiobuttonActiveHoverBg: $primaryLighterColor !default;
|
||||
$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
|
||||
$radiobuttonActiveHoverBorderColor: $primaryLighterColor !default;
|
||||
|
||||
//colorpicker
|
||||
$colorPickerPreviewWidth: 2rem !default;
|
||||
$colorPickerPreviewHeight: 2rem !default;
|
||||
$colorPickerBg: $shade800 !default;
|
||||
$colorPickerBorder: 1px solid $shade600 !default;
|
||||
$colorPickerHandleColor: $shade000 !default;
|
||||
|
||||
//togglebutton
|
||||
$toggleButtonBg: $shade800 !default;
|
||||
$toggleButtonBorder: 1px solid $shade600 !default;
|
||||
$toggleButtonTextColor: $shade000 !default;
|
||||
$toggleButtonIconColor: $shade100 !default;
|
||||
$toggleButtonHoverBg: $hoverBg !default;
|
||||
$toggleButtonHoverBorderColor: $shade600 !default;
|
||||
$toggleButtonTextHoverColor: $shade000 !default;
|
||||
$toggleButtonIconHoverColor: $shade100 !default;
|
||||
$toggleButtonActiveBg: $primaryColor !default;
|
||||
$toggleButtonActiveBorderColor: $primaryColor !default;
|
||||
$toggleButtonTextActiveColor: $primaryTextColor !default;
|
||||
$toggleButtonIconActiveColor: $primaryTextColor !default;
|
||||
$toggleButtonActiveHoverBg: $primaryLightColor !default;
|
||||
$toggleButtonActiveHoverBorderColor: $primaryLightColor !default;
|
||||
$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
|
||||
$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
|
||||
|
||||
//inplace
|
||||
$inplacePadding: $inputPadding !default;
|
||||
$inplaceHoverBg: $hoverBg !default;
|
||||
$inplaceTextHoverColor: $shade000 !default;
|
||||
|
||||
//rating
|
||||
$ratingIconFontSize: 1.143rem !default;
|
||||
$ratingCancelIconColor: #f48fb1 !default;
|
||||
$ratingCancelIconHoverColor: #f48fb1 !default;
|
||||
$ratingStarIconOffColor: $shade000 !default;
|
||||
$ratingStarIconOnColor: $primaryColor !default;
|
||||
$ratingStarIconHoverColor: $primaryColor !default;
|
||||
|
||||
//slider
|
||||
$sliderBg: $shade600 !default;
|
||||
$sliderBorder: 0 none !default;
|
||||
$sliderHorizontalHeight: 0.286rem !default;
|
||||
$sliderVerticalWidth: 0.286rem !default;
|
||||
$sliderHandleWidth: 1.143rem !default;
|
||||
$sliderHandleHeight: 1.143rem !default;
|
||||
$sliderHandleBg: $shade600 !default;
|
||||
$sliderHandleBorder: 2px solid $primaryColor !default;
|
||||
$sliderHandleBorderRadius: 50% !default;
|
||||
$sliderHandleHoverBorderColor: $primaryColor !default;
|
||||
$sliderHandleHoverBg: $primaryColor !default;
|
||||
$sliderRangeBg: $primaryColor !default;
|
||||
|
||||
//calendar
|
||||
$calendarTableMargin: 0.5rem 0 !default;
|
||||
$calendarPadding: 0.5rem !default;
|
||||
$calendarBg: $shade800 !default;
|
||||
$calendarInlineBg: $calendarBg !default;
|
||||
$calendarTextColor: $shade000 !default;
|
||||
$calendarBorder: $inputListBorder !default;
|
||||
$calendarOverlayBorder: $inputOverlayBorder !default;
|
||||
|
||||
$calendarHeaderPadding: 0.5rem !default;
|
||||
$calendarHeaderBg: $shade800 !default;
|
||||
$calendarInlineHeaderBg: $calendarBg !default;
|
||||
$calendarHeaderBorder: 1px solid $shade600 !default;
|
||||
$calendarHeaderTextColor: $shade000 !default;
|
||||
$calendarHeaderFontWeight: 100 !default;
|
||||
$calendarHeaderCellPadding: 0.5rem !default;
|
||||
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
|
||||
|
||||
$calendarCellDatePadding: 0.5rem !default;
|
||||
$calendarCellDateWidth: 2.5rem !default;
|
||||
$calendarCellDateHeight: 2.5rem !default;
|
||||
$calendarCellDateBorderRadius: 50% !default;
|
||||
$calendarCellDateBorder: 1px solid transparent !default;
|
||||
$calendarCellDateHoverBg: $hoverBg !default;
|
||||
$calendarCellDateTodayBg: transparent !default;
|
||||
$calendarCellDateTodayBorderColor: transparent !default;
|
||||
$calendarCellDateTodayTextColor: $primaryColor !default;
|
||||
|
||||
$calendarButtonBarPadding: 1rem 0 !default;
|
||||
$calendarTimePickerPadding: 0.5rem !default;
|
||||
$calendarTimePickerElementPadding: 0 0.5rem !default;
|
||||
$calendarTimePickerTimeFontSize: 1.25rem !default;
|
||||
|
||||
$calendarBreakpoint: 769px !default;
|
||||
$calendarCellDatePaddingSM: 0 !default;
|
||||
|
||||
//input switch
|
||||
$inputSwitchWidth: 3rem !default;
|
||||
$inputSwitchHeight: 1.75rem !default;
|
||||
$inputSwitchBorderRadius: 30px !default;
|
||||
$inputSwitchHandleWidth: 1.25rem !default;
|
||||
$inputSwitchHandleHeight: 1.25rem !default;
|
||||
$inputSwitchHandleBorderRadius: 50% !default;
|
||||
$inputSwitchSliderPadding: 0.25rem !default;
|
||||
$inputSwitchSliderOffBg: $shade500 !default;
|
||||
$inputSwitchHandleOffBg: $shade100 !default;
|
||||
$inputSwitchSliderOffHoverBg: $shade600 !default;
|
||||
$inputSwitchSliderOnBg: $primaryColor !default;
|
||||
$inputSwitchSliderOnHoverBg: $primaryLightColor !default;
|
||||
$inputSwitchHandleOnBg: $primaryTextColor !default;
|
||||
|
||||
//panel
|
||||
$panelHeaderBorderColor: $shade600 !default;
|
||||
$panelHeaderBorder: 1px solid $shade600 !default;
|
||||
$panelHeaderBg: $shade800 !default;
|
||||
$panelHeaderTextColor: $shade000 !default;
|
||||
$panelHeaderFontWeight: 100 !default;
|
||||
$panelHeaderPadding: 1.25rem !default;
|
||||
$panelToggleableHeaderPadding: 0.75rem 1.25rem !default;
|
||||
|
||||
$panelHeaderHoverBg: $hoverBg !default;
|
||||
$panelHeaderHoverBorderColor: $shade600 !default;
|
||||
$panelHeaderTextHoverColor: $shade000 !default;
|
||||
|
||||
$panelContentBorderColor: $shade600 !default;
|
||||
$panelContentBorder: 1px solid $shade600 !default;
|
||||
$panelContentBg: $shade800 !default;
|
||||
$panelContentEvenRowBg: map-get($colors, "htwk-grau-120") !default;
|
||||
$panelContentTextColor: $shade000 !default;
|
||||
$panelContentPadding: 1.25rem !default;
|
||||
|
||||
$panelFooterBorder: 1px solid $shade600 !default;
|
||||
$panelFooterBg: $shade800 !default;
|
||||
$panelFooterTextColor: $shade000 !default;
|
||||
$panelFooterPadding: 0.75rem 1.25rem !default;
|
||||
|
||||
//accordion
|
||||
$accordionSpacing: 4px !default;
|
||||
$accordionHeaderBorder: $panelHeaderBorder !default;
|
||||
$accordionHeaderBg: $panelHeaderBg !default;
|
||||
$accordionHeaderTextColor: $panelHeaderTextColor !default;
|
||||
$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
|
||||
$accordionHeaderPadding: $panelHeaderPadding !default;
|
||||
|
||||
$accordionHeaderHoverBg: $hoverBg !default;
|
||||
$accordionHeaderHoverBorderColor: $shade600 !default;
|
||||
$accordionHeaderTextHoverColor: $shade000 !default;
|
||||
|
||||
$accordionHeaderActiveBg: $panelHeaderBg !default;
|
||||
$accordionHeaderActiveBorderColor: $shade600 !default;
|
||||
$accordionHeaderTextActiveColor: $shade000 !default;
|
||||
|
||||
$accordionHeaderActiveHoverBg: $hoverBg !default;
|
||||
$accordionHeaderActiveHoverBorderColor: $shade600 !default;
|
||||
$accordionHeaderTextActiveHoverColor: $shade000 !default;
|
||||
|
||||
$accordionContentBorder: $panelContentBorder !default;
|
||||
$accordionContentBg: $panelContentBg !default;
|
||||
$accordionContentTextColor: $panelContentTextColor !default;
|
||||
$accordionContentPadding: $panelContentPadding !default;
|
||||
|
||||
//tabview
|
||||
$tabviewNavBorder: 1px solid $shade600 !default;
|
||||
$tabviewNavBorderWidth: 0 0 2px 0 !default;
|
||||
$tabviewNavBg: transparent !default;
|
||||
|
||||
$tabviewHeaderSpacing: 0 !default;
|
||||
$tabviewHeaderBorder: solid $shade600 !default;
|
||||
$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
|
||||
$tabviewHeaderBorderColor: transparent transparent $shade600 transparent !default;
|
||||
$tabviewHeaderBg: $shade800 !default;
|
||||
$tabviewHeaderTextColor: $shade100 !default;
|
||||
$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
|
||||
$tabviewHeaderPadding: $panelHeaderPadding !default;
|
||||
$tabviewHeaderMargin: 0 0 -2px 0 !default;
|
||||
|
||||
$tabviewHeaderHoverBg: $shade800 !default;
|
||||
$tabviewHeaderHoverBorderColor: $primaryColor !default;
|
||||
$tabviewHeaderTextHoverColor: $shade000 !default;
|
||||
|
||||
$tabviewHeaderActiveBg: $shade800 !default;
|
||||
$tabviewHeaderActiveBorderColor: $primaryColor !default;
|
||||
$tabviewHeaderTextActiveColor: $primaryColor !default;
|
||||
|
||||
$tabviewContentBorder: 0 none !default;
|
||||
$tabviewContentBg: $shade800 !default;
|
||||
$tabviewContentTextColor: $shade000 !default;
|
||||
$tabviewContentPadding: $panelContentPadding !default;
|
||||
|
||||
//upload
|
||||
$fileUploadProgressBarHeight: 0.25rem !default;
|
||||
$fileUploadContentPadding: 2rem 1rem !default;
|
||||
$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
|
||||
$fileUploadFileBorder: 1px solid $shade600 !default;
|
||||
$fileUploadFilePadding: 1rem !default;
|
||||
|
||||
//scrollpanel
|
||||
$scrollPanelTrackBorder: 0 none !default;
|
||||
$scrollPanelTrackBg: $shade600 !default;
|
||||
|
||||
//card
|
||||
$cardBodyPadding: 1.25rem !default;
|
||||
$cardTitleFontSize: 1.5rem !default;
|
||||
$cardTitleFontWeight: 0 !default;
|
||||
$cardSubTitleFontWeight: 100 !default;
|
||||
$cardSubTitleColor: $shade100 !default;
|
||||
$cardContentPadding: 1.25rem 0 !default;
|
||||
$cardFooterPadding: 1.25rem 0 0 0 !default;
|
||||
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
//editor
|
||||
$editorToolbarBg: $panelHeaderBg !default;
|
||||
$editorToolbarBorder: $panelHeaderBorder !default;
|
||||
$editorToolbarPadding: $panelHeaderPadding !default;
|
||||
$editorToolbarIconColor: $textSecondaryColor !default;
|
||||
$editorToolbarIconHoverColor: $textColor !default;
|
||||
$editorIconActiveColor: $primaryColor !default;
|
||||
$editorContentBorder: $panelContentBorder !default;
|
||||
$editorContentBg: $panelContentBg !default;
|
||||
|
||||
//paginator
|
||||
$paginatorBg: $shade800 !default;
|
||||
$paginatorTextColor: $shade100 !default;
|
||||
$paginatorBorder: solid $shade600 !default;
|
||||
$paginatorBorderWidth: 1px !default;
|
||||
$paginatorPadding: 0.5rem 1rem !default;
|
||||
$paginatorElementWidth: $buttonIconOnlyWidth !default;
|
||||
$paginatorElementHeight: $buttonIconOnlyWidth !default;
|
||||
$paginatorElementBg: transparent !default;
|
||||
$paginatorElementBorder: 0 none !default;
|
||||
$paginatorElementIconColor: $shade100 !default;
|
||||
$paginatorElementHoverBg: $hoverBg !default;
|
||||
$paginatorElementHoverBorderColor: transparent !default;
|
||||
$paginatorElementIconHoverColor: $shade000 !default;
|
||||
$paginatorElementBorderRadius: $borderRadius !default;
|
||||
$paginatorElementMargin: 0.143rem !default;
|
||||
$paginatorElementPadding: 0 !default;
|
||||
|
||||
//table
|
||||
$tableHeaderBorder: 1px solid $shade600 !default;
|
||||
$tableHeaderBorderWidth: 0 0 1px 0 !default;
|
||||
$tableHeaderBg: $shade800 !default;
|
||||
$tableHeaderTextColor: $shade100 !default;
|
||||
$tableHeaderFontWeight: 0 !default;
|
||||
$tableHeaderPadding: 1rem 1rem !default;
|
||||
|
||||
$tableHeaderCellPadding: 1rem 1rem !default;
|
||||
$tableHeaderCellBg: $shade800 !default;
|
||||
$tableHeaderCellTextColor: $shade000 !default;
|
||||
$tableHeaderCellFontWeight: 0 !default;
|
||||
$tableHeaderCellBorder: 1px solid $shade600 !default;
|
||||
$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
|
||||
$tableHeaderCellHoverBg: $hoverBg !default;
|
||||
$tableHeaderCellTextHoverColor: $shade000 !default;
|
||||
$tableHeaderCellIconColor: $shade100 !default;
|
||||
$tableHeaderCellIconHoverColor: $shade000 !default;
|
||||
$tableHeaderCellHighlightBg: $highlightBg !default;
|
||||
$tableHeaderCellHighlightTextColor: $highlightTextColor !default;
|
||||
$tableHeaderCellHighlightHoverBg: $highlightBg !default;
|
||||
$tableHeaderCellHighlightTextHoverColor: $highlightTextColor !default;
|
||||
$tableSortableColumnBadgeSize: 1.143rem !default;
|
||||
|
||||
$tableBodyRowBg: $shade800 !default;
|
||||
$tableBodyRowTextColor: $shade000 !default;
|
||||
$tableBodyRowEvenBg: map-get($colors, "htwk-grau-120") !default;
|
||||
$tableBodyRowHoverBg: $hoverBg !default;
|
||||
$tableBodyRowTextHoverColor: $shade000 !default;
|
||||
$tableBodyCellBorder: 1px solid $shade600 !default;
|
||||
$tableBodyCellBorderWidth: 0 0 1px 0 !default;
|
||||
$tableBodyCellPadding: 1rem 1rem !default;
|
||||
|
||||
$tableFooterCellPadding: 1rem 1rem !default;
|
||||
$tableFooterCellBg: $shade800 !default;
|
||||
$tableFooterCellTextColor: $shade000 !default;
|
||||
$tableFooterCellFontWeight: 0 !default;
|
||||
$tableFooterCellBorder: 1px solid $shade600 !default;
|
||||
$tableFooterCellBorderWidth: 0 0 1px 0 !default;
|
||||
$tableResizerHelperBg: $primaryColor !default;
|
||||
|
||||
$tableFooterBorder: 1px solid $shade600 !default;
|
||||
$tableFooterBorderWidth: 0 0 1px 0 !default;
|
||||
$tableFooterBg: $shade800 !default;
|
||||
$tableFooterTextColor: $shade000 !default;
|
||||
$tableFooterFontWeight: 0 !default;
|
||||
$tableFooterPadding: 1rem 1rem !default;
|
||||
|
||||
$tableCellContentAlignment: left !default;
|
||||
$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
|
||||
$tableBottomPaginatorBorderWidth: 0 0 1px 0 !default;
|
||||
|
||||
$tableScaleSM: 0.5 !default;
|
||||
$tableScaleLG: 1.25 !default;
|
||||
|
||||
//dataview
|
||||
$dataViewContentPadding: 0 !default;
|
||||
$dataViewContentBorder: 0 none !default;
|
||||
|
||||
//tree
|
||||
$treeContainerPadding: 0.286rem !default;
|
||||
$treeNodePadding: 0.143rem !default;
|
||||
$treeNodeContentPadding: 0.5rem !default;
|
||||
$treeNodeChildrenPadding: 0 0 0 1rem !default;
|
||||
$treeNodeIconColor: $shade100 !default;
|
||||
|
||||
//timeline
|
||||
$timelineVerticalEventContentPadding: 0 1rem !default;
|
||||
$timelineHorizontalEventContentPadding: 1rem 0 !default;
|
||||
$timelineEventMarkerWidth: 1rem !default;
|
||||
$timelineEventMarkerHeight: 1rem !default;
|
||||
$timelineEventMarkerBorderRadius: 50% !default;
|
||||
$timelineEventMarkerBorder: 2px solid $primaryColor !default;
|
||||
$timelineEventMarkerBackground: $primaryTextColor !default;
|
||||
$timelineEventConnectorSize: 2px !default;
|
||||
$timelineEventColor: $shade600 !default;
|
||||
|
||||
//org chart
|
||||
$organizationChartConnectorColor: $shade600 !default;
|
||||
|
||||
//message
|
||||
$messageMargin: 1rem 0 !default;
|
||||
$messagePadding: 1.25rem 1.75rem !default;
|
||||
$messageBorderWidth: 0 0 0 6px !default;
|
||||
$messageIconFontSize: 1.5rem !default;
|
||||
$messageTextFontSize: 1rem !default;
|
||||
$messageTextFontWeight: 0 !default;
|
||||
|
||||
//inline message
|
||||
$inlineMessagePadding: $inputPadding !default;
|
||||
$inlineMessageMargin: 0 !default;
|
||||
$inlineMessageIconFontSize: 1rem !default;
|
||||
$inlineMessageTextFontSize: 1rem !default;
|
||||
$inlineMessageBorderWidth: 1px !default;
|
||||
|
||||
//toast
|
||||
$toastIconFontSize: 2rem !default;
|
||||
$toastMessageTextMargin: 0 0 0 1rem !default;
|
||||
$toastMargin: 0 0 1rem 0 !default;
|
||||
$toastPadding: 1rem !default;
|
||||
$toastBorderWidth: 0 0 0 6px !default;
|
||||
$toastShadow: none !default;
|
||||
$toastOpacity: 1 !default;
|
||||
$toastTitleFontWeight: 0 !default;
|
||||
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
|
||||
|
||||
//severities
|
||||
$infoMessageBg: rgba(59, 130, 246, 0.2) !default;
|
||||
$infoMessageBorder: solid #3b82f6 !default;
|
||||
$infoMessageTextColor: #93c5fd !default;
|
||||
$infoMessageIconColor: #93c5fd !default;
|
||||
$successMessageBg: rgba(16, 185, 129, 0.2) !default;
|
||||
$successMessageBorder: solid #10b981 !default;
|
||||
$successMessageTextColor: #6ee7b7 !default;
|
||||
$successMessageIconColor: #6ee7b7 !default;
|
||||
$warningMessageBg: rgba(234, 179, 8, 0.2) !default;
|
||||
$warningMessageBorder: solid #eab308 !default;
|
||||
$warningMessageTextColor: #fde047 !default;
|
||||
$warningMessageIconColor: #fde047 !default;
|
||||
$errorMessageBg: rgba(239, 68, 68, 0.2) !default;
|
||||
$errorMessageBorder: solid #ef4444 !default;
|
||||
$errorMessageTextColor: #fca5a5 !default;
|
||||
$errorMessageIconColor: #fca5a5 !default;
|
||||
$secondaryMessageBg: $secondaryButtonBg !default;
|
||||
$secondaryMessageBorder: solid $secondaryButtonBg !default;
|
||||
$secondaryMessageTextColor: $secondaryButtonTextColor !default;
|
||||
$secondaryMessageIconColor: $secondaryButtonTextColor !default;
|
||||
$contrastMessageBg: $contrastButtonBg !default;
|
||||
$contrastMessageBorder: solid $contrastButtonBg !default;
|
||||
$contrastMessageTextColor: $contrastButtonTextColor !default;
|
||||
$contrastMessageIconColor: $contrastButtonTextColor !default;
|
||||
|
||||
//overlays
|
||||
$overlayContentBorder: 1px solid $shade600 !default;
|
||||
$overlayContentBg: $panelContentBg !default;
|
||||
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
//dialog
|
||||
$dialogHeaderBg: $shade800 !default;
|
||||
$dialogHeaderBorder: 0 none !default;
|
||||
$dialogHeaderTextColor: $shade000 !default;
|
||||
$dialogHeaderFontWeight: 0 !default;
|
||||
$dialogHeaderFontSize: 1.25rem !default;
|
||||
$dialogHeaderPadding: 1.5rem !default;
|
||||
$dialogContentPadding: 0 1.5rem 2rem 1.5rem !default;
|
||||
$dialogFooterBorder: 0 none !default;
|
||||
$dialogFooterPadding: 0 1.5rem 1.5rem 1.5rem !default;
|
||||
|
||||
//confirmpopup
|
||||
$confirmPopupContentPadding: $panelContentPadding !default;
|
||||
$confirmPopupFooterPadding: 0 1.25rem 1.25rem 1.25rem !default;
|
||||
|
||||
//tooltip
|
||||
$tooltipBg: $shade600 !default;
|
||||
$tooltipTextColor: $shade000 !default;
|
||||
$tooltipPadding: $inputPadding !default;
|
||||
|
||||
//steps
|
||||
$stepsItemBg: transparent !default;
|
||||
$stepsItemBorder: 0 none !default;
|
||||
$stepsItemTextColor: $shade100 !default;
|
||||
$stepsItemNumberWidth: 2rem !default;
|
||||
$stepsItemNumberHeight: 2rem !default;
|
||||
$stepsItemNumberFontSize: 1.143rem !default;
|
||||
$stepsItemNumberColor: $shade000 !default;
|
||||
$stepsItemNumberBorderRadius: 50% !default;
|
||||
$stepsItemActiveFontWeight: 0 !default;
|
||||
|
||||
//progressbar, progressspinner
|
||||
$progressBarHeight: 1.5rem !default;
|
||||
$progressBarBorder: 0 none !default;
|
||||
$progressBarBg: $shade600 !default;
|
||||
$progressBarValueBg: $primaryColor !default;
|
||||
$progressBarValueTextColor: $primaryTextColor !default;
|
||||
|
||||
$progressSpinnerStrokeColor: $errorMessageTextColor !default;
|
||||
$progressSpinnerColorOne: $errorMessageTextColor !default;
|
||||
$progressSpinnerColorTwo: $infoMessageTextColor !default;
|
||||
$progressSpinnerColorThree: $successMessageTextColor !default;
|
||||
$progressSpinnerColorFour: $warningMessageTextColor !default;
|
||||
|
||||
//menu (e.g. menu, menubar, tieredmenu)
|
||||
$menuWidth: 12.5rem !default;
|
||||
$menuBg: $shade700 !default;
|
||||
$menuBorder: 1px solid $shade600 !default;
|
||||
$menuTextColor: $shade000 !default;
|
||||
$menuitemPadding: 0.75rem 1.25rem !default;
|
||||
$menuitemBorderRadius: 0 !default;
|
||||
$menuitemTextColor: $shade000 !default;
|
||||
$menuitemIconColor: $shade100 !default;
|
||||
$menuitemTextHoverColor: $shade000 !default;
|
||||
$menuitemIconHoverColor: $shade000 !default;
|
||||
$menuitemHoverBg: $hoverBg !default;
|
||||
$menuitemTextFocusColor: $shade000 !default;
|
||||
$menuitemIconFocusColor: $shade000 !default;
|
||||
$menuitemFocusBg: $shade600 !default;
|
||||
$menuitemTextActiveColor: $highlightTextColor !default;
|
||||
$menuitemIconActiveColor: $highlightTextColor !default;
|
||||
$menuitemActiveBg: $highlightBg !default;
|
||||
$menuitemActiveFocusBg: $highlightFocusBg !default;
|
||||
$menuitemSubmenuIconFontSize: 0.875rem !default;
|
||||
$submenuHeaderMargin: 0 !default;
|
||||
$submenuHeaderPadding: 0.75rem 1.25rem !default;
|
||||
$submenuHeaderBg: $shade700 !default;
|
||||
$submenuHeaderTextColor: $shade000 !default;
|
||||
$submenuHeaderBorderRadius: 0 !default;
|
||||
$submenuHeaderFontWeight: 0 !default;
|
||||
$overlayMenuBg: $menuBg !default;
|
||||
$overlayMenuBorder: 1px solid $shade600 !default;
|
||||
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
$verticalMenuPadding: 0.25rem 0 !default;
|
||||
$menuSeparatorMargin: 0.25rem 0 !default;
|
||||
|
||||
$breadcrumbPadding: 1rem !default;
|
||||
$breadcrumbBg: $menuBg !default;
|
||||
$breadcrumbBorder: $menuBorder !default;
|
||||
$breadcrumbItemTextColor: $menuitemTextColor !default;
|
||||
$breadcrumbItemIconColor: $menuitemIconColor !default;
|
||||
$breadcrumbLastItemTextColor: $menuitemTextColor !default;
|
||||
$breadcrumbLastItemIconColor: $menuitemIconColor !default;
|
||||
$breadcrumbSeparatorColor: $menuitemTextColor !default;
|
||||
|
||||
$horizontalMenuPadding: 0.5rem !default;
|
||||
$horizontalMenuBg: $shade700 !default;
|
||||
$horizontalMenuBorder: $menuBorder !default;
|
||||
$horizontalMenuTextColor: $menuTextColor !default;
|
||||
$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
|
||||
$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
|
||||
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
|
||||
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
|
||||
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
|
||||
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
|
||||
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
|
||||
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor !default;
|
||||
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
|
||||
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
|
||||
|
||||
//badge and tag
|
||||
$badgeBg: $primaryColor !default;
|
||||
$badgeTextColor: $primaryTextColor !default;
|
||||
$badgeMinWidth: 1.5rem !default;
|
||||
$badgeHeight: 1.5rem !default;
|
||||
$badgeFontWeight: 0 !default;
|
||||
$badgeFontSize: 0.75rem !default;
|
||||
|
||||
$tagPadding: 0.25rem 0.4rem !default;
|
||||
|
||||
//carousel
|
||||
$carouselIndicatorsPadding: 1rem !default;
|
||||
$carouselIndicatorBg: $shade600 !default;
|
||||
$carouselIndicatorHoverBg: $hoverBg !default;
|
||||
$carouselIndicatorBorderRadius: 0 !default;
|
||||
$carouselIndicatorWidth: 2rem !default;
|
||||
$carouselIndicatorHeight: 0.5rem !default;
|
||||
|
||||
//galleria
|
||||
$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
|
||||
$galleriaCloseIconMargin: 0.5rem !default;
|
||||
$galleriaCloseIconFontSize: 2rem !default;
|
||||
$galleriaCloseIconBg: transparent !default;
|
||||
$galleriaCloseIconColor: #f8f9fa !default;
|
||||
$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$galleriaCloseIconHoverColor: #f8f9fa !default;
|
||||
$galleriaCloseIconWidth: 4rem !default;
|
||||
$galleriaCloseIconHeight: 4rem !default;
|
||||
$galleriaCloseIconBorderRadius: 50% !default;
|
||||
|
||||
$galleriaItemNavigatorBg: transparent !default;
|
||||
$galleriaItemNavigatorColor: #f8f9fa !default;
|
||||
$galleriaItemNavigatorMargin: 0 0.5rem !default;
|
||||
$galleriaItemNavigatorFontSize: 2rem !default;
|
||||
$galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$galleriaItemNavigatorHoverColor: #f8f9fa !default;
|
||||
$galleriaItemNavigatorWidth: 4rem !default;
|
||||
$galleriaItemNavigatorHeight: 4rem !default;
|
||||
$galleriaItemNavigatorBorderRadius: $borderRadius !default;
|
||||
|
||||
$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
|
||||
$galleriaCaptionTextColor: #f8f9fa !default;
|
||||
$galleriaCaptionPadding: 1rem !default;
|
||||
|
||||
$galleriaIndicatorsPadding: 1rem !default;
|
||||
$galleriaIndicatorBg: $shade600 !default;
|
||||
$galleriaIndicatorHoverBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$galleriaIndicatorBorderRadius: 50% !default;
|
||||
$galleriaIndicatorWidth: 1rem !default;
|
||||
$galleriaIndicatorHeight: 1rem !default;
|
||||
$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
|
||||
$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4) !default;
|
||||
$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6) !default;
|
||||
|
||||
$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9) !default;
|
||||
$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
|
||||
$galleriaThumbnailNavigatorBg: transparent !default;
|
||||
$galleriaThumbnailNavigatorColor: #f8f9fa !default;
|
||||
$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$galleriaThumbnailNavigatorHoverColor: #f8f9fa !default;
|
||||
$galleriaThumbnailNavigatorBorderRadius: 50% !default;
|
||||
$galleriaThumbnailNavigatorWidth: 2rem !default;
|
||||
$galleriaThumbnailNavigatorHeight: 2rem !default;
|
||||
|
||||
//divider
|
||||
$dividerHorizontalMargin: 1.25rem 0 !default;
|
||||
$dividerHorizontalPadding: 0 1.25rem !default;
|
||||
$dividerVerticalMargin: 0 1.25rem !default;
|
||||
$dividerVerticalPadding: 1.25rem 0 !default;
|
||||
$dividerSize: 1px !default;
|
||||
$dividerColor: $shade600 !default;
|
||||
|
||||
//avatar
|
||||
$avatarBg: $shade600 !default;
|
||||
$avatarTextColor: $textColor !default;
|
||||
|
||||
//chip
|
||||
$chipBg: $shade600 !default;
|
||||
$chipTextColor: $textColor !default;
|
||||
$chipBorderRadius: 16px !default;
|
||||
$chipFocusBg: $shade500 !default;
|
||||
$chipFocusTextColor: $textColor !default;
|
||||
|
||||
//scrollTop
|
||||
$scrollTopBg: $highlightBg !default;
|
||||
$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%) !default;
|
||||
$scrollTopWidth: 3rem !default;
|
||||
$scrollTopHeight: 3rem !default;
|
||||
$scrollTopBorderRadius: 50% !default;
|
||||
$scrollTopFontSize: 1.5rem !default;
|
||||
$scrollTopTextColor: $highlightTextColor !default;
|
||||
|
||||
//skeleton
|
||||
$skeletonBg: rgba(255, 255, 255, 0.06) !default;
|
||||
$skeletonAnimationBg: rgba(255, 255, 255, 0.04) !default;
|
||||
|
||||
//splitter
|
||||
$splitterGutterBg: rgba(255, 255, 255, 0.03) !default;
|
||||
$splitterGutterHandleBg: $shade600 !default;
|
||||
|
||||
//speeddial
|
||||
$speedDialButtonWidth: 4rem !default;
|
||||
$speedDialButtonHeight: 4rem !default;
|
||||
$speedDialButtonIconFontSize: 1.3rem !default;
|
||||
$speedDialActionWidth: 3rem !default;
|
||||
$speedDialActionHeight: 3rem !default;
|
||||
$speedDialActionBg: $shade000 !default;
|
||||
$speedDialActionHoverBg: $shade100 !default;
|
||||
$speedDialActionTextColor: $shade900 !default;
|
||||
$speedDialActionTextHoverColor: $shade900 !default;
|
||||
|
||||
//dock
|
||||
$dockActionWidth: 4rem !default;
|
||||
$dockActionHeight: 4rem !default;
|
||||
$dockItemPadding: 0.5rem !default;
|
||||
$dockItemBorderRadius: $borderRadius !default;
|
||||
$dockCurrentItemMargin: 1.5rem !default;
|
||||
$dockFirstItemsMargin: 1.3rem !default;
|
||||
$dockSecondItemsMargin: 0.9rem !default;
|
||||
$dockBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
|
||||
$dockPadding: 0.5rem 0.5rem !default;
|
||||
$dockBorderRadius: 0.5rem !default;
|
||||
|
||||
//image
|
||||
$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
|
||||
$imagePreviewToolbarPadding: 1rem !default;
|
||||
$imagePreviewIndicatorColor: #f8f9fa !default;
|
||||
$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
|
||||
$imagePreviewActionIconBg: transparent !default;
|
||||
$imagePreviewActionIconColor: #f8f9fa !default;
|
||||
$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
|
||||
$imagePreviewActionIconHoverColor: #f8f9fa !default;
|
||||
$imagePreviewActionIconWidth: 3rem !default;
|
||||
$imagePreviewActionIconHeight: 3rem !default;
|
||||
$imagePreviewActionIconFontSize: 1.5rem !default;
|
||||
$imagePreviewActionIconBorderRadius: 50% !default;
|
||||
|
||||
:root {
|
||||
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
font-variation-settings: normal;
|
||||
--font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
--surface-a: #{$shade800};
|
||||
--surface-b: #{$shade900};
|
||||
--surface-c: #{$hoverBg};
|
||||
--surface-d: #{$shade600};
|
||||
--surface-e: #{$shade800};
|
||||
--surface-f: #{$shade800};
|
||||
--text-color: #{$shade000};
|
||||
--text-color-secondary: #{$shade100};
|
||||
--primary-color: #{$primaryColor};
|
||||
--primary-color-text: #{$primaryTextColor};
|
||||
--surface-0: #{map-get($colors, "htwk-scharz")};
|
||||
--surface-50: #1d2530;
|
||||
--surface-100: #363d47;
|
||||
--surface-200: #4f565e;
|
||||
--surface-300: #686e75;
|
||||
--surface-400: #82868c;
|
||||
--surface-500: #9b9ea3;
|
||||
--surface-600: #b4b6ba;
|
||||
--surface-700: #cdcfd1;
|
||||
--surface-800: #e6e7e8;
|
||||
--surface-900: #ffffff;
|
||||
--gray-50: #e6e7e8;
|
||||
--gray-100: #cdcfd1;
|
||||
--gray-200: #b4b6ba;
|
||||
--gray-300: #9b9ea3;
|
||||
--gray-400: #82868c;
|
||||
--gray-500: #686e75;
|
||||
--gray-600: #4f565e;
|
||||
--gray-700: #363d47;
|
||||
--gray-800: #1d2530;
|
||||
--gray-900: #{map-get($colors, "htwk-scharz")};
|
||||
--content-padding: #{$panelContentPadding};
|
||||
--inline-spacing: #{$inlineSpacing};
|
||||
--border-radius: #{$borderRadius};
|
||||
--surface-ground: #{map-get($colors, "htwk-grau")};
|
||||
--surface-section: #{map-get($colors, "htwk-grau")};
|
||||
--surface-card: #{map-get($colors, "htwk-grau")};
|
||||
--surface-overlay: #{map-get($colors, "htwk-grau")};
|
||||
--surface-border: #{map-get($colors, "htwk-dunkelblau-60")};
|
||||
--surface-hover: rgba(255, 255, 255, 0.03);
|
||||
--focus-ring: #{$focusShadow};
|
||||
--maskbg: #{$maskBg};
|
||||
--highlight-bg: #{$highlightBg};
|
||||
--highlight-text-color: #{$highlightTextColor};
|
||||
color-scheme: dark;
|
||||
background-color: #{map-get($colors, "htwk-grau-140")};
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
$primaryColor: #ffed00 !default;
|
||||
$primaryLightColor: rgba(255, 237, 0, 0.24) !default;
|
||||
$primaryLighterColor: rgba(255, 237, 0, 0.16) !default;
|
||||
$primaryLightestColor: rgba(255, 237, 0, 0.1) !default;
|
||||
$primaryTextColor: #030712 !default;
|
||||
|
||||
$highlightBg: rgba($primaryColor, 0.16) !default;
|
||||
$highlightTextColor: rgba(255,255,255,0.87) !default;
|
||||
$highlightFocusBg: rgba($primaryColor, 0.24) !default;
|
||||
|
||||
@import '../_variables';
|
||||
@import './_fonts';
|
||||
@import '../../../../theme-base/_components';
|
||||
@import '../_extensions';
|
||||
|
||||
:root {
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
@mixin focused-ring($ring-color) {
|
||||
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
@layer primevue {
|
||||
.p-button-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.p-selectbutton > .p-button,
|
||||
.p-togglebutton.p-button {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
|
||||
.p-accordion {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
li {
|
||||
.p-tabview-nav-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
.p-tabmenuitem {
|
||||
.p-menuitem-link {
|
||||
transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-carousel {
|
||||
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria {
|
||||
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
&:focus {
|
||||
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-secondary:enabled:focus {
|
||||
@include focused-ring(scale-color($secondaryButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-success:enabled:focus {
|
||||
@include focused-ring(scale-color($successButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-info:enabled:focus {
|
||||
@include focused-ring(scale-color($infoButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-warning:enabled:focus {
|
||||
@include focused-ring(scale-color($warningButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-help:enabled:focus {
|
||||
@include focused-ring(scale-color($helpButtonBg, $lightness: 50%));
|
||||
}
|
||||
|
||||
&.p-button-danger:enabled:focus {
|
||||
@include focused-ring(scale-color($dangerButtonBg, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $primaryColor;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-item {
|
||||
&.p-focus > .p-speeddial-action {
|
||||
@include focused-ring(scale-color($buttonBg, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
|
||||
.p-toast-message {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.p-inline-message-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p-picklist-buttons .p-button,
|
||||
.p-orderlist-controls .p-button {
|
||||
transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
|
||||
}
|
||||
|
||||
.p-steps {
|
||||
.p-steps-item {
|
||||
&.p-highlight {
|
||||
.p-steps-number {
|
||||
background: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-stepper {
|
||||
.p-stepper-header {
|
||||
&.p-highlight {
|
||||
.p-stepper-number {
|
||||
background: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,909 @@
|
||||
$colors: (
|
||||
"blue": #3B82F6,
|
||||
"green": #22C55E,
|
||||
"yellow": #EAB308,
|
||||
"cyan": #06B6D4,
|
||||
"pink": #EC4899,
|
||||
"indigo": #6366F1,
|
||||
"teal": #14B8A6,
|
||||
"orange": #F97316,
|
||||
"bluegray": #64748B,
|
||||
"purple": #A855F7,
|
||||
"red": #FF3D32,
|
||||
"primary": $primaryColor
|
||||
);
|
||||
|
||||
//reused color variables
|
||||
$shade000:#ffffff !default; //surface
|
||||
$shade100:#f9fafb !default; //header background
|
||||
$shade200:#f3f4f6 !default; //hover background
|
||||
$shade300:#e5e7eb !default; //border, divider
|
||||
$shade400:#d1d5db !default; //input border
|
||||
$shade500:#9ca3af !default; //input icon
|
||||
$shade600:#6b7280 !default; //text secondary color
|
||||
$shade700:#4b5563 !default; //text color
|
||||
$shade800:#374151 !default; //unused
|
||||
$shade900:#1f2937 !default; //unused
|
||||
|
||||
//global
|
||||
$fontFamily:'Inter var', sans-serif !default;
|
||||
$fontSize:1rem !default;
|
||||
$fontWeight:normal !default;
|
||||
$textColor:$shade700 !default;
|
||||
$textSecondaryColor:$shade600 !default;
|
||||
$borderRadius:6px !default;
|
||||
$transitionDuration:.2s !default;
|
||||
$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$listItemTransition:box-shadow $transitionDuration !default;
|
||||
$primeIconFontSize:1rem !default;
|
||||
$divider:1px solid $shade300 !default;
|
||||
$inlineSpacing:.5rem !default;
|
||||
$disabledOpacity:.6 !default;
|
||||
$maskBg:rgba(0, 0, 0, 0.4) !default;
|
||||
$loadingIconFontSize:2rem !default;
|
||||
$errorColor:#e24c4c !default;
|
||||
|
||||
//scale
|
||||
$scaleSM:0.875 !default;
|
||||
$scaleLG:1.25 !default;
|
||||
|
||||
//focus
|
||||
$focusOutlineColor:$primaryLightColor !default;
|
||||
$focusOutline:0 none !default;
|
||||
$focusOutlineOffset:0 !default;
|
||||
$inputFocusOutlineOffset:$focusOutlineOffset !default;
|
||||
$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
||||
|
||||
//action icons
|
||||
$actionIconWidth:2rem !default;
|
||||
$actionIconHeight:2rem !default;
|
||||
$actionIconBg:transparent !default;
|
||||
$actionIconBorder:0 none !default;
|
||||
$actionIconColor:$shade600 !default;
|
||||
$actionIconHoverBg:$shade200 !default;
|
||||
$actionIconHoverBorderColor:transparent !default;
|
||||
$actionIconHoverColor:$shade800 !default;
|
||||
$actionIconBorderRadius:50% !default;
|
||||
|
||||
//input field (e.g. inputtext, spinner, inputmask)
|
||||
$inputPadding:.75rem .75rem !default;
|
||||
$inputTextFontSize:1rem !default;
|
||||
|
||||
$inputBg:$shade000 !default;
|
||||
$inputTextColor:$shade700 !default;
|
||||
$inputIconColor:$shade600 !default;
|
||||
$inputBorder:1px solid $shade400 !default;
|
||||
$inputHoverBorderColor:$primaryColor !default;
|
||||
$inputFocusBorderColor:$primaryColor !default;
|
||||
$inputErrorBorderColor:$errorColor !default;
|
||||
$inputPlaceholderTextColor:$shade600 !default;
|
||||
$inputFilledBg:$shade200 !default;
|
||||
$inputFilledHoverBg:$inputFilledBg !default;
|
||||
$inputFilledFocusBg:$shade000 !default;
|
||||
|
||||
//input groups
|
||||
$inputGroupBg:$shade200 !default;
|
||||
$inputGroupTextColor:$shade600 !default;
|
||||
$inputGroupAddOnMinWidth: 3rem !default;
|
||||
|
||||
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
|
||||
$inputListBg:$shade000 !default;
|
||||
$inputListTextColor:$shade700 !default;
|
||||
$inputListBorder:$inputBorder !default;
|
||||
$inputListPadding:.75rem 0 !default;
|
||||
$inputListItemPadding:.75rem 1.25rem !default;
|
||||
$inputListItemBg:transparent !default;
|
||||
$inputListItemTextColor:$shade700 !default;
|
||||
$inputListItemHoverBg:$shade200 !default;
|
||||
$inputListItemTextHoverColor:$shade700 !default;
|
||||
$inputListItemFocusBg:$shade300 !default;
|
||||
$inputListItemTextFocusColor:$shade700 !default;
|
||||
$inputListItemBorder:0 none !default;
|
||||
$inputListItemBorderRadius:0 !default;
|
||||
$inputListItemMargin:0 !default;
|
||||
$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
|
||||
$inputListHeaderPadding:.75rem 1.25rem !default;
|
||||
$inputListHeaderMargin:0 !default;
|
||||
$inputListHeaderBg:$shade100 !default;
|
||||
$inputListHeaderTextColor:$shade800 !default;
|
||||
$inputListHeaderBorder:1px solid $shade300 !default;
|
||||
|
||||
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
|
||||
$inputOverlayBg:$inputListBg !default;
|
||||
$inputOverlayHeaderBg:$inputListHeaderBg !default;
|
||||
$inputOverlayBorder:0 none !default;
|
||||
$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
|
||||
|
||||
//password
|
||||
$passwordMeterBg:$shade300 !default;
|
||||
$passwordWeakBg:#ea5455 !default;
|
||||
$passwordMediumBg:#ff9f42 !default;
|
||||
$passwordStrongBg:#29c76f !default;
|
||||
|
||||
//button
|
||||
$buttonPadding:.75rem 1.25rem !default;
|
||||
$buttonIconOnlyWidth:3rem !default;
|
||||
$buttonIconOnlyPadding:.75rem 0 !default;
|
||||
$buttonBg:$primaryColor !default;
|
||||
$buttonTextColor:$primaryTextColor !default;
|
||||
$buttonBorder:1px solid $primaryColor !default;
|
||||
$buttonHoverBg:$primaryDarkColor !default;
|
||||
$buttonTextHoverColor:$primaryTextColor !default;
|
||||
$buttonHoverBorderColor:$primaryDarkColor !default;
|
||||
$buttonActiveBg:$primaryDarkerColor !default;
|
||||
$buttonTextActiveColor:$primaryTextColor !default;
|
||||
$buttonActiveBorderColor:$primaryDarkerColor !default;
|
||||
$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$roundedButtonBorderRadius:2rem !default;
|
||||
|
||||
$textButtonHoverBgOpacity:.04 !default;
|
||||
$textButtonActiveBgOpacity:.16 !default;
|
||||
$outlinedButtonBorder:1px solid !default;
|
||||
$plainButtonTextColor:$textSecondaryColor !default;
|
||||
$plainButtonHoverBgColor:$shade200 !default;
|
||||
$plainButtonActiveBgColor:$shade300 !default;
|
||||
|
||||
$secondaryButtonBg:#64748B !default;
|
||||
$secondaryButtonTextColor:#ffffff !default;
|
||||
$secondaryButtonBorder:1px solid #64748B !default;
|
||||
$secondaryButtonHoverBg:#475569 !default;
|
||||
$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
|
||||
$secondaryButtonHoverBorderColor:#475569 !default;
|
||||
$secondaryButtonActiveBg:#334155 !default;
|
||||
$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
|
||||
$secondaryButtonActiveBorderColor:#334155 !default;
|
||||
$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
|
||||
|
||||
$infoButtonBg:#0ea5e9 !default;
|
||||
$infoButtonTextColor:#ffffff !default;
|
||||
$infoButtonBorder:1px solid #0ea5e9 !default;
|
||||
$infoButtonHoverBg:#0284c7 !default;
|
||||
$infoButtonTextHoverColor:$infoButtonTextColor !default;
|
||||
$infoButtonHoverBorderColor:#0284c7 !default;
|
||||
$infoButtonActiveBg:#0369a1 !default;
|
||||
$infoButtonTextActiveColor:$infoButtonTextColor !default;
|
||||
$infoButtonActiveBorderColor:#0369a1 !default;
|
||||
$infoButtonFocusShadow:0 0 0 0.2rem #BFDBFE !default;
|
||||
|
||||
$successButtonBg:#22C55E !default;
|
||||
$successButtonTextColor:#ffffff !default;
|
||||
$successButtonBorder:1px solid #22C55E !default;
|
||||
$successButtonHoverBg:#16A34A !default;
|
||||
$successButtonTextHoverColor:$successButtonTextColor !default;
|
||||
$successButtonHoverBorderColor:#16A34A !default;
|
||||
$successButtonActiveBg:#15803D !default;
|
||||
$successButtonTextActiveColor:$successButtonTextColor !default;
|
||||
$successButtonActiveBorderColor:#15803D !default;
|
||||
$successButtonFocusShadow:0 0 0 0.2rem #BBF7D0 !default;
|
||||
|
||||
$warningButtonBg:#f97316 !default;
|
||||
$warningButtonTextColor:#ffffff !default;
|
||||
$warningButtonBorder:1px solid #f97316 !default;
|
||||
$warningButtonHoverBg:#ea580c !default;
|
||||
$warningButtonTextHoverColor:$warningButtonTextColor !default;
|
||||
$warningButtonHoverBorderColor:#ea580c !default;
|
||||
$warningButtonActiveBg:#c2410c !default;
|
||||
$warningButtonTextActiveColor:$warningButtonTextColor !default;
|
||||
$warningButtonActiveBorderColor:#c2410c !default;
|
||||
$warningButtonFocusShadow:0 0 0 0.2rem #FDE68A !default;
|
||||
|
||||
$helpButtonBg:#A855F7 !default;
|
||||
$helpButtonTextColor:#ffffff !default;
|
||||
$helpButtonBorder:1px solid #A855F7 !default;
|
||||
$helpButtonHoverBg:#9333EA !default;
|
||||
$helpButtonTextHoverColor:$helpButtonTextColor !default;
|
||||
$helpButtonHoverBorderColor:#9333EA !default;
|
||||
$helpButtonActiveBg:#7E22CE !default;
|
||||
$helpButtonTextActiveColor:$helpButtonTextColor !default;
|
||||
$helpButtonActiveBorderColor:#7E22CE !default;
|
||||
$helpButtonFocusShadow:0 0 0 0.2rem #E9D5FF !default;
|
||||
|
||||
$dangerButtonBg:#EF4444 !default;
|
||||
$dangerButtonTextColor:#ffffff !default;
|
||||
$dangerButtonBorder:1px solid $dangerButtonBg !default;
|
||||
$dangerButtonHoverBg:#DC2626 !default;
|
||||
$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
|
||||
$dangerButtonHoverBorderColor:#DC2626 !default;
|
||||
$dangerButtonActiveBg:#B91C1C !default;
|
||||
$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
|
||||
$dangerButtonActiveBorderColor:#B91C1C !default;
|
||||
$dangerButtonFocusShadow:0 0 0 0.2rem #FECACA !default;
|
||||
|
||||
$contrastButtonBg:$shade900 !default;
|
||||
$contrastButtonTextColor:#ffffff !default;
|
||||
$contrastButtonBorder:1px solid $contrastButtonBg !default;
|
||||
$contrastButtonHoverBg:$shade800 !default;
|
||||
$contrastButtonTextHoverColor:$contrastButtonTextColor !default;
|
||||
$contrastButtonHoverBorderColor:$shade800 !default;
|
||||
$contrastButtonActiveBg:$shade700 !default;
|
||||
$contrastButtonTextActiveColor:$contrastButtonTextColor !default;
|
||||
$contrastButtonActiveBorderColor:$shade700 !default;
|
||||
$contrastButtonFocusShadow:none !default;
|
||||
|
||||
$linkButtonColor:$primaryDarkerColor !default;
|
||||
$linkButtonHoverColor:$primaryDarkerColor !default;
|
||||
$linkButtonTextHoverDecoration:underline !default;
|
||||
$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
||||
|
||||
//checkbox
|
||||
$checkboxWidth:22px !default;
|
||||
$checkboxHeight:22px !default;
|
||||
$checkboxBorder:2px solid $shade400 !default;
|
||||
$checkboxIconFontSize:14px !default;
|
||||
$checkboxActiveBorderColor:$primaryColor !default;
|
||||
$checkboxActiveBg:$primaryColor !default;
|
||||
$checkboxIconActiveColor:$primaryTextColor !default;
|
||||
$checkboxActiveHoverBg:$primaryDarkerColor !default;
|
||||
$checkboxIconActiveHoverColor:$primaryTextColor !default;
|
||||
$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
|
||||
|
||||
//radiobutton
|
||||
$radiobuttonWidth:22px !default;
|
||||
$radiobuttonHeight:22px !default;
|
||||
$radiobuttonBorder:2px solid $shade400 !default;
|
||||
$radiobuttonIconSize:12px !default;
|
||||
$radiobuttonActiveBorderColor:$primaryColor !default;
|
||||
$radiobuttonActiveBg:$primaryColor !default;
|
||||
$radiobuttonIconActiveColor:$primaryTextColor !default;
|
||||
$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
|
||||
$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
|
||||
$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
|
||||
|
||||
//colorpicker
|
||||
$colorPickerPreviewWidth:2rem !default;
|
||||
$colorPickerPreviewHeight:2rem !default;
|
||||
$colorPickerBg:#323232 !default;
|
||||
$colorPickerBorder:1px solid #191919 !default;
|
||||
$colorPickerHandleColor:$shade000 !default;
|
||||
|
||||
//togglebutton
|
||||
$toggleButtonBg:$inputBg !default;
|
||||
$toggleButtonBorder:1px solid $shade400 !default;
|
||||
$toggleButtonTextColor:$shade700 !default;
|
||||
$toggleButtonIconColor:$shade600 !default;
|
||||
$toggleButtonHoverBg:$shade200 !default;
|
||||
$toggleButtonHoverBorderColor:$shade400 !default;
|
||||
$toggleButtonTextHoverColor:$shade700 !default;
|
||||
$toggleButtonIconHoverColor:$shade800 !default;
|
||||
$toggleButtonActiveBg:$primaryColor !default;
|
||||
$toggleButtonActiveBorderColor:$primaryColor !default;
|
||||
$toggleButtonTextActiveColor:$primaryTextColor !default;
|
||||
$toggleButtonIconActiveColor:$primaryTextColor !default;
|
||||
$toggleButtonActiveHoverBg:$primaryDarkColor !default;
|
||||
$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
|
||||
$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
|
||||
$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
|
||||
|
||||
//inplace
|
||||
$inplacePadding:$inputPadding !default;
|
||||
$inplaceHoverBg:$shade200 !default;
|
||||
$inplaceTextHoverColor:$shade700 !default;
|
||||
|
||||
//rating
|
||||
$ratingIconFontSize:1.143rem !default;
|
||||
$ratingCancelIconColor:#ea5455 !default;
|
||||
$ratingCancelIconHoverColor:#e73d3e !default;
|
||||
$ratingStarIconOffColor:$shade700 !default;
|
||||
$ratingStarIconOnColor:$primaryColor !default;
|
||||
$ratingStarIconHoverColor:$primaryColor !default;
|
||||
|
||||
//slider
|
||||
$sliderBg:$shade300 !default;
|
||||
$sliderBorder:0 none !default;
|
||||
$sliderHorizontalHeight:.286rem !default;
|
||||
$sliderVerticalWidth:0.286rem !default;
|
||||
$sliderHandleWidth:1.143rem !default;
|
||||
$sliderHandleHeight:1.143rem !default;
|
||||
$sliderHandleBg:$shade000 !default;
|
||||
$sliderHandleBorder:2px solid $primaryColor !default;
|
||||
$sliderHandleBorderRadius:50% !default;
|
||||
$sliderHandleHoverBorderColor:$primaryColor !default;
|
||||
$sliderHandleHoverBg:$primaryColor !default;
|
||||
$sliderRangeBg:$primaryColor !default;
|
||||
|
||||
//calendar
|
||||
$calendarTableMargin:.5rem 0 !default;
|
||||
$calendarPadding:.5rem !default;
|
||||
$calendarBg:$shade000 !default;
|
||||
$calendarInlineBg:$calendarBg !default;
|
||||
$calendarTextColor:$shade700 !default;
|
||||
$calendarBorder:$inputListBorder !default;
|
||||
$calendarOverlayBorder:$inputOverlayBorder !default;
|
||||
|
||||
$calendarHeaderPadding:.5rem !default;
|
||||
$calendarHeaderBg:$shade000 !default;
|
||||
$calendarInlineHeaderBg:$calendarBg !default;
|
||||
$calendarHeaderBorder:1px solid $shade300 !default;
|
||||
$calendarHeaderTextColor:$shade700 !default;
|
||||
$calendarHeaderFontWeight:600 !default;
|
||||
$calendarHeaderCellPadding:.5rem !default;
|
||||
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
|
||||
|
||||
$calendarCellDatePadding:.5rem !default;
|
||||
$calendarCellDateWidth:2.5rem !default;
|
||||
$calendarCellDateHeight:2.5rem !default;
|
||||
$calendarCellDateBorderRadius:50% !default;
|
||||
$calendarCellDateBorder:1px solid transparent !default;
|
||||
$calendarCellDateHoverBg:$shade200 !default;
|
||||
$calendarCellDateTodayBg:$shade400 !default;
|
||||
$calendarCellDateTodayBorderColor:transparent !default;
|
||||
$calendarCellDateTodayTextColor:$shade700 !default;
|
||||
|
||||
$calendarButtonBarPadding:1rem 0 !default;
|
||||
$calendarTimePickerPadding:.5rem !default;
|
||||
$calendarTimePickerElementPadding:0 .5rem !default;
|
||||
$calendarTimePickerTimeFontSize:1.25rem !default;
|
||||
|
||||
$calendarBreakpoint:769px !default;
|
||||
$calendarCellDatePaddingSM:0 !default;
|
||||
|
||||
//input switch
|
||||
$inputSwitchWidth:3rem !default;
|
||||
$inputSwitchHeight:1.75rem !default;
|
||||
$inputSwitchBorderRadius:30px !default;
|
||||
$inputSwitchHandleWidth:1.250rem !default;
|
||||
$inputSwitchHandleHeight:1.250rem !default;
|
||||
$inputSwitchHandleBorderRadius:50% !default;
|
||||
$inputSwitchSliderPadding:.25rem !default;
|
||||
$inputSwitchSliderOffBg:$shade400 !default;
|
||||
$inputSwitchHandleOffBg:$shade000 !default;
|
||||
$inputSwitchSliderOffHoverBg:#b7bcc5 !default;
|
||||
$inputSwitchSliderOnBg:$primaryColor !default;
|
||||
$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
|
||||
$inputSwitchHandleOnBg:$shade000 !default;
|
||||
|
||||
//panel
|
||||
$panelHeaderBorderColor:$shade300 !default;
|
||||
$panelHeaderBorder:1px solid $shade300 !default;
|
||||
$panelHeaderBg:$shade100 !default;
|
||||
$panelHeaderTextColor:$shade800 !default;
|
||||
$panelHeaderFontWeight:700 !default;
|
||||
$panelHeaderPadding:1.25rem !default;
|
||||
$panelToggleableHeaderPadding:.75rem 1.25rem !default;
|
||||
|
||||
$panelHeaderHoverBg:$shade200 !default;
|
||||
$panelHeaderHoverBorderColor:$shade300 !default;
|
||||
$panelHeaderTextHoverColor:$shade800 !default;
|
||||
|
||||
$panelContentBorderColor: $shade300 !default;
|
||||
$panelContentBorder:1px solid $shade300 !default;
|
||||
$panelContentBg:$shade000 !default;
|
||||
$panelContentEvenRowBg:#f8f8fa !default;
|
||||
$panelContentTextColor:$shade700 !default;
|
||||
$panelContentPadding:1.25rem !default;
|
||||
|
||||
$panelFooterBorder:1px solid $shade300 !default;
|
||||
$panelFooterBg:$shade000 !default;
|
||||
$panelFooterTextColor:$shade700 !default;
|
||||
$panelFooterPadding:0.75rem 1.25rem !default;
|
||||
|
||||
//accordion
|
||||
$accordionSpacing:4px !default;
|
||||
$accordionHeaderBorder:$panelHeaderBorder !default;
|
||||
$accordionHeaderBg:$panelHeaderBg !default;
|
||||
$accordionHeaderTextColor:$shade600 !default;
|
||||
$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
|
||||
$accordionHeaderPadding:$panelHeaderPadding !default;
|
||||
|
||||
$accordionHeaderHoverBg:$shade200 !default;
|
||||
$accordionHeaderHoverBorderColor:$shade300 !default;
|
||||
$accordionHeaderTextHoverColor:$shade800 !default;
|
||||
|
||||
$accordionHeaderActiveBg:$panelHeaderBg !default;
|
||||
$accordionHeaderActiveBorderColor:$shade300 !default;
|
||||
$accordionHeaderTextActiveColor:$shade800 !default;
|
||||
|
||||
$accordionHeaderActiveHoverBg:$shade200 !default;
|
||||
$accordionHeaderActiveHoverBorderColor:$shade300 !default;
|
||||
$accordionHeaderTextActiveHoverColor:$shade800 !default;
|
||||
|
||||
$accordionContentBorder:$panelContentBorder !default;
|
||||
$accordionContentBg:$panelContentBg !default;
|
||||
$accordionContentTextColor:$panelContentTextColor !default;
|
||||
$accordionContentPadding:$panelContentPadding !default;
|
||||
|
||||
//tabview
|
||||
$tabviewNavBorder:1px solid $shade300 !default;
|
||||
$tabviewNavBorderWidth:0 0 2px 0 !default;
|
||||
$tabviewNavBg:$shade000 !default;
|
||||
|
||||
$tabviewHeaderSpacing:0 !default;
|
||||
$tabviewHeaderBorder:solid $shade300 !default;
|
||||
$tabviewHeaderBorderWidth:0 0 2px 0 !default;
|
||||
$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
|
||||
$tabviewHeaderBg:$shade000 !default;
|
||||
$tabviewHeaderTextColor:$shade600 !default;
|
||||
$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
|
||||
$tabviewHeaderPadding:$panelHeaderPadding !default;
|
||||
$tabviewHeaderMargin:0 0 -2px 0 !default;
|
||||
|
||||
$tabviewHeaderHoverBg:$shade000 !default;
|
||||
$tabviewHeaderHoverBorderColor:$shade500 !default;
|
||||
$tabviewHeaderTextHoverColor:$shade600 !default;
|
||||
|
||||
$tabviewHeaderActiveBg:$shade000 !default;
|
||||
$tabviewHeaderActiveBorderColor:$primaryColor !default;
|
||||
$tabviewHeaderTextActiveColor:$primaryColor !default;
|
||||
|
||||
$tabviewContentBorder:0 none !default;
|
||||
$tabviewContentBg:$panelContentBg !default;
|
||||
$tabviewContentTextColor:$panelContentTextColor !default;
|
||||
$tabviewContentPadding:$panelContentPadding !default;
|
||||
|
||||
//upload
|
||||
$fileUploadProgressBarHeight:.25rem !default;
|
||||
$fileUploadContentPadding: 2rem 1rem !default;
|
||||
$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
|
||||
$fileUploadFileBorder: 1px solid $shade300 !default;
|
||||
$fileUploadFilePadding: 1rem !default;
|
||||
|
||||
//scrollpanel
|
||||
$scrollPanelTrackBorder:0 none !default;
|
||||
$scrollPanelTrackBg:$shade100 !default;
|
||||
|
||||
//card
|
||||
$cardBodyPadding:1.25rem !default;
|
||||
$cardTitleFontSize:1.5rem !default;
|
||||
$cardTitleFontWeight:700 !default;
|
||||
$cardSubTitleFontWeight:400 !default;
|
||||
$cardSubTitleColor:$shade600 !default;
|
||||
$cardContentPadding:1.25rem 0 !default;
|
||||
$cardFooterPadding:1.25rem 0 0 0 !default;
|
||||
$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
|
||||
|
||||
//editor
|
||||
$editorToolbarBg:$panelHeaderBg !default;
|
||||
$editorToolbarBorder:$panelHeaderBorder !default;
|
||||
$editorToolbarPadding:$panelHeaderPadding !default;
|
||||
$editorToolbarIconColor:$textSecondaryColor !default;
|
||||
$editorToolbarIconHoverColor:$textColor !default;
|
||||
$editorIconActiveColor:$primaryColor !default;
|
||||
$editorContentBorder:$panelContentBorder !default;
|
||||
$editorContentBg:$panelContentBg !default;
|
||||
|
||||
//paginator
|
||||
$paginatorBg:$shade000 !default;
|
||||
$paginatorTextColor:$shade600 !default;
|
||||
$paginatorBorder:solid $shade200 !default;
|
||||
$paginatorBorderWidth:0 !default;
|
||||
$paginatorPadding:.5rem 1rem !default;
|
||||
$paginatorElementWidth:$buttonIconOnlyWidth !default;
|
||||
$paginatorElementHeight:$buttonIconOnlyWidth !default;
|
||||
$paginatorElementBg:transparent !default;
|
||||
$paginatorElementBorder:0 none !default;
|
||||
$paginatorElementIconColor:$shade600 !default;
|
||||
$paginatorElementHoverBg:$shade200 !default;
|
||||
$paginatorElementHoverBorderColor:transparent !default;
|
||||
$paginatorElementIconHoverColor:$shade800 !default;
|
||||
$paginatorElementBorderRadius:50% !default;
|
||||
$paginatorElementMargin:.143rem !default;
|
||||
$paginatorElementPadding:0 !default;
|
||||
|
||||
//table
|
||||
$tableHeaderBorder:1px solid $shade300 !default;
|
||||
$tableHeaderBorderWidth:1px 0 1px 0 !default;
|
||||
$tableHeaderBg:$shade100 !default;
|
||||
$tableHeaderTextColor:$shade800 !default;
|
||||
$tableHeaderFontWeight:700 !default;
|
||||
$tableHeaderPadding:1rem 1rem !default;
|
||||
|
||||
$tableHeaderCellPadding:1rem 1rem !default;
|
||||
$tableHeaderCellBg:$shade100 !default;
|
||||
$tableHeaderCellTextColor:$shade800 !default;
|
||||
$tableHeaderCellFontWeight:700 !default;
|
||||
$tableHeaderCellBorder:1px solid $shade300 !default;
|
||||
$tableHeaderCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableHeaderCellHoverBg:$shade200 !default;
|
||||
$tableHeaderCellTextHoverColor:$shade800 !default;
|
||||
$tableHeaderCellIconColor:$shade800 !default;
|
||||
$tableHeaderCellIconHoverColor:$shade800 !default;
|
||||
$tableHeaderCellHighlightBg:$highlightBg !default;
|
||||
$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
|
||||
$tableHeaderCellHighlightHoverBg:$highlightBg !default;
|
||||
$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
|
||||
$tableSortableColumnBadgeSize:1.143rem !default;
|
||||
|
||||
$tableBodyRowBg:$shade000 !default;
|
||||
$tableBodyRowTextColor:$shade700 !default;
|
||||
$tableBodyRowEvenBg:#f8f8fa !default;
|
||||
$tableBodyRowHoverBg:$shade200 !default;
|
||||
$tableBodyRowTextHoverColor:$shade700 !default;
|
||||
$tableBodyCellBorder:1px solid $shade300 !default;
|
||||
$tableBodyCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableBodyCellPadding:1rem 1rem !default;
|
||||
|
||||
$tableFooterCellPadding:1rem 1rem !default;
|
||||
$tableFooterCellBg:$shade100 !default;
|
||||
$tableFooterCellTextColor:$shade800 !default;
|
||||
$tableFooterCellFontWeight:700 !default;
|
||||
$tableFooterCellBorder:1px solid $shade300 !default;
|
||||
$tableFooterCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableResizerHelperBg:$primaryColor !default;
|
||||
|
||||
$tableFooterBorder:1px solid $shade300 !default;
|
||||
$tableFooterBorderWidth:0 0 1px 0 !default;
|
||||
$tableFooterBg:$shade100 !default;
|
||||
$tableFooterTextColor:$shade800 !default;
|
||||
$tableFooterFontWeight:700 !default;
|
||||
$tableFooterPadding:1rem 1rem !default;
|
||||
|
||||
$tableCellContentAlignment:left !default;
|
||||
$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
|
||||
$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
|
||||
|
||||
$tableScaleSM:0.5 !default;
|
||||
$tableScaleLG:1.25 !default;
|
||||
|
||||
//dataview
|
||||
$dataViewContentPadding:0 !default;
|
||||
$dataViewContentBorder:0 none !default;
|
||||
|
||||
//tree
|
||||
$treeContainerPadding:0.286rem !default;
|
||||
$treeNodePadding:0.143rem !default;
|
||||
$treeNodeContentPadding:.5rem !default;
|
||||
$treeNodeChildrenPadding:0 0 0 1rem !default;
|
||||
$treeNodeIconColor:$shade600 !default;
|
||||
|
||||
//timeline
|
||||
$timelineVerticalEventContentPadding:0 1rem !default;
|
||||
$timelineHorizontalEventContentPadding:1rem 0 !default;
|
||||
$timelineEventMarkerWidth:1rem !default;
|
||||
$timelineEventMarkerHeight:1rem !default;
|
||||
$timelineEventMarkerBorderRadius:50% !default;
|
||||
$timelineEventMarkerBorder:2px solid $primaryColor !default;
|
||||
$timelineEventMarkerBackground:$primaryTextColor !default;
|
||||
$timelineEventConnectorSize:2px !default;
|
||||
$timelineEventColor:$shade300 !default;
|
||||
|
||||
//org chart
|
||||
$organizationChartConnectorColor:$shade300 !default;
|
||||
|
||||
//message
|
||||
$messageMargin:1rem 0 !default;
|
||||
$messagePadding:1.25rem 1.75rem !default;
|
||||
$messageBorderWidth:0 0 0 6px !default;
|
||||
$messageIconFontSize:1.5rem !default;
|
||||
$messageTextFontSize:1rem !default;
|
||||
$messageTextFontWeight:500 !default;
|
||||
|
||||
//inline message
|
||||
$inlineMessagePadding:$inputPadding !default;
|
||||
$inlineMessageMargin:0 !default;
|
||||
$inlineMessageIconFontSize:1rem !default;
|
||||
$inlineMessageTextFontSize:1rem !default;
|
||||
$inlineMessageBorderWidth:0px !default;
|
||||
|
||||
//toast
|
||||
$toastIconFontSize:2rem !default;
|
||||
$toastMessageTextMargin:0 0 0 1rem !default;
|
||||
$toastMargin:0 0 1rem 0 !default;
|
||||
$toastPadding:1rem !default;
|
||||
$toastBorderWidth:0 0 0 6px !default;
|
||||
$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
|
||||
$toastOpacity:1 !default;
|
||||
$toastTitleFontWeight:700 !default;
|
||||
$toastDetailMargin:$inlineSpacing 0 0 0 !default;
|
||||
|
||||
//severities
|
||||
$infoMessageBg:rgba(219, 234, 254, .7) !default;
|
||||
$infoMessageBorder:solid #3b82f6 !default;
|
||||
$infoMessageTextColor:#3b82f6 !default;
|
||||
$infoMessageIconColor:#3b82f6 !default;
|
||||
$successMessageBg:rgba(228, 248, 240, .7) !default;
|
||||
$successMessageBorder:solid #1ea97c !default;
|
||||
$successMessageTextColor:#1ea97c !default;
|
||||
$successMessageIconColor:#1ea97c !default;
|
||||
$warningMessageBg:rgba(255, 242, 226, .7) !default;
|
||||
$warningMessageBorder:solid #cc8925 !default;
|
||||
$warningMessageTextColor:#cc8925 !default;
|
||||
$warningMessageIconColor:#cc8925 !default;
|
||||
$errorMessageBg:rgba(255, 231, 230, .7) !default;
|
||||
$errorMessageBorder:solid #ff5757 !default;
|
||||
$errorMessageTextColor:#ff5757 !default;
|
||||
$errorMessageIconColor:#ff5757 !default;
|
||||
$secondaryMessageBg:$secondaryButtonBg !default;
|
||||
$secondaryMessageBorder: solid $secondaryButtonBg !default;
|
||||
$secondaryMessageTextColor: $secondaryButtonTextColor !default;
|
||||
$secondaryMessageIconColor: $secondaryButtonTextColor !default;
|
||||
$contrastMessageBg: $contrastButtonBg !default;
|
||||
$contrastMessageBorder: solid $contrastButtonBg !default;
|
||||
$contrastMessageTextColor: $contrastButtonTextColor !default;
|
||||
$contrastMessageIconColor: $contrastButtonTextColor !default;
|
||||
|
||||
//overlays
|
||||
$overlayContentBorder:0 none !default;
|
||||
$overlayContentBg:$panelContentBg !default;
|
||||
$overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
|
||||
|
||||
//dialog
|
||||
$dialogHeaderBg:$shade000 !default;
|
||||
$dialogHeaderBorder:0 none !default;
|
||||
$dialogHeaderTextColor:$shade800 !default;
|
||||
$dialogHeaderFontWeight:700 !default;
|
||||
$dialogHeaderFontSize:1.25rem !default;
|
||||
$dialogHeaderPadding:1.5rem !default;
|
||||
$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
|
||||
$dialogFooterBorder:0 none !default;
|
||||
$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
|
||||
|
||||
//confirmpopup
|
||||
$confirmPopupContentPadding:$panelContentPadding !default;
|
||||
$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
|
||||
|
||||
//tooltip
|
||||
$tooltipBg:$shade700 !default;
|
||||
$tooltipTextColor:$shade000 !default;
|
||||
$tooltipPadding:$inputPadding !default;
|
||||
|
||||
//steps
|
||||
$stepsItemBg:$shade000 !default;
|
||||
$stepsItemBorder:1px solid $shade200 !default;
|
||||
$stepsItemTextColor:$shade600 !default;
|
||||
$stepsItemNumberWidth:2rem !default;
|
||||
$stepsItemNumberHeight:2rem !default;
|
||||
$stepsItemNumberFontSize:1.143rem !default;
|
||||
$stepsItemNumberColor:$shade700 !default;
|
||||
$stepsItemNumberBorderRadius:50% !default;
|
||||
$stepsItemActiveFontWeight:700 !default;
|
||||
|
||||
//progressbar, progressspinner
|
||||
$progressBarHeight:1.5rem !default;
|
||||
$progressBarBorder:0 none !default;
|
||||
$progressBarBg:$shade300 !default;
|
||||
$progressBarValueBg:$primaryColor !default;
|
||||
$progressBarValueTextColor:$primaryTextColor !default;
|
||||
|
||||
$progressSpinnerStrokeColor:$errorMessageTextColor !default;
|
||||
$progressSpinnerColorOne:$errorMessageTextColor !default;
|
||||
$progressSpinnerColorTwo:$infoMessageTextColor !default;
|
||||
$progressSpinnerColorThree:$successMessageTextColor !default;
|
||||
$progressSpinnerColorFour:$warningMessageTextColor !default;
|
||||
|
||||
//menu (e.g. menu, menubar, tieredmenu)
|
||||
$menuWidth:12.5rem !default;
|
||||
$menuBg:$shade000 !default;
|
||||
$menuBorder:1px solid $shade300 !default;
|
||||
$menuTextColor:$shade700 !default;
|
||||
$menuitemPadding:.75rem 1.25rem !default;
|
||||
$menuitemBorderRadius:0 !default;
|
||||
$menuitemTextColor:$shade700 !default;
|
||||
$menuitemIconColor:$shade600 !default;
|
||||
$menuitemTextHoverColor:$shade700 !default;
|
||||
$menuitemIconHoverColor:$shade600 !default;
|
||||
$menuitemHoverBg:$shade200 !default;
|
||||
$menuitemTextFocusColor:$shade700 !default;
|
||||
$menuitemIconFocusColor:$shade700 !default;
|
||||
$menuitemFocusBg:$shade300 !default;
|
||||
$menuitemTextActiveColor:$highlightTextColor !default;
|
||||
$menuitemIconActiveColor:$highlightTextColor !default;
|
||||
$menuitemActiveBg:$highlightBg !default;
|
||||
$menuitemActiveFocusBg:$highlightFocusBg !default;
|
||||
$menuitemSubmenuIconFontSize:.875rem !default;
|
||||
$submenuHeaderMargin:0 !default;
|
||||
$submenuHeaderPadding:.75rem 1.25rem !default;
|
||||
$submenuHeaderBg:$shade000 !default;
|
||||
$submenuHeaderTextColor:$shade800 !default;
|
||||
$submenuHeaderBorderRadius:0 !default;
|
||||
$submenuHeaderFontWeight:700 !default;
|
||||
$overlayMenuBg:$menuBg !default;
|
||||
$overlayMenuBorder:0 none !default;
|
||||
$overlayMenuShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
|
||||
$verticalMenuPadding:.5rem 0 !default;
|
||||
$menuSeparatorMargin:.25rem 0 !default;
|
||||
|
||||
$breadcrumbPadding:1rem !default;
|
||||
$breadcrumbBg:$menuBg !default;
|
||||
$breadcrumbBorder:$menuBorder !default;
|
||||
$breadcrumbItemTextColor:$menuitemTextColor !default;
|
||||
$breadcrumbItemIconColor:$menuitemIconColor !default;
|
||||
$breadcrumbLastItemTextColor:$menuitemTextColor !default;
|
||||
$breadcrumbLastItemIconColor:$menuitemIconColor !default;
|
||||
$breadcrumbSeparatorColor:$menuitemTextColor !default;
|
||||
|
||||
$horizontalMenuPadding:.5rem !default;
|
||||
$horizontalMenuBg:$shade100 !default;
|
||||
$horizontalMenuBorder:$menuBorder !default;
|
||||
$horizontalMenuTextColor:$menuTextColor !default;
|
||||
$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
|
||||
$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
|
||||
$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
|
||||
$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
|
||||
$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
|
||||
$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
|
||||
$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
|
||||
$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
|
||||
$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
|
||||
$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
|
||||
|
||||
//badge and tag
|
||||
$badgeBg:$primaryColor !default;
|
||||
$badgeTextColor:$primaryTextColor !default;
|
||||
$badgeMinWidth:1.5rem !default;
|
||||
$badgeHeight:1.5rem !default;
|
||||
$badgeFontWeight:700 !default;
|
||||
$badgeFontSize:.75rem !default;
|
||||
|
||||
$tagPadding:.25rem .4rem !default;
|
||||
|
||||
//carousel
|
||||
$carouselIndicatorsPadding:1rem !default;
|
||||
$carouselIndicatorBg:$shade400 !default;
|
||||
$carouselIndicatorHoverBg:$shade500 !default;
|
||||
$carouselIndicatorBorderRadius:0 !default;
|
||||
$carouselIndicatorWidth:2rem !default;
|
||||
$carouselIndicatorHeight:.5rem !default;
|
||||
|
||||
//galleria
|
||||
$galleriaMaskBg:rgba(0,0,0,0.9) !default;
|
||||
$galleriaCloseIconMargin:.5rem !default;
|
||||
$galleriaCloseIconFontSize:2rem !default;
|
||||
$galleriaCloseIconBg:transparent !default;
|
||||
$galleriaCloseIconColor:$shade100 !default;
|
||||
$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaCloseIconHoverColor:$shade100 !default;
|
||||
$galleriaCloseIconWidth:4rem !default;
|
||||
$galleriaCloseIconHeight:4rem !default;
|
||||
$galleriaCloseIconBorderRadius:50% !default;
|
||||
|
||||
$galleriaItemNavigatorBg:transparent !default;
|
||||
$galleriaItemNavigatorColor:$shade100 !default;
|
||||
$galleriaItemNavigatorMargin:0 .5rem !default;
|
||||
$galleriaItemNavigatorFontSize:2rem !default;
|
||||
$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaItemNavigatorHoverColor:$shade100 !default;
|
||||
$galleriaItemNavigatorWidth:4rem !default;
|
||||
$galleriaItemNavigatorHeight:4rem !default;
|
||||
$galleriaItemNavigatorBorderRadius:$borderRadius !default;
|
||||
|
||||
$galleriaCaptionBg:rgba(0,0,0,.5) !default;
|
||||
$galleriaCaptionTextColor:$shade100 !default;
|
||||
$galleriaCaptionPadding:1rem !default;
|
||||
|
||||
$galleriaIndicatorsPadding:1rem !default;
|
||||
$galleriaIndicatorBg:$shade400 !default;
|
||||
$galleriaIndicatorHoverBg:$shade500 !default;
|
||||
$galleriaIndicatorBorderRadius:50% !default;
|
||||
$galleriaIndicatorWidth:1rem !default;
|
||||
$galleriaIndicatorHeight:1rem !default;
|
||||
$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
|
||||
$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
|
||||
$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
|
||||
|
||||
$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
|
||||
$galleriaThumbnailContainerPadding:1rem .25rem !default;
|
||||
$galleriaThumbnailNavigatorBg:transparent !default;
|
||||
$galleriaThumbnailNavigatorColor:$shade100 !default;
|
||||
$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
|
||||
$galleriaThumbnailNavigatorBorderRadius:50% !default;
|
||||
$galleriaThumbnailNavigatorWidth:2rem !default;
|
||||
$galleriaThumbnailNavigatorHeight:2rem !default;
|
||||
|
||||
//divider
|
||||
$dividerHorizontalMargin:1.25rem 0 !default;
|
||||
$dividerHorizontalPadding:0 1.25rem !default;
|
||||
$dividerVerticalMargin:0 1.25rem !default;
|
||||
$dividerVerticalPadding:1.25rem 0 !default;
|
||||
$dividerSize:1px !default;
|
||||
$dividerColor:$shade300 !default;
|
||||
|
||||
//avatar
|
||||
$avatarBg:$shade300 !default;
|
||||
$avatarTextColor:$textColor !default;
|
||||
|
||||
//chip
|
||||
$chipBg:$shade300 !default;
|
||||
$chipTextColor:$textColor !default;
|
||||
$chipBorderRadius: 16px !default;
|
||||
$chipFocusBg:$shade300 !default;
|
||||
$chipFocusTextColor:$textColor !default;
|
||||
|
||||
//scrollTop
|
||||
$scrollTopBg:rgba(0,0,0,0.7) !default;
|
||||
$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
|
||||
$scrollTopWidth:3rem !default;
|
||||
$scrollTopHeight:3rem !default;
|
||||
$scrollTopBorderRadius:50% !default;
|
||||
$scrollTopFontSize:1.5rem !default;
|
||||
$scrollTopTextColor:$shade100 !default;
|
||||
|
||||
//skeleton
|
||||
$skeletonBg:$shade300 !default;
|
||||
$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
|
||||
|
||||
//splitter
|
||||
$splitterGutterBg:$shade100 !default;
|
||||
$splitterGutterHandleBg:$shade300 !default;
|
||||
|
||||
//speeddial
|
||||
$speedDialButtonWidth: 4rem !default;
|
||||
$speedDialButtonHeight: 4rem !default;
|
||||
$speedDialButtonIconFontSize: 1.3rem !default;
|
||||
$speedDialActionWidth: 3rem !default;
|
||||
$speedDialActionHeight: 3rem !default;
|
||||
$speedDialActionBg: $shade700 !default;
|
||||
$speedDialActionHoverBg: #022354 !default;
|
||||
$speedDialActionTextColor: #fff !default;
|
||||
$speedDialActionTextHoverColor: #fff !default;
|
||||
|
||||
//dock
|
||||
$dockActionWidth: 4rem !default;
|
||||
$dockActionHeight: 4rem !default;
|
||||
$dockItemPadding: .5rem !default;
|
||||
$dockItemBorderRadius:$borderRadius !default;
|
||||
$dockCurrentItemMargin: 1.5rem !default;
|
||||
$dockFirstItemsMargin: 1.3rem !default;
|
||||
$dockSecondItemsMargin: 0.9rem !default;
|
||||
$dockBg: rgba(255,255,255,.1) !default;
|
||||
$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
|
||||
$dockPadding: .5rem .5rem !default;
|
||||
$dockBorderRadius: .5rem !default;
|
||||
|
||||
//image
|
||||
$imageMaskBg:rgba(0,0,0,0.9) !default;
|
||||
$imagePreviewToolbarPadding:1rem !default;
|
||||
$imagePreviewIndicatorColor:#f8f9fa !default;
|
||||
$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
|
||||
$imagePreviewActionIconBg:transparent !default;
|
||||
$imagePreviewActionIconColor:#f8f9fa !default;
|
||||
$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$imagePreviewActionIconHoverColor:#f8f9fa !default;
|
||||
$imagePreviewActionIconWidth:3rem !default;
|
||||
$imagePreviewActionIconHeight:3rem !default;
|
||||
$imagePreviewActionIconFontSize:1.5rem !default;
|
||||
$imagePreviewActionIconBorderRadius:50% !default;
|
||||
|
||||
:root {
|
||||
font-family:'Inter var', sans-serif;
|
||||
font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||
font-variation-settings: normal;
|
||||
--font-family:'Inter var', sans-serif;
|
||||
--font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||
--surface-a:#{$shade000};
|
||||
--surface-b:#{$shade100};
|
||||
--surface-c:#{$shade200};
|
||||
--surface-d:#{$shade300};
|
||||
--surface-e:#{$shade000};
|
||||
--surface-f:#{$shade000};
|
||||
--text-color:#{$shade700};
|
||||
--text-color-secondary:#{$shade600};
|
||||
--primary-color:#{$primaryColor};
|
||||
--primary-color-text:#{$primaryTextColor};
|
||||
--surface-0: #ffffff;
|
||||
--surface-50: #f9fafb;
|
||||
--surface-100: #f3f4f6;
|
||||
--surface-200: #e5e7eb;
|
||||
--surface-300: #d1d5db;
|
||||
--surface-400: #9ca3af;
|
||||
--surface-500: #6b7280;
|
||||
--surface-600: #4b5563;
|
||||
--surface-700: #374151;
|
||||
--surface-800: #1f2937;
|
||||
--surface-900: #111827;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--content-padding:#{$panelContentPadding};
|
||||
--inline-spacing:#{$inlineSpacing};
|
||||
--border-radius:#{$borderRadius};
|
||||
--surface-ground:#f9fafb;
|
||||
--surface-section:#ffffff;
|
||||
--surface-card:#ffffff;
|
||||
--surface-overlay:#ffffff;
|
||||
--surface-border:#dfe7ef;
|
||||
--surface-hover:#f6f9fc;
|
||||
--focus-ring: #{$focusShadow};
|
||||
--maskbg: #{$maskBg};
|
||||
--highlight-bg: #{$highlightBg};
|
||||
--highlight-text-color: #{$highlightTextColor};
|
||||
color-scheme: light;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,14 @@
|
||||
$primaryColor: #3B82F6 !default;
|
||||
$primaryLightColor: #BFDBFE !default;
|
||||
$primaryDarkColor: #2563eb !default;
|
||||
$primaryDarkerColor: #1D4ED8 !default;
|
||||
$primaryTextColor: #ffffff !default;
|
||||
|
||||
$highlightBg: #EFF6FF !default;
|
||||
$highlightTextColor: $primaryDarkerColor !default;
|
||||
$highlightFocusBg: rgba($primaryColor, .24) !default;
|
||||
|
||||
@import '../_variables';
|
||||
@import './_fonts';
|
||||
@import '../../../../theme-base/_components';
|
||||
@import '../_extensions';
|
||||
Reference in New Issue
Block a user