Skip to content

Commit

Permalink
Remove unused or single use form mixins/variables [pending external PRs]
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Sep 19, 2024
1 parent 9c51fa8 commit 0d201a9
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 259 deletions.
245 changes: 0 additions & 245 deletions packages/eui/src/global_styling/mixins/_form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,3 @@
@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
$iconSize: $euiSize;
$iconPadding: $euiFormControlPadding;
$marginBetweenIcons: $euiFormControlPadding / 2;

@if ($compressed) {
$iconPadding: $euiFormControlCompressedPadding;
}

@if variable-exists(numOfIcons) == false {
@error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
} @else if $numOfIcons == 1 {
padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
} @else if $numOfIcons == 2 {
padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
} @else if $numOfIcons == 3 {
padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
}
}

@mixin euiPlaceholderPerBrowser {
// stylelint-disable selector-no-vendor-prefix
// Each prefix must be its own content block
&::-webkit-input-placeholder { @content; opacity: 1; }
&::-moz-placeholder { @content; opacity: 1; }
&:-ms-input-placeholder { @content; opacity: 1; }
&:-moz-placeholder { @content; opacity: 1; }
&::placeholder { @content; opacity: 1; }
}

@function euiFormControlGradient($color: $euiColorPrimary) {
@return linear-gradient(to top,
$color,
$color 2px,
transparent 2px,
transparent 100%
);
}

@mixin euiFormControlText {
@include euiFont;
font-size: $euiFontSizeS;
color: $euiTextColor;

@include euiPlaceholderPerBrowser {
color: $euiFormControlPlaceholderText;
}
}

@mixin euiFormControlSize(
$height: $euiFormControlHeight,
$includeAlternates: false
) {
// Default
max-width: $euiFormMaxWidth;
width: 100%;
height: $height;

@if ($includeAlternates) {
&--fullWidth {
max-width: 100%;
}

&--compressed {
height: $euiFormControlCompressedHeight;
}

&--inGroup {
height: 100%;
}
}
}

@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
@if ($isIconOptional) {
@at-root {
#{&}--withIcon {
@include euiFormControlLayoutPadding(1, $side, $compressed);
}
}
} @else {
@include euiFormControlLayoutPadding(1, $side, $compressed);
}
}

@mixin euiFormControlIsLoading($isNextToIcon: false) {
@at-root {
#{&}-isLoading {
@if ($isNextToIcon) {
@include euiFormControlLayoutPadding(2);
} @else {
@include euiFormControlLayoutPadding(1);
}
}

#{&}-isLoading#{&}--compressed {
@if ($isNextToIcon) {
@include euiFormControlLayoutPadding(2, $compressed: true);
} @else {
@include euiFormControlLayoutPadding(1, $compressed: true);
}
}
}
}

// 1. Must supply both values to background-size or some browsers apply the single value to both directions

@mixin euiFormControlDefaultShadow($borderOnly: false) {
Expand Down Expand Up @@ -131,143 +26,3 @@
transition-property: box-shadow, background-image, background-size;
}
}

@mixin euiFormControlFocusStyle($borderOnly: false) {
background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
background-image: euiFormControlGradient();
background-size: 100% 100%; // 1
outline: none; // Blanket remove all outlines relying on our own bottom border

@if ($borderOnly) {
box-shadow: inset 0 0 0 1px $euiFormBorderColor;
} @else {
box-shadow: inset 0 0 0 1px $euiFormBorderColor;
}
}

@mixin euiFormControlInvalidStyle {
background-image: euiFormControlGradient($euiColorDanger);
background-size: 100%;
}

@mixin euiFormControlDisabledTextStyle {
color: $euiFormControlDisabledColor;
-webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
}

@mixin euiFormControlDisabledStyle {
@include euiFormControlDisabledTextStyle;
cursor: not-allowed;
background: $euiFormBackgroundDisabledColor;
box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;

@include euiPlaceholderPerBrowser {
color: $euiFormControlDisabledColor;
}
}

@mixin euiFormControlReadOnlyStyle {
cursor: default;
color: $euiTextColor;
-webkit-text-fill-color: $euiTextColor; // Required for Safari
// Use transparency since there is no border and in case form is on a non-white background
background: $euiFormBackgroundReadOnlyColor;
border-color: transparent;
box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
}

// 2. Override invalid state with focus state.

@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
@include euiFormControlSize($includeAlternates: $includeSizes);
@include euiFormControlDefaultShadow;
@include euiFormControlText;

border: none;
border-radius: $euiFormControlBorderRadius;
padding: $euiFormControlPadding;

@if ($includeStates) {
&:invalid { // 2
@include euiFormControlInvalidStyle;
}

&:focus { // 2
@include euiFormControlFocusStyle;
}

&:disabled {
@include euiFormControlDisabledStyle;
}

&[readOnly] {
@include euiFormControlReadOnlyStyle;
}

// Needs to be set for autofill
&:-webkit-autofill {
-webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);

~ .euiFormControlLayoutIcons {
color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
}
}
}

@if ($includeSizes) {
&--compressed {
@include euiFormControlStyleCompressed($borderOnly, $includeStates);
}

&--inGroup {
// stylelint-disable-next-line declaration-no-important
box-shadow: none !important;
border-radius: 0;
}
}
}

@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
@include euiFormControlDefaultShadow($borderOnly: true);
padding: $euiFormControlCompressedPadding;
border-radius: $euiFormControlCompressedBorderRadius;

@if ($includeStates) {
&:invalid { // 2
@include euiFormControlInvalidStyle;
}

&:focus { // 2
@include euiFormControlFocusStyle($borderOnly: true);
}

&:disabled {
@include euiFormControlDisabledStyle;
}

&[readOnly] {
@include euiFormControlReadOnlyStyle;
}
}
}

@mixin euiHiddenSelectableInput {
position: absolute;
// stylelint-disable-next-line declaration-no-important
opacity: 0 !important; // Make sure it's still hidden when :disabled
width: 100%;
height: 100%;
cursor: pointer;
}

// Adjusts form controls border radius
@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
@if $internal == true {
$borderRadius: $borderRadius - 1;
}
@if $side == 'left' {
border-radius: $borderRadius 0 0 $borderRadius;
} @else if $side == 'right' {
border-radius: 0 $borderRadius $borderRadius 0;
}
}
14 changes: 0 additions & 14 deletions packages/eui/src/global_styling/variables/_form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,3 @@ $euiFormControlBoxShadow: 0 0 transparent !default;
$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
$euiFormInputGroupBorder: none !default;

// Icons sizes
$euiFormControlIconSizes: (
small: $euiSizeM,
medium: $euiSize,
large: $euiSizeL,
xLarge: $euiSizeXL,
xxLarge: $euiSizeXXL
);

// Control Layout
$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;

0 comments on commit 0d201a9

Please sign in to comment.