Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(input, input-number, input-text): avoid redundant :host #8163

Merged
merged 2 commits into from
Dec 6, 2023
Merged

refactor(input, input-number, input-text): avoid redundant :host #8163

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff2cfe0
refactor(input, input-number, input-text): avoid redundant :host
jcfranco Nov 13, 2023
4ab3d1f
merge main
jcfranco Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 36 additions & 35 deletions packages/calcite-components/src/components/input-number/input-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@

@include disabled();

:host input {
input {
transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
-webkit-appearance: none;
@apply font-inherit
Expand All @@ -75,38 +75,36 @@
}

// states
:host {
& input {
@apply text-color-1
border-color-input
border
border-solid;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
}
& input:focus {
@apply border-color-brand text-color-1;
}
& input[readonly] {
@apply bg-background font-medium;
}
& input[readonly]:focus {
@apply text-color-1;
}
& calcite-icon {
@apply text-color-3;
input {
@apply text-color-1
border-color-input
border
border-solid;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
}
input:focus {
@apply border-color-brand text-color-1;
}
input[readonly] {
@apply bg-background font-medium;
}
input[readonly]:focus {
@apply text-color-1;
}
calcite-icon {
@apply text-color-3;
}

//focus
:host input {
input {
@apply focus-base;
}

:host input:focus {
input:focus {
@apply focus-inset;
}

Expand Down Expand Up @@ -396,18 +394,21 @@
@apply border-t-color-1;
}

:host .inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
}
}
}

:host .inline-child:not(.editing-enabled) {
@apply border-color-transparent
&.inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer;
padding-inline-start: 0;
cursor-pointer text-ellipsis;
padding-inline-start: 0;
}
}

@include hidden-form-input();
Expand Down
65 changes: 33 additions & 32 deletions packages/calcite-components/src/components/input-text/input-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,31 +72,29 @@ input {
}

// states
:host {
& input {
@apply text-color-1
border-color-input
border
border-solid;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
}
& input:focus {
@apply border-color-brand text-color-1;
}
& input[readonly] {
@apply bg-background font-medium;
}
& input[readonly]:focus {
@apply text-color-1;
}
& calcite-icon {
@apply text-color-3;
input {
@apply text-color-1
border-color-input
border
border-solid;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
}
input:focus {
@apply border-color-brand text-color-1;
}
input[readonly] {
@apply bg-background font-medium;
}
input[readonly]:focus {
@apply text-color-1;
}
calcite-icon {
@apply text-color-3;
}

//focus

Expand Down Expand Up @@ -284,18 +282,21 @@ input[type="text"]::-ms-reveal {
@apply border-t-color-1;
}

.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
}
}
}

.inline-child:not(.editing-enabled) {
@apply border-color-transparent
&.inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer;
padding-inline-start: 0;
cursor-pointer text-ellipsis;
padding-inline-start: 0;
}
}

@include hidden-form-input();
Expand Down
99 changes: 52 additions & 47 deletions packages/calcite-components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@
}
}

:host textarea,
:host input {
textarea,
input {
transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
-webkit-appearance: none;
@apply font-inherit
Expand All @@ -116,48 +116,50 @@
font-normal;
}

:host input[type="search"]::-webkit-search-decoration {
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

// states
:host {
& input,
& textarea {
@apply text-color-1
border-color-input
border
border-solid;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
}
& input:focus,
& textarea:focus {
@apply border-color-brand text-color-1;
}
& input[readonly],
& textarea[readonly] {
@apply bg-background font-medium;
}
& input[readonly]:focus,
& textarea[readonly]:focus {
@apply text-color-1;
input,
textarea {
@apply border
border-color-input
border-solid
text-color-1
text-ellipsis;
&::placeholder,
&:-ms-input-placeholder,
&::-ms-input-placeholder {
@apply text-color-3 font-normal;
}
& calcite-icon {
@apply text-color-3;
&:placeholder-shown {
@apply text-ellipsis;
}
}
input:focus,
textarea:focus {
@apply border-color-brand text-color-1;
}
input[readonly],
textarea[readonly] {
@apply bg-background font-medium;
}
input[readonly]:focus,
textarea[readonly]:focus {
@apply text-color-1;
}
calcite-icon {
@apply text-color-3;
}

//focus
:host textarea,
:host input {
textarea,
input {
@apply focus-base;
}
:host textarea:focus,
:host input:focus {
textarea:focus,
input:focus {
@apply focus-inset;
}

Expand Down Expand Up @@ -339,7 +341,7 @@ input[type="time"]::-webkit-clear-button {
}

// number buttons
:host input[type="number"] {
input[type="number"] {
-moz-appearance: textfield;

&::-webkit-inner-spin-button,
Expand Down Expand Up @@ -477,16 +479,16 @@ input[type="time"]::-webkit-clear-button {
}

// hide the default date picker
:host input::-webkit-calendar-picker-indicator {
:input::-webkit-calendar-picker-indicator {
@apply hidden;
}

:host input[type="date"]::-webkit-input-placeholder {
input[type="date"]::-webkit-input-placeholder {
visibility: hidden !important;
}

// textarea resize icon
:host textarea::-webkit-resizer {
textarea::-webkit-resizer {
@apply absolute
bottom-0
box-border
Expand Down Expand Up @@ -555,18 +557,21 @@ input[type="time"]::-webkit-clear-button {
@apply border-t-color-1;
}

:host .inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
}
}
}

:host .inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer text-ellipsis;
padding-inline-start: 0;
&.inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer text-ellipsis;
padding-inline-start: 0;
}
}

@include hidden-form-input();
Expand Down
Loading