-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cleanup URL Popover stylesheet. (#14015)
As noted in #13973, this stylesheet uses a relatively non-standard SCSS method of nesting some classnames. For instance: `.editor-url-popover { &__settings-toggle { ... } }`. ... instead of: `.editor-url-popover__settings-toggle { ... }` This is different from the conventions used elsewhere in Gutenberg, and is a bit more difficult to follow for that reason. This commit un-nests those styles, and should have no effect on the compiled CSS.
- Loading branch information
Showing
1 changed file
with
41 additions
and
43 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,59 @@ | ||
| .editor-url-popover { | ||
| &__row { | ||
| display: flex; | ||
| } | ||
| .editor-url-popover__row { | ||
| display: flex; | ||
| } | ||
|
|
||
| // Any children of the popover-row that are not the settings-toggle | ||
| // should take up as much space as possible. | ||
| &__row > :not(.editor-url-popover__settings-toggle) { | ||
| flex-grow: 1; | ||
| } | ||
| // Any children of the popover-row that are not the settings-toggle | ||
| // should take up as much space as possible. | ||
| .editor-url-popover__row > :not(.editor-url-popover__settings-toggle) { | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| // Mimic toolbar component styles for the icons in this popover. | ||
| .components-icon-button { | ||
| padding: 3px; | ||
| // Mimic toolbar component styles for the icons in this popover. | ||
| .editor-url-popover .components-icon-button { | ||
| padding: 3px; | ||
|
|
||
| > svg { | ||
| padding: 5px; | ||
| border-radius: $radius-round-rectangle; | ||
| height: 30px; | ||
| width: 30px; | ||
| } | ||
| > svg { | ||
| padding: 5px; | ||
| border-radius: $radius-round-rectangle; | ||
| height: 30px; | ||
| width: 30px; | ||
| } | ||
|
|
||
| &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { | ||
| box-shadow: none; | ||
| &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { | ||
| box-shadow: none; | ||
|
|
||
| > svg { | ||
| @include formatting-button-style__hover; | ||
| } | ||
| > svg { | ||
| @include formatting-button-style__hover; | ||
| } | ||
| } | ||
|
|
||
| &:not(:disabled):focus { | ||
| box-shadow: none; | ||
| &:not(:disabled):focus { | ||
| box-shadow: none; | ||
|
|
||
| > svg { | ||
| @include formatting-button-style__focus; | ||
| } | ||
| > svg { | ||
| @include formatting-button-style__focus; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__settings-toggle { | ||
| flex-shrink: 0; | ||
| .editor-url-popover__settings-toggle { | ||
| flex-shrink: 0; | ||
|
|
||
| // Add a left divider to the toggle button. | ||
| border-radius: 0; | ||
| border-left: $border-width solid $light-gray-500; | ||
| margin-left: 1px; | ||
| // Add a left divider to the toggle button. | ||
| border-radius: 0; | ||
| border-left: $border-width solid $light-gray-500; | ||
| margin-left: 1px; | ||
|
|
||
| &[aria-expanded="true"] .dashicon { | ||
| transform: rotate(180deg); | ||
| } | ||
| &[aria-expanded="true"] .dashicon { | ||
| transform: rotate(180deg); | ||
| } | ||
| } | ||
|
|
||
| &__settings { | ||
| padding: $panel-padding; | ||
| border-top: $border-width solid $light-gray-500; | ||
| .editor-url-popover__settings { | ||
| padding: $panel-padding; | ||
| border-top: $border-width solid $light-gray-500; | ||
|
|
||
| .components-base-control:last-child .components-base-control__field { | ||
| margin-bottom: 0; | ||
| } | ||
| .components-base-control:last-child .components-base-control__field { | ||
| margin-bottom: 0; | ||
| } | ||
| } |