From 1a1f268787ad34d56c4c76e62396f10d574fa3dd Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 9 Oct 2023 15:50:54 +0530 Subject: [PATCH] monorepo FLOW-935 f-select global styles updated --- .../f-icon-button/f-icon-button-global.scss | 5 + .../f-icon-button/f-icon-button.scss | 5 - .../components/f-input/f-input-global.scss | 6 + .../src/components/f-input/f-input.scss | 5 - .../f-select/_f-select-variables.scss | 71 +++++++++ .../components/f-select/f-select-global.scss | 64 +++++++++ .../src/components/f-select/f-select.scss | 135 +----------------- .../src/components/f-select/f-select.ts | 4 + 8 files changed, 151 insertions(+), 144 deletions(-) create mode 100644 packages/flow-core/src/components/f-select/_f-select-variables.scss create mode 100644 packages/flow-core/src/components/f-select/f-select-global.scss diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button-global.scss b/packages/flow-core/src/components/f-icon-button/f-icon-button-global.scss index 119927199..dc18a175c 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button-global.scss +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button-global.scss @@ -1,5 +1,10 @@ @import "./../../mixins/scss/mixins"; +:root { + --input-border-radius-curved: 4px; + --input-border-radius-round: 22px; +} + f-icon-button { @include base(); display: inline-flex; diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.scss b/packages/flow-core/src/components/f-icon-button/f-icon-button.scss index 3998fe4b7..65b70473c 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.scss +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.scss @@ -225,8 +225,3 @@ in this case it is `f-icon-button` opacity: 1 !important; } } - -:root { - --input-border-radius-curved: 4px; - --input-border-radius-round: 22px; -} diff --git a/packages/flow-core/src/components/f-input/f-input-global.scss b/packages/flow-core/src/components/f-input/f-input-global.scss index 32f61ec05..aeb23634c 100644 --- a/packages/flow-core/src/components/f-input/f-input-global.scss +++ b/packages/flow-core/src/components/f-input/f-input-global.scss @@ -1,6 +1,12 @@ // common mixins imported from this file @import "./../../mixins/scss/mixins"; @import "./f-input-variables"; + +:root { + --input-border-radius-curved: 4px; + --input-border-radius-round: 22px; +} + f-input { width: 100%; &[disabled] { diff --git a/packages/flow-core/src/components/f-input/f-input.scss b/packages/flow-core/src/components/f-input/f-input.scss index 1c2e93065..ff7f7dc7f 100644 --- a/packages/flow-core/src/components/f-input/f-input.scss +++ b/packages/flow-core/src/components/f-input/f-input.scss @@ -243,8 +243,3 @@ applies styles on f-input } } } - -:root { - --input-border-radius-curved: 4px; - --input-border-radius-round: 22px; -} diff --git a/packages/flow-core/src/components/f-select/_f-select-variables.scss b/packages/flow-core/src/components/f-select/_f-select-variables.scss new file mode 100644 index 000000000..3a6d68073 --- /dev/null +++ b/packages/flow-core/src/components/f-select/_f-select-variables.scss @@ -0,0 +1,71 @@ +/** +$categories map will have state specific inner maps. +**/ +$categories: ( + "fill": ( + "background": var(--color-input-default), + "hover": var(--color-input-default-hover) + ), + "transparent": ( + "background": transparent, + "hover": var(--color-surface-default-hover) + ), + "outline": ( + "background": transparent, + "hover": var(--color-surface-default-hover) + ) +); + +/** +$sizes map will have state specific inner maps. +**/ +$sizes: ( + "medium": ( + "main-height": 36px, + "height": 34px, + "loader": 24px, + "maxlength": -38px + ), + "small": ( + "main-height": 28px, + "height": 26px, + "loader": 16px, + "maxlength": -34px + ) +); + +/** +$states map will have state specific inner maps. +**/ +$states: ( + "primary": ( + "input": var(--color-primary-default), + "border": var(--color-primary-default), + "focus": var(--color-primary-default) + ), + "default": ( + "input": var(--color-input-default), + "border": var(--color-border-default), + "focus": var(--color-primary-default) + ), + "success": ( + "input": var(--color-success-default), + "border": var(--color-success-default), + "focus": var(--color-success-default) + ), + "warning": ( + "input": var(--color-warning-default), + "border": var(--color-warning-default), + "focus": var(--color-warning-default) + ), + "danger": ( + "input": var(--color-danger-default), + "border": var(--color-danger-default), + "focus": var(--color-danger-default) + ), + "inherit": ( + "input": var(--color-input-default), + "border": var(--color-input-border-default), + "focus": var(--color-input-focus) + ) +); diff --git a/packages/flow-core/src/components/f-select/f-select-global.scss b/packages/flow-core/src/components/f-select/f-select-global.scss new file mode 100644 index 000000000..2519a0e3c --- /dev/null +++ b/packages/flow-core/src/components/f-select/f-select-global.scss @@ -0,0 +1,64 @@ +@import "./../../mixins/scss/mixins"; +@import "./f-select-variables"; + +:root { + --input-border-radius-curved: 4px; + --input-border-radius-round: 22px; +} + +f-select { + display: flex; + flex-direction: row; + align-items: center; + &[disabled] { + @include disabled(); + } + @each $state, $color in $states { + &[state="#{$state}"] { + @include input-color($state); + } + } +} + +f-form-group { + &[variant="compact"][direction="horizontal"] { + f-select { + &:first-child { + --input-border-radius-curved: 4px 0px 0px 4px; + --input-border-radius-round: 22px 0px 0px 22px; + } + &:last-child { + --input-border-radius-curved: 0px 4px 4px 0px; + --input-border-radius-round: 0px 22px 22px 0px; + } + &:not(:first-child):not(:last-child) { + --input-border-radius-curved: 0px 0px 0px 0px; + --input-border-radius-round: 0px 0px 0px 0px; + } + } + } +} + +f-select.f-search-border { + --input-border-radius-curved: 4px 0px 0px 4px; + --input-border-radius-round: 22px 0px 0px 22px; + &[category="fill"][state="default"] { + border-right: 1px solid var(--color-border-default); + } +} + +f-div[direction="column"] { + > f-select { + flex: 1 1; + max-height: 100%; + width: 100%; + } +} + +f-div[direction="row"] { + > f-select { + flex: 1 1; + max-width: 100%; + height: 100%; + } +} diff --git a/packages/flow-core/src/components/f-select/f-select.scss b/packages/flow-core/src/components/f-select/f-select.scss index d9e7f48d8..e25e536d6 100644 --- a/packages/flow-core/src/components/f-select/f-select.scss +++ b/packages/flow-core/src/components/f-select/f-select.scss @@ -1,78 +1,7 @@ @use "sass:map"; // common mixins imported from this file @import "./../../mixins/scss/mixins"; - -/** -$categories map will have state specific inner maps. -**/ -$categories: ( - "fill": ( - "background": var(--color-input-default), - "hover": var(--color-input-default-hover) - ), - "transparent": ( - "background": transparent, - "hover": var(--color-surface-default-hover) - ), - "outline": ( - "background": transparent, - "hover": var(--color-surface-default-hover) - ) -); - -/** -$sizes map will have state specific inner maps. -**/ -$sizes: ( - "medium": ( - "main-height": 36px, - "height": 34px, - "loader": 24px, - "maxlength": -38px - ), - "small": ( - "main-height": 28px, - "height": 26px, - "loader": 16px, - "maxlength": -34px - ) -); - -/** -$states map will have state specific inner maps. -**/ -$states: ( - "primary": ( - "input": var(--color-primary-default), - "border": var(--color-primary-default), - "focus": var(--color-primary-default) - ), - "default": ( - "input": var(--color-input-default), - "border": var(--color-border-default), - "focus": var(--color-primary-default) - ), - "success": ( - "input": var(--color-success-default), - "border": var(--color-success-default), - "focus": var(--color-success-default) - ), - "warning": ( - "input": var(--color-warning-default), - "border": var(--color-warning-default), - "focus": var(--color-warning-default) - ), - "danger": ( - "input": var(--color-danger-default), - "border": var(--color-danger-default), - "focus": var(--color-danger-default) - ), - "inherit": ( - "input": var(--color-input-default), - "border": var(--color-input-border-default), - "focus": var(--color-input-focus) - ) -); +@import "./f-select-variables"; /** applies styles on f-select @@ -344,65 +273,3 @@ applies styles on f-select @include disabled(); } } - -f-select { - display: flex; - flex-direction: row; - align-items: center; - &[disabled] { - @include disabled(); - } - @each $state, $color in $states { - &[state="#{$state}"] { - @include input-color($state); - } - } -} - -:root { - --input-border-radius-curved: 4px; - --input-border-radius-round: 22px; -} - -f-form-group { - &[variant="compact"][direction="horizontal"] { - f-select { - &:first-child { - --input-border-radius-curved: 4px 0px 0px 4px; - --input-border-radius-round: 22px 0px 0px 22px; - } - &:last-child { - --input-border-radius-curved: 0px 4px 4px 0px; - --input-border-radius-round: 0px 22px 22px 0px; - } - &:not(:first-child):not(:last-child) { - --input-border-radius-curved: 0px 0px 0px 0px; - --input-border-radius-round: 0px 0px 0px 0px; - } - } - } -} - -f-select.f-search-border { - --input-border-radius-curved: 4px 0px 0px 4px; - --input-border-radius-round: 22px 0px 0px 22px; - &[category="fill"][state="default"] { - border-right: 1px solid var(--color-border-default); - } -} - -f-div[direction="column"] { - > f-select { - flex: 1 1; - max-height: 100%; - width: 100%; - } -} - -f-div[direction="row"] { - > f-select { - flex: 1 1; - max-width: 100%; - height: 100%; - } -} diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts index e1739f7e3..5f88ab13f 100644 --- a/packages/flow-core/src/components/f-select/f-select.ts +++ b/packages/flow-core/src/components/f-select/f-select.ts @@ -1,6 +1,7 @@ import { HTMLTemplateResult, PropertyValues, unsafeCSS } from "lit"; import { property, query, queryAll, queryAssignedElements, state } from "lit/decorators.js"; import eleStyle from "./f-select.scss?inline"; +import globalStyle from "./f-select-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FText } from "../f-text/f-text"; import { FDiv } from "../f-div/f-div"; @@ -24,6 +25,8 @@ import { } from "./handlers"; import { FIconButton } from "../f-icon-button/f-icon-button"; import { flowElement } from "./../../utils"; +import { injectCss } from "@cldcvr/flow-core-config"; +injectCss("f-select", globalStyle); export type FSelectState = "primary" | "default" | "success" | "warning" | "danger"; export type FSelectHeightProp = number; @@ -65,6 +68,7 @@ export class FSelect extends FRoot { */ static styles = [ unsafeCSS(eleStyle), + unsafeCSS(globalStyle), ...FText.styles, ...FDiv.styles, ...FIcon.styles,