primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Generalize styles for overlay components

Browse Source 
Changes to

- Dropdowns
- Popovers
- Select-menus
This commit is contained in:
Aurora Pleguezuelo 2020-10-29 16:38:40 +01:00
parent b7eef5a1f7
commit 225b2c10a5
3 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/dropdown/dropdown.scss
View File

@ -30,9 +30,9 @@
// stylelint-disable-next-line primer/spacing
margin-top: 2px;
list-style: none;
background-color: var(--color-dropdown-bg);
background-color: var(--color-bg-overlay);
background-clip: padding-box;
border: $border-width $border-style var(--color-dropdown-border);
border: $border-width $border-style var(--color-border-overlay);
border-radius: $border-radius;
box-shadow: var(--color-dropdown-shadow);
@ -47,7 +47,7 @@
&::before {
// stylelint-disable-next-line primer/borders
border: $spacer-2 $border-style transparent;
border-bottom-color: var(--color-dropdown-border);
border-bottom-color: var(--color-border-overlay);
}
// caret background (should match dropdown background)
@ -55,7 +55,7 @@
// stylelint-disable-next-line primer/borders
border: 7px $border-style transparent;
// stylelint-disable-next-line primer/borders
border-bottom-color: var(--color-dropdown-bg);
border-bottom-color: var(--color-bg-overlay);
}
// stylelint-disable-next-line selector-max-type
@ -113,7 +113,7 @@
display: block;
height: 0;
margin: $spacer-2 0;
border-top: $border-width $border-style var(--color-dropdown-border);
border-top: $border-width $border-style var(--color-border-overlay);
}
.dropdown-header {
@ -144,7 +144,7 @@
right: -$spacer-3;
left: auto;
border-color: transparent;
border-left-color: var(--color-dropdown-border);
border-left-color: var(--color-border-overlay);
}
&::after {
@ -153,7 +153,7 @@
left: auto;
border-color: transparent;
// stylelint-disable-next-line primer/borders
border-left-color: var(--color-dropdown-bg);
border-left-color: var(--color-bg-overlay);
}
}
@ -168,7 +168,7 @@
top: 10px;
left: -$spacer-3;
border-color: transparent;
border-right-color: var(--color-dropdown-border);
border-right-color: var(--color-border-overlay);
}
&::after {
@ -176,7 +176,7 @@
left: -14px;
border-color: transparent;
// stylelint-disable-next-line primer/borders
border-right-color: var(--color-dropdown-bg);
border-right-color: var(--color-bg-overlay);
}
}
@ -197,7 +197,7 @@
bottom: -$spacer-2;
left: 9px;
// stylelint-disable-next-line primer/borders
border-top: $spacer-2 $border-style var(--color-dropdown-border);
border-top: $spacer-2 $border-style var(--color-border-overlay);
// stylelint-disable-next-line primer/borders
border-right: $spacer-2 $border-style transparent;
border-bottom: 0;
@ -209,7 +209,7 @@
bottom: -7px;
left: 10px;
// stylelint-disable-next-line primer/borders
border-top: 7px $border-style var(--color-dropdown-bg);
border-top: 7px $border-style var(--color-bg-overlay);
// stylelint-disable-next-line primer/borders
border-right: 7px $border-style transparent;
border-bottom: 0;

16
src/popover/popover.scss
View File

@ -24,7 +24,7 @@
margin-left: -9px;
// stylelint-disable-next-line primer/borders
border: $spacer-2 $border-style transparent;
border-bottom-color: var(--color-popover-border);
border-bottom-color: var(--color-border-overlay);
}
&::after {
@ -33,7 +33,7 @@
// stylelint-disable-next-line primer/borders
border: 7px $border-style transparent;
// stylelint-disable-next-line primer/borders
border-bottom-color: var(--color-bg-primary);
border-bottom-color: var(--color-bg-overlay);
}
}
@ -49,13 +49,13 @@
&::before {
bottom: -$spacer-3;
border-top-color: var(--color-popover-border);
border-top-color: var(--color-border-overlay);
}
&::after {
bottom: -14px;
// stylelint-disable-next-line primer/borders
border-top-color: var(--color-bg-primary);
border-top-color: var(--color-bg-overlay);
}
}
@ -128,13 +128,13 @@
.Popover-message--right-bottom {
&::before {
right: -$spacer-3;
border-left-color: var(--color-popover-border);
border-left-color: var(--color-border-overlay);
}
&::after {
right: -14px;
// stylelint-disable-next-line primer/borders
border-left-color: var(--color-bg-primary);
border-left-color: var(--color-bg-overlay);
}
}
@ -144,13 +144,13 @@
.Popover-message--left-bottom {
&::before {
left: -$spacer-3;
border-right-color: var(--color-popover-border);
border-right-color: var(--color-border-overlay);
}
&::after {
left: -14px;
// stylelint-disable-next-line primer/borders
border-right-color: var(--color-bg-primary);
border-right-color: var(--color-bg-overlay);
}
}

17
src/select-menu/select-menu.scss
View File

@ -61,7 +61,7 @@ $SelectMenu-max-height: 480px !default;
overflow: hidden; // Enables border radius on scrollable child elements
pointer-events: auto;
flex-direction: column;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
border: $border-width $border-style var(--color-select-menu-backdrop-border);
// stylelint-disable-next-line primer/borders
border-radius: $border-radius * 2;
@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default;
max-height: $SelectMenu-max-height;
margin: $spacer-2 0 $spacer-3 0;
font-size: $font-size-small;
border-color: var(--color-select-menu-border);
border-color: var(--color-border-overlay);
border-radius: $border-radius;
box-shadow: var(--color-shadow-large);
animation-name: SelectMenu-modal-animation--sm;
@ -174,7 +174,7 @@ $SelectMenu-max-height: 480px !default;
flex: auto;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
-webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
}
@ -191,7 +191,7 @@ $SelectMenu-max-height: 480px !default;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
border: 0;
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
@ -273,7 +273,7 @@ $SelectMenu-max-height: 480px !default;
z-index: 1; // Keeps box-shadow visible when hovering
color: var(--color-text-primary);
cursor: default;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary);
@ -292,7 +292,7 @@ $SelectMenu-max-height: 480px !default;
// stylelint-disable-next-line primer/spacing
padding: 7px $spacer-3;
text-align: center;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
}
@ -304,7 +304,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-loading {
padding: $spacer-4 $spacer-3;
text-align: center;
background-color: var(--color-select-menu-bg);
background-color: var(--color-bg-overlay);
}
// Divider
@ -431,6 +431,9 @@ $SelectMenu-max-height: 480px !default;
background-color: var(--color-bg-secondary);
}
// Needs to be replaced with a state background
//
body:not(.intent-mouse) .SelectMenu-tab:focus {
background-color: var(--color-select-menu-tap-focus-bg);
}