diff --git a/sharedComponents/input/input.component.css b/sharedComponents/input/input.component.css deleted file mode 100644 index b0c5db9c..00000000 --- a/sharedComponents/input/input.component.css +++ /dev/null @@ -1,148 +0,0 @@ -:host { - --input-placeholder-color: var(--placeholder-color); - --input-background: transparent; - --input-shadow: none; - --input-padding: 20px; - --input-border: none; - --input-color: var(--grey-color); - --input-color-disabled: var(--disable-color); - --input-background-disabled: var(--muted-color); - --input-danger-color: #BB121A; -} - -/** Input wrapper*/ -.input-wrapper { - box-shadow: var(--input-shadow); - border: var(--input-border); - background: var(--input-background); - border-radius: 6px; - position: relative; - padding: var(--input-padding) 0 var(--input-padding) var(--input-padding); - cursor: text; - color: var(--input-color); -} - -.input-wrapper.danger { - border: 1px solid var(--input-danger-color); -} - -.input-wrapper.select { - cursor: pointer; -} - -.input-wrapper.disabled { - cursor: not-allowed !important; - user-select: none; - background-color: var(--input-background-disabled); - color: var(--input-color-disabled); -} - -/** Placeholder */ -.input-wrapper > .placeholder { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - overflow: hidden; - pointer-events: none; - color: var(--input-placeholder-color); - padding: var(--input-padding); -} - -.input-wrapper.danger > .placeholder { - color: var(--input-danger-color); -} - -.input-wrapper.disabled > .placeholder { - color: var(--input-color-disabled); -} - -.input-wrapper > .placeholder > label { - position: absolute; - font-size: 16px; - line-height: 24px; - top: calc(var(--input-padding) + 15px); - transform: translateY(-50%); - transition: all 0.5s ease 0s; -} - -.input-wrapper.focused > .placeholder > label { - top: 15px; - font-size: 12px; - line-height: 18px; -} - -/* Icon */ -.input-wrapper.danger .icon { - color: var(--input-danger-color); -} - -/** Input */ -.input-wrapper .input { - outline: 0 none !important; - box-shadow: none; - border-radius: 0; - border: 0 none; - padding: 0 var(--input-padding) 0 0; - background: transparent !important; - color: inherit; - width: 100%; - min-height: 32px; - font-size: inherit; - line-height: inherit; - resize: none; - cursor: inherit; - display: flex; - flex-direction: column; - justify-content: center; -} - -.input-wrapper .uk-grid .input { - min-height: 27px; - margin-top: 5px; -} - -.input-wrapper .input:disabled { - background: transparent; -} - -.input-wrapper:not(.focused) .input.search { - opacity: 0; -} - -/* Tools */ -.input-wrapper > .tools { - padding-right: var(--input-padding); -} - -/* Options */ -.uk-dropdown.options { - max-height: 200px; - overflow: auto; -} - -/* Chips */ -.input-wrapper .chip { - max-width: calc(100% - var(--input-padding)); - margin-top: 5px; -} - -.input-wrapper .chip .uk-label { - padding: 5px 20px; -} - -/** Modifiers */ -.inner { - --input-shadow: var(--shadow-inset); - --input-background: var(--default-color); - --input-options-background: transparent; - --input-options-border: none; -} - -.flat { - --input-background: var(--light-color); - --input-border: 1px solid var(--muted-color); - --input-options-background: transparent; - --input-options-border: none; -} diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 955b2d33..8a451fc4 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -25,6 +25,11 @@ export interface Option { label: string } +export interface Placeholder { + label: string, + static?: boolean +} + declare var UIkit; /** @@ -34,71 +39,79 @@ declare var UIkit; @Component({ selector: '[dashboard-input], [input]', template: ` -