diff --git a/frappe/hooks.py b/frappe/hooks.py index 037c074f9f..86e251f9b3 100644 --- a/frappe/hooks.py +++ b/frappe/hooks.py @@ -47,9 +47,7 @@ web_include_js = [ "website_script.js" ] -web_include_css = [ - "assets/css/frappe-web-b4.css" -] +web_include_css = [] website_route_rules = [ {"from_route": "/blog/", "to_route": "Blog Post"}, diff --git a/frappe/public/js/frappe/form/controls/code.js b/frappe/public/js/frappe/form/controls/code.js index 7b9bb4e9ae..256a44e106 100644 --- a/frappe/public/js/frappe/form/controls/code.js +++ b/frappe/public/js/frappe/form/controls/code.js @@ -31,7 +31,8 @@ frappe.ui.form.ControlCode = frappe.ui.form.ControlText.extend({ 'JS': 'ace/mode/javascript', 'HTML': 'ace/mode/html', 'CSS': 'ace/mode/css', - 'Markdown': 'ace/mode/markdown' + 'Markdown': 'ace/mode/markdown', + 'SCSS': 'ace/mode/scss' }; const language = this.df.options; diff --git a/frappe/public/scss/css_variables.scss b/frappe/public/scss/css_variables.scss deleted file mode 100644 index 259e8caf64..0000000000 --- a/frappe/public/scss/css_variables.scss +++ /dev/null @@ -1,592 +0,0 @@ -$white: var(--white, $white); -$gray-100: var(--gray-100, $gray-100); -$gray-200: var(--gray-200, $gray-200); -$gray-300: var(--gray-300, $gray-300); -$gray-400: var(--gray-400, $gray-400); -$gray-500: var(--gray-500, $gray-500); -$gray-600: var(--gray-600, $gray-600); -$gray-700: var(--gray-700, $gray-700); -$gray-800: var(--gray-800, $gray-800); -$gray-900: var(--gray-900, $gray-900); -$black: var(--black, $black); -$blue: var(--blue, $blue); -$indigo: var(--indigo, $indigo); -$purple: var(--purple, $purple); -$pink: var(--pink, $pink); -$red: var(--red, $red); -$orange: var(--orange, $orange); -$yellow: var(--yellow, $yellow); -$green: var(--green, $green); -$teal: var(--teal, $teal); -$cyan: var(--cyan, $cyan); -$primary: var(--primary, $primary); -$secondary: var(--secondary, $secondary); -$success: var(--success, $success); -$info: var(--info, $info); -$warning: var(--warning, $warning); -$danger: var(--danger, $danger); -$light: var(--light, $light); -$dark: var(--dark, $dark); -$spacer: var(--spacer, $spacer); -$body-bg: var(--body-bg, $body-bg); -$body-color: var(--body-color, $body-color); -$link-color: var(--link-color, $link-color); -$link-decoration: var(--link-decoration, $link-decoration); -$link-hover-color: var(--link-hover-color, $link-hover-color); -$link-hover-decoration: var(--link-hover-decoration, $link-hover-decoration); -$emphasized-link-hover-darken-percentage: var(--emphasized-link-hover-darken-percentage, $emphasized-link-hover-darken-percentage); -$paragraph-margin-bottom: var(--paragraph-margin-bottom, $paragraph-margin-bottom); -$grid-gutter-width: var(--grid-gutter-width, $grid-gutter-width); -$line-height-lg: var(--line-height-lg, $line-height-lg); -$line-height-sm: var(--line-height-sm, $line-height-sm); -$border-width: var(--border-width, $border-width); -$border-color: var(--border-color, $border-color); -$border-radius: var(--border-radius, $border-radius); -$border-radius-lg: var(--border-radius-lg, $border-radius-lg); -$border-radius-sm: var(--border-radius-sm, $border-radius-sm); -$rounded-pill: var(--rounded-pill, $rounded-pill); -$box-shadow-sm: var(--box-shadow-sm, $box-shadow-sm); -$box-shadow: var(--box-shadow, $box-shadow); -$box-shadow-lg: var(--box-shadow-lg, $box-shadow-lg); -$component-active-color: var(--component-active-color, $component-active-color); -$component-active-bg: var(--component-active-bg, $component-active-bg); -$caret-width: var(--caret-width, $caret-width); -$transition-base: var(--transition-base, $transition-base); -$transition-fade: var(--transition-fade, $transition-fade); -$transition-collapse: var(--transition-collapse, $transition-collapse); -$font-family-sans-serif: var(--font-family-sans-serif, $font-family-sans-serif); -$font-family-monospace: var(--font-family-monospace, $font-family-monospace); -$font-family-base: var(--font-family-base, $font-family-base); -$font-size-lg: var(--font-size-lg, $font-size-lg); -$font-size-sm: var(--font-size-sm, $font-size-sm); -$font-weight-lighter: var(--font-weight-lighter, $font-weight-lighter); -$font-weight-light: var(--font-weight-light, $font-weight-light); -$font-weight-normal: var(--font-weight-normal, $font-weight-normal); -$font-weight-bold: var(--font-weight-bold, $font-weight-bold); -$font-weight-bolder: var(--font-weight-bolder, $font-weight-bolder); -$font-weight-base: var(--font-weight-base, $font-weight-base); -$line-height-base: var(--line-height-base, $line-height-base); -$h1-font-size: var(--h1-font-size, $h1-font-size); -$h2-font-size: var(--h2-font-size, $h2-font-size); -$h3-font-size: var(--h3-font-size, $h3-font-size); -$h4-font-size: var(--h4-font-size, $h4-font-size); -$h5-font-size: var(--h5-font-size, $h5-font-size); -$h6-font-size: var(--h6-font-size, $h6-font-size); -$headings-margin-bottom: var(--headings-margin-bottom, $headings-margin-bottom); -$headings-font-family: var(--headings-font-family, $headings-font-family); -$headings-font-weight: var(--headings-font-weight, $headings-font-weight); -$headings-line-height: var(--headings-line-height, $headings-line-height); -$headings-color: var(--headings-color, $headings-color); -$display1-size: var(--display1-size, $display1-size); -$display2-size: var(--display2-size, $display2-size); -$display3-size: var(--display3-size, $display3-size); -$display4-size: var(--display4-size, $display4-size); -$display1-weight: var(--display1-weight, $display1-weight); -$display2-weight: var(--display2-weight, $display2-weight); -$display3-weight: var(--display3-weight, $display3-weight); -$display4-weight: var(--display4-weight, $display4-weight); -$display-line-height: var(--display-line-height, $display-line-height); -$lead-font-size: var(--lead-font-size, $lead-font-size); -$lead-font-weight: var(--lead-font-weight, $lead-font-weight); -$small-font-size: var(--small-font-size, $small-font-size); -$text-muted: var(--text-muted, $text-muted); -$blockquote-small-color: var(--blockquote-small-color, $blockquote-small-color); -$blockquote-small-font-size: var(--blockquote-small-font-size, $blockquote-small-font-size); -$blockquote-font-size: var(--blockquote-font-size, $blockquote-font-size); -$hr-border-color: var(--hr-border-color, $hr-border-color); -$hr-border-width: var(--hr-border-width, $hr-border-width); -$mark-padding: var(--mark-padding, $mark-padding); -$dt-font-weight: var(--dt-font-weight, $dt-font-weight); -$kbd-box-shadow: var(--kbd-box-shadow, $kbd-box-shadow); -$nested-kbd-font-weight: var(--nested-kbd-font-weight, $nested-kbd-font-weight); -$list-inline-padding: var(--list-inline-padding, $list-inline-padding); -$mark-bg: var(--mark-bg, $mark-bg); -$hr-margin-y: var(--hr-margin-y, $hr-margin-y); -$table-cell-padding: var(--table-cell-padding, $table-cell-padding); -$table-cell-padding-sm: var(--table-cell-padding-sm, $table-cell-padding-sm); -$table-bg: var(--table-bg, $table-bg); -$table-accent-bg: var(--table-accent-bg, $table-accent-bg); -$table-hover-bg: var(--table-hover-bg, $table-hover-bg); -$table-active-bg: var(--table-active-bg, $table-active-bg); -$table-border-color: var(--table-border-color, $table-border-color); -$table-head-bg: var(--table-head-bg, $table-head-bg); -$table-head-color: var(--table-head-color, $table-head-color); -$table-dark-bg: var(--table-dark-bg, $table-dark-bg); -$table-dark-accent-bg: var(--table-dark-accent-bg, $table-dark-accent-bg); -$table-dark-hover-bg: var(--table-dark-hover-bg, $table-dark-hover-bg); -$table-dark-border-color: var(--table-dark-border-color, $table-dark-border-color); -$table-dark-color: var(--table-dark-color, $table-dark-color); -$table-striped-order: var(--table-striped-order, $table-striped-order); -$table-caption-color: var(--table-caption-color, $table-caption-color); -$table-border-level: var(--table-border-level, $table-border-level); -$input-btn-padding-y: var(--input-btn-padding-y, $input-btn-padding-y); -$input-btn-padding-x: var(--input-btn-padding-x, $input-btn-padding-x); -$input-btn-font-size: var(--input-btn-font-size, $input-btn-font-size); -$input-btn-line-height: var(--input-btn-line-height, $input-btn-line-height); -$input-btn-focus-width: var(--input-btn-focus-width, $input-btn-focus-width); -$input-btn-focus-color: var(--input-btn-focus-color, $input-btn-focus-color); -$input-btn-focus-box-shadow: var(--input-btn-focus-box-shadow, $input-btn-focus-box-shadow); -$input-btn-padding-y-sm: var(--input-btn-padding-y-sm, $input-btn-padding-y-sm); -$input-btn-padding-x-sm: var(--input-btn-padding-x-sm, $input-btn-padding-x-sm); -$input-btn-font-size-sm: var(--input-btn-font-size-sm, $input-btn-font-size-sm); -$input-btn-line-height-sm: var(--input-btn-line-height-sm, $input-btn-line-height-sm); -$input-btn-padding-y-lg: var(--input-btn-padding-y-lg, $input-btn-padding-y-lg); -$input-btn-padding-x-lg: var(--input-btn-padding-x-lg, $input-btn-padding-x-lg); -$input-btn-font-size-lg: var(--input-btn-font-size-lg, $input-btn-font-size-lg); -$input-btn-line-height-lg: var(--input-btn-line-height-lg, $input-btn-line-height-lg); -$input-btn-border-width: var(--input-btn-border-width, $input-btn-border-width); -$btn-padding-y: var(--btn-padding-y, $btn-padding-y); -$btn-padding-x: var(--btn-padding-x, $btn-padding-x); -$btn-font-size: var(--btn-font-size, $btn-font-size); -$btn-line-height: var(--btn-line-height, $btn-line-height); -$btn-padding-y-sm: var(--btn-padding-y-sm, $btn-padding-y-sm); -$btn-padding-x-sm: var(--btn-padding-x-sm, $btn-padding-x-sm); -$btn-font-size-sm: var(--btn-font-size-sm, $btn-font-size-sm); -$btn-line-height-sm: var(--btn-line-height-sm, $btn-line-height-sm); -$btn-padding-y-lg: var(--btn-padding-y-lg, $btn-padding-y-lg); -$btn-padding-x-lg: var(--btn-padding-x-lg, $btn-padding-x-lg); -$btn-font-size-lg: var(--btn-font-size-lg, $btn-font-size-lg); -$btn-line-height-lg: var(--btn-line-height-lg, $btn-line-height-lg); -$btn-border-width: var(--btn-border-width, $btn-border-width); -$btn-font-weight: var(--btn-font-weight, $btn-font-weight); -$btn-box-shadow: var(--btn-box-shadow, $btn-box-shadow); -$btn-focus-width: var(--btn-focus-width, $btn-focus-width); -$btn-focus-box-shadow: var(--btn-focus-box-shadow, $btn-focus-box-shadow); -$btn-disabled-opacity: var(--btn-disabled-opacity, $btn-disabled-opacity); -$btn-active-box-shadow: var(--btn-active-box-shadow, $btn-active-box-shadow); -$btn-link-disabled-color: var(--btn-link-disabled-color, $btn-link-disabled-color); -$btn-block-spacing-y: var(--btn-block-spacing-y, $btn-block-spacing-y); -$btn-border-radius: var(--btn-border-radius, $btn-border-radius); -$btn-border-radius-lg: var(--btn-border-radius-lg, $btn-border-radius-lg); -$btn-border-radius-sm: var(--btn-border-radius-sm, $btn-border-radius-sm); -$btn-transition: var(--btn-transition, $btn-transition); -$label-margin-bottom: var(--label-margin-bottom, $label-margin-bottom); -$input-padding-y: var(--input-padding-y, $input-padding-y); -$input-padding-x: var(--input-padding-x, $input-padding-x); -$input-font-size: var(--input-font-size, $input-font-size); -$input-font-weight: var(--input-font-weight, $input-font-weight); -$input-line-height: var(--input-line-height, $input-line-height); -$input-padding-y-sm: var(--input-padding-y-sm, $input-padding-y-sm); -$input-padding-x-sm: var(--input-padding-x-sm, $input-padding-x-sm); -$input-font-size-sm: var(--input-font-size-sm, $input-font-size-sm); -$input-line-height-sm: var(--input-line-height-sm, $input-line-height-sm); -$input-padding-y-lg: var(--input-padding-y-lg, $input-padding-y-lg); -$input-padding-x-lg: var(--input-padding-x-lg, $input-padding-x-lg); -$input-font-size-lg: var(--input-font-size-lg, $input-font-size-lg); -$input-line-height-lg: var(--input-line-height-lg, $input-line-height-lg); -$input-bg: var(--input-bg, $input-bg); -$input-disabled-bg: var(--input-disabled-bg, $input-disabled-bg); -$input-color: var(--input-color, $input-color); -$input-border-color: var(--input-border-color, $input-border-color); -$input-border-width: var(--input-border-width, $input-border-width); -$input-box-shadow: var(--input-box-shadow, $input-box-shadow); -$input-border-radius: var(--input-border-radius, $input-border-radius); -$input-border-radius-lg: var(--input-border-radius-lg, $input-border-radius-lg); -$input-border-radius-sm: var(--input-border-radius-sm, $input-border-radius-sm); -$input-focus-bg: var(--input-focus-bg, $input-focus-bg); -$input-focus-border-color: var(--input-focus-border-color, $input-focus-border-color); -$input-focus-color: var(--input-focus-color, $input-focus-color); -$input-focus-width: var(--input-focus-width, $input-focus-width); -$input-focus-box-shadow: var(--input-focus-box-shadow, $input-focus-box-shadow); -$input-placeholder-color: var(--input-placeholder-color, $input-placeholder-color); -$input-plaintext-color: var(--input-plaintext-color, $input-plaintext-color); -$input-height-border: var(--input-height-border, $input-height-border); -$input-height-inner: var(--input-height-inner, $input-height-inner); -$input-height: var(--input-height, $input-height); -$input-height-inner-sm: var(--input-height-inner-sm, $input-height-inner-sm); -$input-height-sm: var(--input-height-sm, $input-height-sm); -$input-height-inner-lg: var(--input-height-inner-lg, $input-height-inner-lg); -$input-height-lg: var(--input-height-lg, $input-height-lg); -$input-transition: var(--input-transition, $input-transition); -$form-text-margin-top: var(--form-text-margin-top, $form-text-margin-top); -$form-check-input-gutter: var(--form-check-input-gutter, $form-check-input-gutter); -$form-check-input-margin-y: var(--form-check-input-margin-y, $form-check-input-margin-y); -$form-check-input-margin-x: var(--form-check-input-margin-x, $form-check-input-margin-x); -$form-check-inline-margin-x: var(--form-check-inline-margin-x, $form-check-inline-margin-x); -$form-check-inline-input-margin-x: var(--form-check-inline-input-margin-x, $form-check-inline-input-margin-x); -$form-grid-gutter-width: var(--form-grid-gutter-width, $form-grid-gutter-width); -$form-group-margin-bottom: var(--form-group-margin-bottom, $form-group-margin-bottom); -$input-group-addon-color: var(--input-group-addon-color, $input-group-addon-color); -$input-group-addon-bg: var(--input-group-addon-bg, $input-group-addon-bg); -$input-group-addon-border-color: var(--input-group-addon-border-color, $input-group-addon-border-color); -$custom-forms-transition: var(--custom-forms-transition, $custom-forms-transition); -$custom-control-gutter: var(--custom-control-gutter, $custom-control-gutter); -$custom-control-spacer-x: var(--custom-control-spacer-x, $custom-control-spacer-x); -$custom-control-indicator-size: var(--custom-control-indicator-size, $custom-control-indicator-size); -$custom-control-indicator-bg: var(--custom-control-indicator-bg, $custom-control-indicator-bg); -$custom-control-indicator-bg-size: var(--custom-control-indicator-bg-size, $custom-control-indicator-bg-size); -$custom-control-indicator-box-shadow: var(--custom-control-indicator-box-shadow, $custom-control-indicator-box-shadow); -$custom-control-indicator-border-color: var(--custom-control-indicator-border-color, $custom-control-indicator-border-color); -$custom-control-indicator-border-width: var(--custom-control-indicator-border-width, $custom-control-indicator-border-width); -$custom-control-indicator-disabled-bg: var(--custom-control-indicator-disabled-bg, $custom-control-indicator-disabled-bg); -$custom-control-label-disabled-color: var(--custom-control-label-disabled-color, $custom-control-label-disabled-color); -$custom-control-indicator-checked-color: var(--custom-control-indicator-checked-color, $custom-control-indicator-checked-color); -$custom-control-indicator-checked-bg: var(--custom-control-indicator-checked-bg, $custom-control-indicator-checked-bg); -$custom-control-indicator-checked-disabled-bg: var(--custom-control-indicator-checked-disabled-bg, $custom-control-indicator-checked-disabled-bg); -$custom-control-indicator-checked-box-shadow: var(--custom-control-indicator-checked-box-shadow, $custom-control-indicator-checked-box-shadow); -$custom-control-indicator-checked-border-color: var(--custom-control-indicator-checked-border-color, $custom-control-indicator-checked-border-color); -$custom-control-indicator-focus-box-shadow: var(--custom-control-indicator-focus-box-shadow, $custom-control-indicator-focus-box-shadow); -$custom-control-indicator-focus-border-color: var(--custom-control-indicator-focus-border-color, $custom-control-indicator-focus-border-color); -$custom-control-indicator-active-color: var(--custom-control-indicator-active-color, $custom-control-indicator-active-color); -$custom-control-indicator-active-bg: var(--custom-control-indicator-active-bg, $custom-control-indicator-active-bg); -$custom-control-indicator-active-box-shadow: var(--custom-control-indicator-active-box-shadow, $custom-control-indicator-active-box-shadow); -$custom-control-indicator-active-border-color: var(--custom-control-indicator-active-border-color, $custom-control-indicator-active-border-color); -$custom-checkbox-indicator-border-radius: var(--custom-checkbox-indicator-border-radius, $custom-checkbox-indicator-border-radius); -$custom-checkbox-indicator-icon-checked: var(--custom-checkbox-indicator-icon-checked, $custom-checkbox-indicator-icon-checked); -$custom-checkbox-indicator-indeterminate-bg: var(--custom-checkbox-indicator-indeterminate-bg, $custom-checkbox-indicator-indeterminate-bg); -$custom-checkbox-indicator-indeterminate-color: var(--custom-checkbox-indicator-indeterminate-color, $custom-checkbox-indicator-indeterminate-color); -$custom-checkbox-indicator-icon-indeterminate: var(--custom-checkbox-indicator-icon-indeterminate, $custom-checkbox-indicator-icon-indeterminate); -$custom-checkbox-indicator-indeterminate-box-shadow: var(--custom-checkbox-indicator-indeterminate-box-shadow, $custom-checkbox-indicator-indeterminate-box-shadow); -$custom-checkbox-indicator-indeterminate-border-color: var(--custom-checkbox-indicator-indeterminate-border-color, $custom-checkbox-indicator-indeterminate-border-color); -$custom-radio-indicator-border-radius: var(--custom-radio-indicator-border-radius, $custom-radio-indicator-border-radius); -$custom-radio-indicator-icon-checked: var(--custom-radio-indicator-icon-checked, $custom-radio-indicator-icon-checked); -$custom-switch-width: var(--custom-switch-width, $custom-switch-width); -$custom-switch-indicator-border-radius: var(--custom-switch-indicator-border-radius, $custom-switch-indicator-border-radius); -$custom-switch-indicator-size: var(--custom-switch-indicator-size, $custom-switch-indicator-size); -$custom-select-padding-y: var(--custom-select-padding-y, $custom-select-padding-y); -$custom-select-padding-x: var(--custom-select-padding-x, $custom-select-padding-x); -$custom-select-height: var(--custom-select-height, $custom-select-height); -$custom-select-font-weight: var(--custom-select-font-weight, $custom-select-font-weight); -$custom-select-line-height: var(--custom-select-line-height, $custom-select-line-height); -$custom-select-color: var(--custom-select-color, $custom-select-color); -$custom-select-disabled-color: var(--custom-select-disabled-color, $custom-select-disabled-color); -$custom-select-bg: var(--custom-select-bg, $custom-select-bg); -$custom-select-disabled-bg: var(--custom-select-disabled-bg, $custom-select-disabled-bg); -$custom-select-indicator-color: var(--custom-select-indicator-color, $custom-select-indicator-color); -$custom-select-indicator: var(--custom-select-indicator, $custom-select-indicator); -$custom-select-feedback-icon-padding-right: var(--custom-select-feedback-icon-padding-right, $custom-select-feedback-icon-padding-right); -$custom-select-feedback-icon-position: var(--custom-select-feedback-icon-position, $custom-select-feedback-icon-position); -$custom-select-feedback-icon-size: var(--custom-select-feedback-icon-size, $custom-select-feedback-icon-size); -$custom-select-border-width: var(--custom-select-border-width, $custom-select-border-width); -$custom-select-border-color: var(--custom-select-border-color, $custom-select-border-color); -$custom-select-border-radius: var(--custom-select-border-radius, $custom-select-border-radius); -$custom-select-box-shadow: var(--custom-select-box-shadow, $custom-select-box-shadow); -$custom-select-focus-border-color: var(--custom-select-focus-border-color, $custom-select-focus-border-color); -$custom-select-focus-width: var(--custom-select-focus-width, $custom-select-focus-width); -$custom-select-focus-box-shadow: var(--custom-select-focus-box-shadow, $custom-select-focus-box-shadow); -$custom-select-padding-y-sm: var(--custom-select-padding-y-sm, $custom-select-padding-y-sm); -$custom-select-padding-x-sm: var(--custom-select-padding-x-sm, $custom-select-padding-x-sm); -$custom-select-font-size-sm: var(--custom-select-font-size-sm, $custom-select-font-size-sm); -$custom-select-height-sm: var(--custom-select-height-sm, $custom-select-height-sm); -$custom-select-padding-y-lg: var(--custom-select-padding-y-lg, $custom-select-padding-y-lg); -$custom-select-padding-x-lg: var(--custom-select-padding-x-lg, $custom-select-padding-x-lg); -$custom-select-font-size-lg: var(--custom-select-font-size-lg, $custom-select-font-size-lg); -$custom-select-height-lg: var(--custom-select-height-lg, $custom-select-height-lg); -$custom-range-track-width: var(--custom-range-track-width, $custom-range-track-width); -$custom-range-track-height: var(--custom-range-track-height, $custom-range-track-height); -$custom-range-track-cursor: var(--custom-range-track-cursor, $custom-range-track-cursor); -$custom-range-track-bg: var(--custom-range-track-bg, $custom-range-track-bg); -$custom-range-track-border-radius: var(--custom-range-track-border-radius, $custom-range-track-border-radius); -$custom-range-track-box-shadow: var(--custom-range-track-box-shadow, $custom-range-track-box-shadow); -$custom-range-thumb-width: var(--custom-range-thumb-width, $custom-range-thumb-width); -$custom-range-thumb-height: var(--custom-range-thumb-height, $custom-range-thumb-height); -$custom-range-thumb-bg: var(--custom-range-thumb-bg, $custom-range-thumb-bg); -$custom-range-thumb-border: var(--custom-range-thumb-border, $custom-range-thumb-border); -$custom-range-thumb-border-radius: var(--custom-range-thumb-border-radius, $custom-range-thumb-border-radius); -$custom-range-thumb-box-shadow: var(--custom-range-thumb-box-shadow, $custom-range-thumb-box-shadow); -$custom-range-thumb-focus-box-shadow: var(--custom-range-thumb-focus-box-shadow, $custom-range-thumb-focus-box-shadow); -$custom-range-thumb-active-bg: var(--custom-range-thumb-active-bg, $custom-range-thumb-active-bg); -$custom-range-thumb-disabled-bg: var(--custom-range-thumb-disabled-bg, $custom-range-thumb-disabled-bg); -$custom-file-height: var(--custom-file-height, $custom-file-height); -$custom-file-height-inner: var(--custom-file-height-inner, $custom-file-height-inner); -$custom-file-focus-border-color: var(--custom-file-focus-border-color, $custom-file-focus-border-color); -$custom-file-focus-box-shadow: var(--custom-file-focus-box-shadow, $custom-file-focus-box-shadow); -$custom-file-disabled-bg: var(--custom-file-disabled-bg, $custom-file-disabled-bg); -$custom-file-padding-y: var(--custom-file-padding-y, $custom-file-padding-y); -$custom-file-padding-x: var(--custom-file-padding-x, $custom-file-padding-x); -$custom-file-line-height: var(--custom-file-line-height, $custom-file-line-height); -$custom-file-font-weight: var(--custom-file-font-weight, $custom-file-font-weight); -$custom-file-color: var(--custom-file-color, $custom-file-color); -$custom-file-bg: var(--custom-file-bg, $custom-file-bg); -$custom-file-border-width: var(--custom-file-border-width, $custom-file-border-width); -$custom-file-border-color: var(--custom-file-border-color, $custom-file-border-color); -$custom-file-border-radius: var(--custom-file-border-radius, $custom-file-border-radius); -$custom-file-box-shadow: var(--custom-file-box-shadow, $custom-file-box-shadow); -$custom-file-button-color: var(--custom-file-button-color, $custom-file-button-color); -$custom-file-button-bg: var(--custom-file-button-bg, $custom-file-button-bg); -$form-feedback-margin-top: var(--form-feedback-margin-top, $form-feedback-margin-top); -$form-feedback-font-size: var(--form-feedback-font-size, $form-feedback-font-size); -$form-feedback-valid-color: var(--form-feedback-valid-color, $form-feedback-valid-color); -$form-feedback-invalid-color: var(--form-feedback-invalid-color, $form-feedback-invalid-color); -$form-feedback-icon-valid-color: var(--form-feedback-icon-valid-color, $form-feedback-icon-valid-color); -$form-feedback-icon-valid: var(--form-feedback-icon-valid, $form-feedback-icon-valid); -$form-feedback-icon-invalid-color: var(--form-feedback-icon-invalid-color, $form-feedback-icon-invalid-color); -$form-feedback-icon-invalid: var(--form-feedback-icon-invalid, $form-feedback-icon-invalid); -$dropdown-min-width: var(--dropdown-min-width, $dropdown-min-width); -$dropdown-padding-y: var(--dropdown-padding-y, $dropdown-padding-y); -$dropdown-spacer: var(--dropdown-spacer, $dropdown-spacer); -$dropdown-bg: var(--dropdown-bg, $dropdown-bg); -$dropdown-border-color: var(--dropdown-border-color, $dropdown-border-color); -$dropdown-border-radius: var(--dropdown-border-radius, $dropdown-border-radius); -$dropdown-border-width: var(--dropdown-border-width, $dropdown-border-width); -$dropdown-inner-border-radius: var(--dropdown-inner-border-radius, $dropdown-inner-border-radius); -$dropdown-divider-bg: var(--dropdown-divider-bg, $dropdown-divider-bg); -$dropdown-box-shadow: var(--dropdown-box-shadow, $dropdown-box-shadow); -$dropdown-link-color: var(--dropdown-link-color, $dropdown-link-color); -$dropdown-link-hover-color: var(--dropdown-link-hover-color, $dropdown-link-hover-color); -$dropdown-link-hover-bg: var(--dropdown-link-hover-bg, $dropdown-link-hover-bg); -$dropdown-link-active-color: var(--dropdown-link-active-color, $dropdown-link-active-color); -$dropdown-link-active-bg: var(--dropdown-link-active-bg, $dropdown-link-active-bg); -$dropdown-link-disabled-color: var(--dropdown-link-disabled-color, $dropdown-link-disabled-color); -$dropdown-item-padding-y: var(--dropdown-item-padding-y, $dropdown-item-padding-y); -$dropdown-item-padding-x: var(--dropdown-item-padding-x, $dropdown-item-padding-x); -$dropdown-header-color: var(--dropdown-header-color, $dropdown-header-color); -$zindex-dropdown: var(--zindex-dropdown, $zindex-dropdown); -$zindex-sticky: var(--zindex-sticky, $zindex-sticky); -$zindex-fixed: var(--zindex-fixed, $zindex-fixed); -$zindex-modal-backdrop: var(--zindex-modal-backdrop, $zindex-modal-backdrop); -$zindex-modal: var(--zindex-modal, $zindex-modal); -$zindex-popover: var(--zindex-popover, $zindex-popover); -$zindex-tooltip: var(--zindex-tooltip, $zindex-tooltip); -$nav-link-padding-y: var(--nav-link-padding-y, $nav-link-padding-y); -$nav-link-padding-x: var(--nav-link-padding-x, $nav-link-padding-x); -$nav-link-disabled-color: var(--nav-link-disabled-color, $nav-link-disabled-color); -$nav-tabs-border-color: var(--nav-tabs-border-color, $nav-tabs-border-color); -$nav-tabs-border-width: var(--nav-tabs-border-width, $nav-tabs-border-width); -$nav-tabs-border-radius: var(--nav-tabs-border-radius, $nav-tabs-border-radius); -$nav-tabs-link-hover-border-color: var(--nav-tabs-link-hover-border-color, $nav-tabs-link-hover-border-color); -$nav-tabs-link-active-color: var(--nav-tabs-link-active-color, $nav-tabs-link-active-color); -$nav-tabs-link-active-bg: var(--nav-tabs-link-active-bg, $nav-tabs-link-active-bg); -$nav-tabs-link-active-border-color: var(--nav-tabs-link-active-border-color, $nav-tabs-link-active-border-color); -$nav-pills-border-radius: var(--nav-pills-border-radius, $nav-pills-border-radius); -$nav-pills-link-active-color: var(--nav-pills-link-active-color, $nav-pills-link-active-color); -$nav-pills-link-active-bg: var(--nav-pills-link-active-bg, $nav-pills-link-active-bg); -$nav-divider-color: var(--nav-divider-color, $nav-divider-color); -$nav-divider-margin-y: var(--nav-divider-margin-y, $nav-divider-margin-y); -$navbar-padding-y: var(--navbar-padding-y, $navbar-padding-y); -$navbar-padding-x: var(--navbar-padding-x, $navbar-padding-x); -$navbar-nav-link-padding-x: var(--navbar-nav-link-padding-x, $navbar-nav-link-padding-x); -$navbar-brand-font-size: var(--navbar-brand-font-size, $navbar-brand-font-size); -$nav-link-height: var(--nav-link-height, $nav-link-height); -$navbar-brand-height: var(--navbar-brand-height, $navbar-brand-height); -$navbar-brand-padding-y: var(--navbar-brand-padding-y, $navbar-brand-padding-y); -$navbar-toggler-padding-y: var(--navbar-toggler-padding-y, $navbar-toggler-padding-y); -$navbar-toggler-padding-x: var(--navbar-toggler-padding-x, $navbar-toggler-padding-x); -$navbar-toggler-font-size: var(--navbar-toggler-font-size, $navbar-toggler-font-size); -$navbar-toggler-border-radius: var(--navbar-toggler-border-radius, $navbar-toggler-border-radius); -$navbar-dark-color: var(--navbar-dark-color, $navbar-dark-color); -$navbar-dark-hover-color: var(--navbar-dark-hover-color, $navbar-dark-hover-color); -$navbar-dark-active-color: var(--navbar-dark-active-color, $navbar-dark-active-color); -$navbar-dark-disabled-color: var(--navbar-dark-disabled-color, $navbar-dark-disabled-color); -$navbar-dark-toggler-icon-bg: var(--navbar-dark-toggler-icon-bg, $navbar-dark-toggler-icon-bg); -$navbar-dark-toggler-border-color: var(--navbar-dark-toggler-border-color, $navbar-dark-toggler-border-color); -$navbar-light-color: var(--navbar-light-color, $navbar-light-color); -$navbar-light-hover-color: var(--navbar-light-hover-color, $navbar-light-hover-color); -$navbar-light-active-color: var(--navbar-light-active-color, $navbar-light-active-color); -$navbar-light-disabled-color: var(--navbar-light-disabled-color, $navbar-light-disabled-color); -$navbar-light-toggler-icon-bg: var(--navbar-light-toggler-icon-bg, $navbar-light-toggler-icon-bg); -$navbar-light-toggler-border-color: var(--navbar-light-toggler-border-color, $navbar-light-toggler-border-color); -$navbar-light-brand-color: var(--navbar-light-brand-color, $navbar-light-brand-color); -$navbar-light-brand-hover-color: var(--navbar-light-brand-hover-color, $navbar-light-brand-hover-color); -$navbar-dark-brand-color: var(--navbar-dark-brand-color, $navbar-dark-brand-color); -$navbar-dark-brand-hover-color: var(--navbar-dark-brand-hover-color, $navbar-dark-brand-hover-color); -$pagination-padding-y: var(--pagination-padding-y, $pagination-padding-y); -$pagination-padding-x: var(--pagination-padding-x, $pagination-padding-x); -$pagination-padding-y-sm: var(--pagination-padding-y-sm, $pagination-padding-y-sm); -$pagination-padding-x-sm: var(--pagination-padding-x-sm, $pagination-padding-x-sm); -$pagination-padding-y-lg: var(--pagination-padding-y-lg, $pagination-padding-y-lg); -$pagination-padding-x-lg: var(--pagination-padding-x-lg, $pagination-padding-x-lg); -$pagination-line-height: var(--pagination-line-height, $pagination-line-height); -$pagination-color: var(--pagination-color, $pagination-color); -$pagination-bg: var(--pagination-bg, $pagination-bg); -$pagination-border-width: var(--pagination-border-width, $pagination-border-width); -$pagination-border-color: var(--pagination-border-color, $pagination-border-color); -$pagination-focus-box-shadow: var(--pagination-focus-box-shadow, $pagination-focus-box-shadow); -$pagination-focus-outline: var(--pagination-focus-outline, $pagination-focus-outline); -$pagination-hover-color: var(--pagination-hover-color, $pagination-hover-color); -$pagination-hover-bg: var(--pagination-hover-bg, $pagination-hover-bg); -$pagination-hover-border-color: var(--pagination-hover-border-color, $pagination-hover-border-color); -$pagination-active-color: var(--pagination-active-color, $pagination-active-color); -$pagination-active-bg: var(--pagination-active-bg, $pagination-active-bg); -$pagination-active-border-color: var(--pagination-active-border-color, $pagination-active-border-color); -$pagination-disabled-color: var(--pagination-disabled-color, $pagination-disabled-color); -$pagination-disabled-bg: var(--pagination-disabled-bg, $pagination-disabled-bg); -$pagination-disabled-border-color: var(--pagination-disabled-border-color, $pagination-disabled-border-color); -$jumbotron-padding: var(--jumbotron-padding, $jumbotron-padding); -$jumbotron-bg: var(--jumbotron-bg, $jumbotron-bg); -$card-spacer-y: var(--card-spacer-y, $card-spacer-y); -$card-spacer-x: var(--card-spacer-x, $card-spacer-x); -$card-border-width: var(--card-border-width, $card-border-width); -$card-border-radius: var(--card-border-radius, $card-border-radius); -$card-border-color: var(--card-border-color, $card-border-color); -$card-inner-border-radius: var(--card-inner-border-radius, $card-inner-border-radius); -$card-cap-bg: var(--card-cap-bg, $card-cap-bg); -$card-cap-color: var(--card-cap-color, $card-cap-color); -$card-bg: var(--card-bg, $card-bg); -$card-img-overlay-padding: var(--card-img-overlay-padding, $card-img-overlay-padding); -$card-group-margin: var(--card-group-margin, $card-group-margin); -$card-deck-margin: var(--card-deck-margin, $card-deck-margin); -$card-columns-count: var(--card-columns-count, $card-columns-count); -$card-columns-gap: var(--card-columns-gap, $card-columns-gap); -$card-columns-margin: var(--card-columns-margin, $card-columns-margin); -$tooltip-font-size: var(--tooltip-font-size, $tooltip-font-size); -$tooltip-max-width: var(--tooltip-max-width, $tooltip-max-width); -$tooltip-color: var(--tooltip-color, $tooltip-color); -$tooltip-bg: var(--tooltip-bg, $tooltip-bg); -$tooltip-border-radius: var(--tooltip-border-radius, $tooltip-border-radius); -$tooltip-opacity: var(--tooltip-opacity, $tooltip-opacity); -$tooltip-padding-y: var(--tooltip-padding-y, $tooltip-padding-y); -$tooltip-padding-x: var(--tooltip-padding-x, $tooltip-padding-x); -$tooltip-margin: var(--tooltip-margin, $tooltip-margin); -$tooltip-arrow-width: var(--tooltip-arrow-width, $tooltip-arrow-width); -$tooltip-arrow-height: var(--tooltip-arrow-height, $tooltip-arrow-height); -$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-arrow-color); -$form-feedback-tooltip-padding-y: var(--form-feedback-tooltip-padding-y, $form-feedback-tooltip-padding-y); -$form-feedback-tooltip-padding-x: var(--form-feedback-tooltip-padding-x, $form-feedback-tooltip-padding-x); -$form-feedback-tooltip-font-size: var(--form-feedback-tooltip-font-size, $form-feedback-tooltip-font-size); -$form-feedback-tooltip-line-height: var(--form-feedback-tooltip-line-height, $form-feedback-tooltip-line-height); -$form-feedback-tooltip-opacity: var(--form-feedback-tooltip-opacity, $form-feedback-tooltip-opacity); -$form-feedback-tooltip-border-radius: var(--form-feedback-tooltip-border-radius, $form-feedback-tooltip-border-radius); -$popover-font-size: var(--popover-font-size, $popover-font-size); -$popover-bg: var(--popover-bg, $popover-bg); -$popover-max-width: var(--popover-max-width, $popover-max-width); -$popover-border-width: var(--popover-border-width, $popover-border-width); -$popover-border-color: var(--popover-border-color, $popover-border-color); -$popover-border-radius: var(--popover-border-radius, $popover-border-radius); -$popover-box-shadow: var(--popover-box-shadow, $popover-box-shadow); -$popover-header-bg: var(--popover-header-bg, $popover-header-bg); -$popover-header-color: var(--popover-header-color, $popover-header-color); -$popover-header-padding-y: var(--popover-header-padding-y, $popover-header-padding-y); -$popover-header-padding-x: var(--popover-header-padding-x, $popover-header-padding-x); -$popover-body-color: var(--popover-body-color, $popover-body-color); -$popover-body-padding-y: var(--popover-body-padding-y, $popover-body-padding-y); -$popover-body-padding-x: var(--popover-body-padding-x, $popover-body-padding-x); -$popover-arrow-width: var(--popover-arrow-width, $popover-arrow-width); -$popover-arrow-height: var(--popover-arrow-height, $popover-arrow-height); -$popover-arrow-color: var(--popover-arrow-color, $popover-arrow-color); -$popover-arrow-outer-color: var(--popover-arrow-outer-color, $popover-arrow-outer-color); -$toast-max-width: var(--toast-max-width, $toast-max-width); -$toast-padding-x: var(--toast-padding-x, $toast-padding-x); -$toast-padding-y: var(--toast-padding-y, $toast-padding-y); -$toast-font-size: var(--toast-font-size, $toast-font-size); -$toast-background-color: var(--toast-background-color, $toast-background-color); -$toast-border-width: var(--toast-border-width, $toast-border-width); -$toast-border-color: var(--toast-border-color, $toast-border-color); -$toast-border-radius: var(--toast-border-radius, $toast-border-radius); -$toast-box-shadow: var(--toast-box-shadow, $toast-box-shadow); -$toast-header-color: var(--toast-header-color, $toast-header-color); -$toast-header-background-color: var(--toast-header-background-color, $toast-header-background-color); -$toast-header-border-color: var(--toast-header-border-color, $toast-header-border-color); -$badge-font-size: var(--badge-font-size, $badge-font-size); -$badge-font-weight: var(--badge-font-weight, $badge-font-weight); -$badge-padding-y: var(--badge-padding-y, $badge-padding-y); -$badge-padding-x: var(--badge-padding-x, $badge-padding-x); -$badge-border-radius: var(--badge-border-radius, $badge-border-radius); -$badge-pill-padding-x: var(--badge-pill-padding-x, $badge-pill-padding-x); -$badge-pill-border-radius: var(--badge-pill-border-radius, $badge-pill-border-radius); -$modal-inner-padding: var(--modal-inner-padding, $modal-inner-padding); -$modal-dialog-margin: var(--modal-dialog-margin, $modal-dialog-margin); -$modal-dialog-margin-y-sm-up: var(--modal-dialog-margin-y-sm-up, $modal-dialog-margin-y-sm-up); -$modal-title-line-height: var(--modal-title-line-height, $modal-title-line-height); -$modal-content-bg: var(--modal-content-bg, $modal-content-bg); -$modal-content-border-color: var(--modal-content-border-color, $modal-content-border-color); -$modal-content-border-width: var(--modal-content-border-width, $modal-content-border-width); -$modal-content-border-radius: var(--modal-content-border-radius, $modal-content-border-radius); -$modal-content-box-shadow-xs: var(--modal-content-box-shadow-xs, $modal-content-box-shadow-xs); -$modal-content-box-shadow-sm-up: var(--modal-content-box-shadow-sm-up, $modal-content-box-shadow-sm-up); -$modal-backdrop-bg: var(--modal-backdrop-bg, $modal-backdrop-bg); -$modal-backdrop-opacity: var(--modal-backdrop-opacity, $modal-backdrop-opacity); -$modal-header-border-color: var(--modal-header-border-color, $modal-header-border-color); -$modal-footer-border-color: var(--modal-footer-border-color, $modal-footer-border-color); -$modal-header-border-width: var(--modal-header-border-width, $modal-header-border-width); -$modal-footer-border-width: var(--modal-footer-border-width, $modal-footer-border-width); -$modal-header-padding-y: var(--modal-header-padding-y, $modal-header-padding-y); -$modal-header-padding-x: var(--modal-header-padding-x, $modal-header-padding-x); -$modal-xl: var(--modal-xl, $modal-xl); -$modal-lg: var(--modal-lg, $modal-lg); -$modal-md: var(--modal-md, $modal-md); -$modal-sm: var(--modal-sm, $modal-sm); -$modal-fade-transform: var(--modal-fade-transform, $modal-fade-transform); -$modal-show-transform: var(--modal-show-transform, $modal-show-transform); -$modal-transition: var(--modal-transition, $modal-transition); -$alert-padding-y: var(--alert-padding-y, $alert-padding-y); -$alert-padding-x: var(--alert-padding-x, $alert-padding-x); -$alert-margin-bottom: var(--alert-margin-bottom, $alert-margin-bottom); -$alert-border-radius: var(--alert-border-radius, $alert-border-radius); -$alert-link-font-weight: var(--alert-link-font-weight, $alert-link-font-weight); -$alert-border-width: var(--alert-border-width, $alert-border-width); -$alert-bg-level: var(--alert-bg-level, $alert-bg-level); -$alert-border-level: var(--alert-border-level, $alert-border-level); -$alert-color-level: var(--alert-color-level, $alert-color-level); -$progress-height: var(--progress-height, $progress-height); -$progress-font-size: var(--progress-font-size, $progress-font-size); -$progress-bg: var(--progress-bg, $progress-bg); -$progress-border-radius: var(--progress-border-radius, $progress-border-radius); -$progress-box-shadow: var(--progress-box-shadow, $progress-box-shadow); -$progress-bar-color: var(--progress-bar-color, $progress-bar-color); -$progress-bar-bg: var(--progress-bar-bg, $progress-bar-bg); -$progress-bar-animation-timing: var(--progress-bar-animation-timing, $progress-bar-animation-timing); -$progress-bar-transition: var(--progress-bar-transition, $progress-bar-transition); -$list-group-bg: var(--list-group-bg, $list-group-bg); -$list-group-border-color: var(--list-group-border-color, $list-group-border-color); -$list-group-border-width: var(--list-group-border-width, $list-group-border-width); -$list-group-border-radius: var(--list-group-border-radius, $list-group-border-radius); -$list-group-item-padding-y: var(--list-group-item-padding-y, $list-group-item-padding-y); -$list-group-item-padding-x: var(--list-group-item-padding-x, $list-group-item-padding-x); -$list-group-hover-bg: var(--list-group-hover-bg, $list-group-hover-bg); -$list-group-active-color: var(--list-group-active-color, $list-group-active-color); -$list-group-active-bg: var(--list-group-active-bg, $list-group-active-bg); -$list-group-active-border-color: var(--list-group-active-border-color, $list-group-active-border-color); -$list-group-disabled-color: var(--list-group-disabled-color, $list-group-disabled-color); -$list-group-disabled-bg: var(--list-group-disabled-bg, $list-group-disabled-bg); -$list-group-action-color: var(--list-group-action-color, $list-group-action-color); -$list-group-action-hover-color: var(--list-group-action-hover-color, $list-group-action-hover-color); -$list-group-action-active-color: var(--list-group-action-active-color, $list-group-action-active-color); -$list-group-action-active-bg: var(--list-group-action-active-bg, $list-group-action-active-bg); -$thumbnail-padding: var(--thumbnail-padding, $thumbnail-padding); -$thumbnail-bg: var(--thumbnail-bg, $thumbnail-bg); -$thumbnail-border-width: var(--thumbnail-border-width, $thumbnail-border-width); -$thumbnail-border-color: var(--thumbnail-border-color, $thumbnail-border-color); -$thumbnail-border-radius: var(--thumbnail-border-radius, $thumbnail-border-radius); -$thumbnail-box-shadow: var(--thumbnail-box-shadow, $thumbnail-box-shadow); -$figure-caption-font-size: var(--figure-caption-font-size, $figure-caption-font-size); -$figure-caption-color: var(--figure-caption-color, $figure-caption-color); -$breadcrumb-padding-y: var(--breadcrumb-padding-y, $breadcrumb-padding-y); -$breadcrumb-padding-x: var(--breadcrumb-padding-x, $breadcrumb-padding-x); -$breadcrumb-item-padding: var(--breadcrumb-item-padding, $breadcrumb-item-padding); -$breadcrumb-margin-bottom: var(--breadcrumb-margin-bottom, $breadcrumb-margin-bottom); -$breadcrumb-bg: var(--breadcrumb-bg, $breadcrumb-bg); -$breadcrumb-divider-color: var(--breadcrumb-divider-color, $breadcrumb-divider-color); -$breadcrumb-active-color: var(--breadcrumb-active-color, $breadcrumb-active-color); -$breadcrumb-divider: var(--breadcrumb-divider, $breadcrumb-divider); -$breadcrumb-border-radius: var(--breadcrumb-border-radius, $breadcrumb-border-radius); -$carousel-control-color: var(--carousel-control-color, $carousel-control-color); -$carousel-control-width: var(--carousel-control-width, $carousel-control-width); -$carousel-control-opacity: var(--carousel-control-opacity, $carousel-control-opacity); -$carousel-control-hover-opacity: var(--carousel-control-hover-opacity, $carousel-control-hover-opacity); -$carousel-control-transition: var(--carousel-control-transition, $carousel-control-transition); -$carousel-indicator-width: var(--carousel-indicator-width, $carousel-indicator-width); -$carousel-indicator-height: var(--carousel-indicator-height, $carousel-indicator-height); -$carousel-indicator-hit-area-height: var(--carousel-indicator-hit-area-height, $carousel-indicator-hit-area-height); -$carousel-indicator-spacer: var(--carousel-indicator-spacer, $carousel-indicator-spacer); -$carousel-indicator-active-bg: var(--carousel-indicator-active-bg, $carousel-indicator-active-bg); -$carousel-indicator-transition: var(--carousel-indicator-transition, $carousel-indicator-transition); -$carousel-caption-width: var(--carousel-caption-width, $carousel-caption-width); -$carousel-caption-color: var(--carousel-caption-color, $carousel-caption-color); -$carousel-control-icon-width: var(--carousel-control-icon-width, $carousel-control-icon-width); -$carousel-control-prev-icon-bg: var(--carousel-control-prev-icon-bg, $carousel-control-prev-icon-bg); -$carousel-control-next-icon-bg: var(--carousel-control-next-icon-bg, $carousel-control-next-icon-bg); -$carousel-transition-duration: var(--carousel-transition-duration, $carousel-transition-duration); -$spinner-width: var(--spinner-width, $spinner-width); -$spinner-height: var(--spinner-height, $spinner-height); -$spinner-border-width: var(--spinner-border-width, $spinner-border-width); -$spinner-width-sm: var(--spinner-width-sm, $spinner-width-sm); -$spinner-height-sm: var(--spinner-height-sm, $spinner-height-sm); -$spinner-border-width-sm: var(--spinner-border-width-sm, $spinner-border-width-sm); -$close-font-size: var(--close-font-size, $close-font-size); -$close-font-weight: var(--close-font-weight, $close-font-weight); -$close-color: var(--close-color, $close-color); -$close-text-shadow: var(--close-text-shadow, $close-text-shadow); -$code-font-size: var(--code-font-size, $code-font-size); -$code-color: var(--code-color, $code-color); -$kbd-padding-y: var(--kbd-padding-y, $kbd-padding-y); -$kbd-padding-x: var(--kbd-padding-x, $kbd-padding-x); -$kbd-font-size: var(--kbd-font-size, $kbd-font-size); -$kbd-color: var(--kbd-color, $kbd-color); -$kbd-bg: var(--kbd-bg, $kbd-bg); -$pre-color: var(--pre-color, $pre-color); -$pre-scrollable-max-height: var(--pre-scrollable-max-height, $pre-scrollable-max-height); -$overflows: var(--overflows, $overflows); -$positions: var(--positions, $positions); -$print-page-size: var(--print-page-size, $print-page-size); -$print-body-min-width: var(--print-body-min-width, $print-body-min-width); \ No newline at end of file diff --git a/frappe/public/scss/generate_css_variables_from_sass.js b/frappe/public/scss/generate_css_variables_from_sass.js deleted file mode 100644 index 1b4a14b91d..0000000000 --- a/frappe/public/scss/generate_css_variables_from_sass.js +++ /dev/null @@ -1,44 +0,0 @@ -const fs = require('fs') -const path = require('path') -const args = {} - -process.argv - .slice(2) - .map((v, i) => { - if (v.startsWith('--')) { - const key = v.slice(2) - args[key] = process.argv[(i + 2) + 1] - } - }); - -run({ - src: '/Users/netchampfaris/frappe-bench3/apps/frappe/node_modules/bootstrap/scss/_variables.scss', - outpath: '/Users/netchampfaris/frappe-bench3/apps/frappe/frappe/public/scss/css_variables.scss' -}) - - -function run({ src: file_path, outpath }) { - const blacklisted_keywords = ['grid-columns', - '() !default', 'true !default', 'false !default', 'table-border-width', - 'yiq', 'table-bg-level', 'theme-color-interval' - ] - - const filecontents = fs.readFileSync(file_path, { encoding: 'utf-8' }) - const output = []; - - const lineSplit = filecontents.split('\n'); - - for (let line of lineSplit) { - if (line.startsWith('$') && line.endsWith(';') && !blacklisted_keywords.some(k => line.includes(k))) { - const match = line.match(/\$([\w\-]+):/); - if (match) { - const variable_name = match[1]; - const output_line = `$${variable_name}: var(--${variable_name}, $${variable_name});` - output.push(output_line); - } - } - } - - const outputContent = output.join('\n'); - fs.writeFileSync(outpath, outputContent, { encoding: 'utf-8' }) -} diff --git a/frappe/public/scss/website.scss b/frappe/public/scss/website.scss index b52d2160e7..cd38ccfc85 100644 --- a/frappe/public/scss/website.scss +++ b/frappe/public/scss/website.scss @@ -1,7 +1,6 @@ -@import "variables"; +@import "~bootstrap/scss/bootstrap"; @import "multilevel-dropdown"; - body { font-size: 16px; } diff --git a/frappe/templates/base.html b/frappe/templates/base.html index 3894e4c7a9..4d62eb57ee 100644 --- a/frappe/templates/base.html +++ b/frappe/templates/base.html @@ -24,6 +24,13 @@ {% if head_html is defined -%} {{ head_html or "" }} {%- endif %} + + {% if theme.css_file_url %} + + {% else %} + + {% endif %} + {%- for link in web_include_css %} {%- endfor -%} diff --git a/frappe/website/doctype/website_theme/website_theme.js b/frappe/website/doctype/website_theme/website_theme.js index c3cabb6237..d9e90d0475 100644 --- a/frappe/website/doctype/website_theme/website_theme.js +++ b/frappe/website/doctype/website_theme/website_theme.js @@ -7,25 +7,31 @@ $.extend(frappe.website_theme, { "footer_color", "footer_text_color", "text_color", "link_color"] }); -frappe.ui.form.on("Website Theme", "onload_post_render", function(frm) { - frappe.require('assets/frappe/js/lib/jscolor/jscolor.js', function() { - $.each(frappe.website_theme.color_variables, function(i, v) { - $(frm.fields_dict[v].input).addClass('color {required:false,hash:true}'); +frappe.ui.form.on('Website Theme', { + onload_post_render(frm) { + frappe.require('assets/frappe/js/lib/jscolor/jscolor.js', function() { + $.each(frappe.website_theme.color_variables, function(i, v) { + $(frm.fields_dict[v].input).addClass('color {required:false,hash:true}'); + }); + jscolor.bind(); }); - jscolor.bind(); - }); -}); + }, + refresh(frm) { + frm.set_intro(__('Default theme is set in {0}', ['' + + __('Website Settings') + ''])); -frappe.ui.form.on("Website Theme", "refresh", function(frm) { - frm.set_intro(__('Default theme is set in {0}', ['' - + __('Website Settings') + ''])); + frm.toggle_display(["module", "custom"], !frappe.boot.developer_mode); - frm.toggle_display(["module", "custom"], !frappe.boot.developer_mode); - - if (!frm.doc.custom && !frappe.boot.developer_mode) { - frm.set_read_only(); - frm.disable_save(); - } else { - frm.enable_save(); + if (!frm.doc.custom && !frappe.boot.developer_mode) { + frm.set_read_only(); + frm.disable_save(); + } else { + frm.enable_save(); + } + }, + generate_theme(frm) { + frappe.call('frappe.website.doctype.website_theme.website_theme.generate_bootstrap_theme', { + website_theme: frm.doc.name + }) } -}); +}) diff --git a/frappe/website/doctype/website_theme/website_theme.json b/frappe/website/doctype/website_theme/website_theme.json index 9257963e81..6000051a37 100644 --- a/frappe/website/doctype/website_theme/website_theme.json +++ b/frappe/website/doctype/website_theme/website_theme.json @@ -1,5 +1,6 @@ { "allow_copy": 0, + "allow_events_in_timeline": 0, "allow_guest_to_view": 0, "allow_import": 1, "allow_rename": 0, @@ -905,6 +906,136 @@ "set_only_once": 0, "translatable": 0, "unique": 0 + }, + { + "allow_bulk_edit": 0, + "allow_in_quick_entry": 0, + "allow_on_submit": 0, + "bold": 0, + "collapsible": 0, + "columns": 0, + "fieldname": "advanced_section", + "fieldtype": "Section Break", + "hidden": 0, + "ignore_user_permissions": 0, + "ignore_xss_filter": 0, + "in_filter": 0, + "in_global_search": 0, + "in_list_view": 0, + "in_standard_filter": 0, + "label": "Advanced", + "length": 0, + "no_copy": 0, + "permlevel": 0, + "precision": "", + "print_hide": 0, + "print_hide_if_no_value": 0, + "read_only": 0, + "remember_last_selected_value": 0, + "report_hide": 0, + "reqd": 0, + "search_index": 0, + "set_only_once": 0, + "translatable": 0, + "unique": 0 + }, + { + "allow_bulk_edit": 0, + "allow_in_quick_entry": 0, + "allow_on_submit": 0, + "bold": 0, + "collapsible": 0, + "columns": 0, + "fieldname": "customize_bootstrap_4", + "fieldtype": "Code", + "hidden": 0, + "ignore_user_permissions": 0, + "ignore_xss_filter": 0, + "in_filter": 0, + "in_global_search": 0, + "in_list_view": 0, + "in_standard_filter": 0, + "label": "Customize Bootstrap 4", + "length": 0, + "no_copy": 0, + "options": "SCSS", + "permlevel": 0, + "precision": "", + "print_hide": 0, + "print_hide_if_no_value": 0, + "read_only": 0, + "remember_last_selected_value": 0, + "report_hide": 0, + "reqd": 0, + "search_index": 0, + "set_only_once": 0, + "translatable": 0, + "unique": 0 + }, + { + "allow_bulk_edit": 0, + "allow_in_quick_entry": 0, + "allow_on_submit": 0, + "bold": 0, + "collapsible": 0, + "columns": 0, + "fieldname": "generate_theme", + "fieldtype": "Button", + "hidden": 0, + "ignore_user_permissions": 0, + "ignore_xss_filter": 0, + "in_filter": 0, + "in_global_search": 0, + "in_list_view": 0, + "in_standard_filter": 0, + "label": "Generate Theme", + "length": 0, + "no_copy": 0, + "options": "", + "permlevel": 0, + "precision": "", + "print_hide": 0, + "print_hide_if_no_value": 0, + "read_only": 0, + "remember_last_selected_value": 0, + "report_hide": 0, + "reqd": 0, + "search_index": 0, + "set_only_once": 0, + "translatable": 0, + "unique": 0 + }, + { + "allow_bulk_edit": 0, + "allow_in_quick_entry": 0, + "allow_on_submit": 0, + "bold": 0, + "collapsible": 0, + "columns": 0, + "fieldname": "css_file_url", + "fieldtype": "Data", + "hidden": 0, + "ignore_user_permissions": 0, + "ignore_xss_filter": 0, + "in_filter": 0, + "in_global_search": 0, + "in_list_view": 0, + "in_standard_filter": 0, + "label": "CSS File URL", + "length": 0, + "no_copy": 0, + "permlevel": 0, + "precision": "", + "print_hide": 0, + "print_hide_if_no_value": 0, + "read_only": 0, + "remember_last_selected_value": 0, + "report_hide": 0, + "reqd": 0, + "search_index": 0, + "set_only_once": 0, + "translatable": 0, + "unique": 0 } ], "has_web_view": 0, @@ -917,7 +1048,7 @@ "issingle": 0, "istable": 0, "max_attachments": 0, - "modified": "2018-08-16 06:00:32.415458", + "modified": "2019-01-27 15:53:15.259434", "modified_by": "Administrator", "module": "Website", "name": "Website Theme", diff --git a/frappe/website/doctype/website_theme/website_theme.py b/frappe/website/doctype/website_theme/website_theme.py index 23cde688f8..4eaca38f4d 100644 --- a/frappe/website/doctype/website_theme/website_theme.py +++ b/frappe/website/doctype/website_theme/website_theme.py @@ -85,3 +85,16 @@ def get_active_theme(): return frappe.get_doc("Website Theme", website_theme) except frappe.DoesNotExistError: pass + +@frappe.whitelist() +def generate_bootstrap_theme(website_theme): + doc = frappe.get_doc('Website Theme', website_theme) + file_name = frappe.scrub(doc.name) + '.css' + content = doc.customize_bootstrap_4 + content = content.replace('\n', '\\n') + + command = ['node', 'generate_bootstrap_theme.js', file_name, content] + frappe.commands.popen(command, cwd=frappe.get_app_path('frappe', '..'), shell=False) + + doc.css_file_url = 'assets/frappe/website_theme/' + file_name + doc.save() diff --git a/generate_bootstrap_theme.js b/generate_bootstrap_theme.js new file mode 100644 index 0000000000..e30a1e7944 --- /dev/null +++ b/generate_bootstrap_theme.js @@ -0,0 +1,42 @@ +const sass = require('node-sass'); +const fs = require('fs'); +const path = require('path'); +const { get_public_path } = require('./rollup/rollup.utils'); + +const node_modules_path = path.resolve(get_public_path('frappe'), 'node_modules'); +const scss_path = path.resolve(get_public_path('frappe'), 'scss'); +const website_theme_path = path.resolve(get_public_path('frappe'), 'website_theme'); +const custom_theme_name = process.argv[2]; +let scss_content = process.argv[3]; +scss_content = scss_content.replace(/\\n/g, '\n'); + +sass.render({ + data: scss_content, + includePaths: [ + node_modules_path, + scss_path + ], + importer: function(url, prev, done) { + if (url.startsWith('~')) { + // strip ~ so that it can resolve from node_modules + return { + file: url.slice(1) + } + } + // normal file, let it go + return { + file: url + } + } +}, function(err, result) { + if (err) { + console.error(err) + return; + } + + fs.writeFile(path.resolve(website_theme_path, custom_theme_name), result.css, function(err) { + if (!err) { + console.log(custom_theme_name) + } + }); +}); \ No newline at end of file