diff --git a/packages/flow-core/src/components/f-file-upload/_f-file-upload-variables.scss b/packages/flow-core/src/components/f-file-upload/_f-file-upload-variables.scss new file mode 100644 index 000000000..41bd7955f --- /dev/null +++ b/packages/flow-core/src/components/f-file-upload/_f-file-upload-variables.scss @@ -0,0 +1,11 @@ +$state-colors: ( + "primary": var(--color-primary-default), + "success": var(--color-success-default), + "warning": var(--color-warning-default), + "danger": var(--color-danger-default) +); + +$sizes: ( + "medium": 12px, + "small": 8px +); diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload-global.scss b/packages/flow-core/src/components/f-file-upload/f-file-upload-global.scss new file mode 100644 index 000000000..55bcd8ffb --- /dev/null +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload-global.scss @@ -0,0 +1,15 @@ +// common mixins imported from this file +@import "./../../mixins/scss/mixins"; +@import "./f-file-upload-variables"; + +f-file-upload { + width: 100%; + &[disabled] { + @include disabled(); + } + @each $state, $color in $state-colors { + &[state="#{$state}"] { + @include input-color($state); + } + } +} diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.scss b/packages/flow-core/src/components/f-file-upload/f-file-upload.scss index b7f66df97..046247df7 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.scss +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.scss @@ -1,23 +1,10 @@ -@use "sass:map"; - // common mixins imported from this file @import "./../../mixins/scss/mixins"; +@import "./f-file-upload-variables"; /** START : scss maps to hold repsective attribute values **/ -$state-colors: ( - "primary": var(--color-primary-default), - "success": var(--color-success-default), - "warning": var(--color-warning-default), - "danger": var(--color-danger-default) -); - -$sizes: ( - "medium": 12px, - "small": 8px -); - :host { div.f-file-upload { @include base(); @@ -104,15 +91,3 @@ $sizes: ( } } } - -f-file-upload { - width: 100%; - &[disabled] { - @include disabled(); - } - @each $state, $color in $state-colors { - &[state="#{$state}"] { - @include input-color($state); - } - } -} diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts index 8094cf7f0..1f152c9fb 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts @@ -1,6 +1,7 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; import { property, query, queryAssignedElements } from "lit/decorators.js"; import eleStyle from "./f-file-upload.scss?inline"; +import globalStyle from "./f-file-upload-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { ref, createRef, Ref } from "lit/directives/ref.js"; import { FDiv } from "../f-div/f-div"; @@ -10,6 +11,8 @@ import { getExtensionsFromMimeType, getFormattedBytes } from "../../utils/index" import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; import loader from "../../mixins/svg/loader"; import { flowElement } from "./../../utils"; +import { injectCss } from "@cldcvr/flow-core-config"; +injectCss("f-file-upload", globalStyle); export type FFileUploadState = "primary" | "default" | "success" | "warning" | "danger"; @@ -29,7 +32,13 @@ export class FFileUpload extends FRoot { /** * css loaded from scss file */ - static styles = [unsafeCSS(eleStyle), ...FDiv.styles, ...FText.styles, ...FIcon.styles]; + static styles = [ + unsafeCSS(eleStyle), + unsafeCSS(globalStyle), + ...FDiv.styles, + ...FText.styles, + ...FIcon.styles + ]; /** * @attribute f-file-upload has 2 type of modes: single and multiple. When type is single, a user can select only one file and the filename appears inline to the file uploader. When type is multiple, a user can select multiple files and each filename stacks under the file uploader.