forked from elastic/eui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More EuiFilePicker styles (elastic#2145)
* Added `fullWidth` and `isInvalid` props to EuiFilePicker * Added a ‘large’ vs 'default' version * Setting the height statically so that it doesn't shift it's surrounding contents around * Remove z-indexes: Clashed with any popovers and wasn’t necessary since dom order signifies this * Added isLoading state (overrides clear button)
- Loading branch information
Showing
7 changed files
with
234 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,175 +1,199 @@ | ||
| @import '../form_control_layout/mixins'; | ||
|
|
||
| /** | ||
| * REMEMBER: --large modifiers must come last to override --compressed | ||
| */ | ||
|
|
||
| .euiFilePicker { | ||
| .euiFilePicker__wrap { | ||
| // Auto means the height isn't set to a fixed size | ||
| @include euiFormControlSize(auto); | ||
| @include euiFormControlSize; | ||
| position: relative; | ||
|
|
||
| position: relative; | ||
| display: inline-block; | ||
| &.euiFilePicker--fullWidth { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| @at-root { | ||
| .euiFilePicker--compressed#{&} { | ||
| height: $euiSizeXL; | ||
| } | ||
| } | ||
| &.euiFilePicker--large { | ||
| height: auto; | ||
| } | ||
| } | ||
|
|
||
| // The input is an invisiable dropzone / button | ||
| .euiFilePicker__input { | ||
| position: absolute; | ||
| z-index: 0; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| // The input is an invisiable dropzone / button | ||
| .euiFilePicker__input { | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| } | ||
| &:hover:disabled { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| &:hover:disabled { | ||
| cursor: not-allowed; | ||
| } | ||
| &:disabled ~ .euiFilePicker__prompt { | ||
| color: $euiColorMediumShade; | ||
| } | ||
| } | ||
|
|
||
| &:disabled ~ .euiFilePicker__prompt { | ||
| color: $euiColorMediumShade; | ||
| } | ||
| .euiFilePicker__icon { | ||
| position: absolute; | ||
| left: $euiSizeM; | ||
| top: $euiSizeM; | ||
| transition: transform $euiAnimSpeedFast $euiAnimSlightResistance; | ||
|
|
||
| .euiFilePicker--compressed & { | ||
| top: $euiSizeS; | ||
| } | ||
|
|
||
| .euiFilePicker__icon { | ||
| .euiFilePicker--large & { | ||
| position: static; | ||
| margin-bottom: $euiSize; | ||
| transition: transform $euiAnimSpeedFast $euiAnimSlightResistance; | ||
|
|
||
| @at-root { | ||
| .euiFilePicker--compressed#{&} { | ||
| // sass-lint:disable-block no-important | ||
| position: absolute; | ||
| top: $euiSizeS; | ||
| left: $euiSizeM; | ||
| transform: scale(1) !important; // don't scale icon on hover | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 1. Don't block the user from dropping files onto the filepicker. | ||
| * 2. Put prompt on top of input, so the clear button can intercept the click. | ||
| * 3. Ensure space for import icon and clear button (only if it has files) | ||
| * 4. Delay focus gradient or else it will only partially transition while file chooser opens | ||
| */ | ||
| .euiFilePicker__prompt { | ||
| @include euiFormControlDefaultShadow; | ||
|
|
||
| pointer-events: none; /* 1 */ | ||
| position: relative; /* 2 */ | ||
| z-index: 1; /* 2 */ | ||
| display: block; | ||
| padding: $euiSizeL; | ||
| text-align: center; | ||
|
|
||
| // sass-lint:disable-block indentation | ||
| transition: | ||
| box-shadow $euiAnimSpeedFast ease-in, | ||
| background-color $euiAnimSpeedFast ease-in, | ||
| background-image $euiAnimSpeedFast ease-in, | ||
| background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 4 */ | ||
|
|
||
| // sass-lint:disable-block mixins-before-declarations | ||
| @at-root { | ||
| .euiFilePicker--compressed#{&} { | ||
| height: $euiFormControlCompressedHeight; | ||
| padding: $euiFormControlCompressedPadding; | ||
| @include euiFormControlWithIcon; /* 3 */ | ||
| text-align: left; | ||
| } | ||
| } | ||
| /** | ||
| * 1. Don't block the user from dropping files onto the filepicker. | ||
| * 3. Ensure space for import icon, loading spinner, and clear button (only if it has files) | ||
| * 4. Delay focus gradient or else it will only partially transition while file chooser opens | ||
| * 5. Static height so that it doesn't shift it's surrounding contents around | ||
| */ | ||
| .euiFilePicker__prompt { | ||
| @include euiFormControlDefaultShadow; | ||
| @include euiFormControlWithIcon; /* 3 */ | ||
| height: $euiFormControlHeight; | ||
| padding-top: $euiFormControlPadding; | ||
| padding-right: $euiFormControlPadding; | ||
| padding-bottom: $euiFormControlPadding; | ||
| pointer-events: none; /* 1 */ | ||
|
|
||
| // sass-lint:disable-block indentation | ||
| transition: | ||
| box-shadow $euiAnimSpeedFast ease-in, | ||
| background-color $euiAnimSpeedFast ease-in, | ||
| background-image $euiAnimSpeedFast ease-in, | ||
| background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 4 */ | ||
|
|
||
| .euiFilePicker--compressed & { | ||
| height: $euiFormControlCompressedHeight; | ||
| padding-top: $euiFormControlCompressedPadding; | ||
| padding-right: $euiFormControlCompressedPadding; | ||
| padding-bottom: $euiFormControlCompressedPadding; | ||
| } | ||
|
|
||
| .euiFilePicker__promptText { | ||
| @include euiFontSizeS; | ||
| display: block; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| .euiFilePicker--large & { | ||
| height: $euiFilePickerTallHeight; /* 5 */ | ||
| padding: 0 $euiSizeL; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| @at-root { | ||
| // make compressed prompt look like placeholder | ||
| .euiFilePicker--compressed#{&} { | ||
| color: $euiColorMediumShade; | ||
| line-height: $euiSize; | ||
| } | ||
| } | ||
| .euiFilePicker-isInvalid & { | ||
| @include euiFormControlInvalidStyle; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 1. Undo the pointer-events: none applied to the enclosing prompt. | ||
| */ | ||
| .euiFilePicker__clearButton { | ||
| pointer-events: auto; /* 1 */ | ||
| .euiFilePicker__promptText { | ||
| @include euiFontSizeS; | ||
| @include euiTextTruncate; | ||
| line-height: $euiSize; | ||
| display: block; | ||
|
|
||
| // sass-lint:disable-block mixins-before-declarations | ||
| @at-root { | ||
| .euiFilePicker--compressed#{&} { | ||
| @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon'); | ||
| position: absolute; | ||
| top: $euiSizeS; | ||
| right: $euiSizeM; | ||
| } | ||
| } | ||
| // make normal sized prompt look like placeholder | ||
| .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & { | ||
| color: $euiColorMediumShade; | ||
| } | ||
| } | ||
|
|
||
| // Hover and focus | ||
| .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt, | ||
| .euiFilePicker__input:focus + .euiFilePicker__prompt { | ||
| .euiFilePicker__promptText { | ||
| // Adding the underline to the prompt text ensures the underline | ||
| // color is the same as the current text color | ||
| text-decoration: underline; | ||
| } | ||
| .euiFilePicker__clearButton, | ||
| .euiFilePicker__loadingSpinner { | ||
| position: absolute; | ||
| right: $euiSizeM; | ||
| top: $euiSizeM; | ||
|
|
||
| .euiFilePicker__icon { | ||
| transform: scale(1.1); | ||
| } | ||
| .euiFilePicker--compressed & { | ||
| top: $euiSizeS; | ||
| } | ||
| } | ||
|
|
||
| // Focus | ||
| .euiFilePicker__input:focus + .euiFilePicker__prompt { | ||
| @include euiFormControlFocusStyle; | ||
| /** | ||
| * 1. Undo the pointer-events: none applied to the enclosing prompt. | ||
| */ | ||
| .euiFilePicker__clearButton { | ||
| pointer-events: auto; /* 1 */ | ||
|
|
||
| .euiFilePicker:not(.euiFilePicker--large) & { | ||
| @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon'); | ||
| } | ||
|
|
||
| // Disabled | ||
| .euiFilePicker__input:disabled + .euiFilePicker__prompt { | ||
| @include euiFormControlDisabledStyle; | ||
| .euiFilePicker--large & { | ||
| position: relative; | ||
| top: 0; | ||
| right: 0; | ||
| } | ||
| } | ||
|
|
||
| // Focus | ||
| .euiFilePicker__showDrop .euiFilePicker__prompt, | ||
| .euiFilePicker__input:focus + .euiFilePicker__prompt { | ||
| @include euiFormControlFocusStyle; | ||
| } | ||
|
|
||
| // Disabled | ||
| .euiFilePicker__input:disabled + .euiFilePicker__prompt { | ||
| @include euiFormControlDisabledStyle; | ||
| } | ||
|
|
||
| &.euiFilePicker-hasFiles.euiFilePicker--compressed .euiFilePicker__prompt { | ||
| // Make space for the icons on the right | ||
| .euiFilePicker:not(.euiFilePicker--large) { | ||
| &.euiFilePicker-isLoading .euiFilePicker__prompt, | ||
| &.euiFilePicker-hasFiles .euiFilePicker__prompt { | ||
| @include euiFormControlWithIcon(false, 'right'); /* 3 */ | ||
| } | ||
| } | ||
|
|
||
| // When the filepicker has files in it, but not in compressed mode | ||
| &:not(.euiFilePicker--compressed).euiFilePicker-hasFiles .euiFilePicker__promptText { | ||
| font-weight: $euiFontWeightBold; | ||
| } | ||
| // When the filepicker has files in it | ||
| .euiFilePicker-hasFiles .euiFilePicker__promptText { | ||
| color: $euiTextColor; | ||
| } | ||
|
|
||
| // Large styles only | ||
| .euiFilePicker--large { | ||
| // sass-lint:disable-block nesting-depth | ||
| // Hover and focus | ||
| .euiFilePicker__input:hover:not(:disabled), | ||
| .euiFilePicker__input:focus { | ||
| + .euiFilePicker__prompt { | ||
| .euiFilePicker__promptText { | ||
| // Adding the underline to the prompt text ensures the underline | ||
| // color is the same as the current text color | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| // When the filepicker has files in it, AND in compressed mode | ||
| &.euiFilePicker--compressed.euiFilePicker-hasFiles .euiFilePicker__promptText { | ||
| color: $euiTextColor; | ||
| .euiFilePicker__icon { | ||
| transform: scale(1.1); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // When you are dragging files over the dropzone | ||
| // While dragging files over the dropzone | ||
| &.euiFilePicker__showDrop .euiFilePicker__prompt { | ||
| @include euiFormControlFocusStyle; | ||
|
|
||
| .euiFilePicker__promptText { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .euiFilePicker__icon { | ||
| transform: scale(1.1); | ||
| color: $euiColorPrimary; | ||
| } | ||
| } | ||
|
|
||
| &.euiFilePicker-hasFiles .euiFilePicker__promptText { | ||
| font-weight: $euiFontWeightBold; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| @import 'variables'; | ||
| @import 'file_picker'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| $euiFilePickerTallHeight: $euiSize * 8; |
Oops, something went wrong.