Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-11-05 10:22:23 +01:00
Code Issues Projects Releases Wiki Activity
fac1c328d8
WordPress/wp-includes/blocks/navigation/style.css
youknowriad 1de40f71be Editor: Update the WordPress packages to the Gutenberg 16.7 RC2 version. 
This patch, somewhat small brings a lot to WordPress. 
This includes features like:

 - DataViews.
 - Customization tools like box shadow, background size and repeat.
 - UI improvements in the site editor. 
 - Preferences sharing between the post and site editors.
 - Unified panels and editors between post and site editors.
 - Improved template mode in the post editor.
 - Iterations to multiple interactive blocks.
 - Preparing the blocks and UI for pattern overrides.
 - and a lot more.

Props luisherranz, gziolo, isabel_brison, costdev, jonsurrell, peterwilsoncc, get_dave, antonvlasenko, desrosj.
See #60315.
Built from https://develop.svn.wordpress.org/trunk@57377


git-svn-id: http://core.svn.wordpress.org/trunk@56883 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-01-29 21:07:12 +00:00

466 lines
17 KiB
CSS
Raw Blame History

.wp-block-navigation{
--navigation-layout-justification-setting:flex-start;
--navigation-layout-direction:row;
--navigation-layout-wrap:wrap;
--navigation-layout-justify:flex-start;
--navigation-layout-align:center;
position:relative;
}
.wp-block-navigation ul{
margin-bottom:0;
margin-left:0;
margin-top:0;
padding-left:0;
}
.wp-block-navigation ul,.wp-block-navigation ul li{
list-style:none;
padding:0;
}
.wp-block-navigation .wp-block-navigation-item{
align-items:center;
background-color:inherit;
display:flex;
position:relative;
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{
display:none;
}
.wp-block-navigation .wp-block-navigation-item__content{
display:block;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{
color:inherit;
}
.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{
text-decoration:underline;
}
.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{
text-decoration:line-through;
}
.wp-block-navigation:where(:not([class*=has-text-decoration])) a{
text-decoration:none;
}
.wp-block-navigation:where(:not([class*=has-text-decoration])) a:active,.wp-block-navigation:where(:not([class*=has-text-decoration])) a:focus{
text-decoration:none;
}
.wp-block-navigation .wp-block-navigation__submenu-icon{
align-self:center;
background-color:inherit;
border:none;
color:currentColor;
display:inline-block;
font-size:inherit;
height:.6em;
line-height:0;
margin-left:.25em;
padding:0;
width:.6em;
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg{
stroke:currentColor;
display:inline-block;
height:inherit;
margin-top:.075em;
width:inherit;
}
.wp-block-navigation.is-vertical{
--navigation-layout-direction:column;
--navigation-layout-justify:initial;
--navigation-layout-align:flex-start;
}
.wp-block-navigation.no-wrap{
--navigation-layout-wrap:nowrap;
}
.wp-block-navigation.items-justified-center{
--navigation-layout-justification-setting:center;
--navigation-layout-justify:center;
}
.wp-block-navigation.items-justified-center.is-vertical{
--navigation-layout-align:center;
}
.wp-block-navigation.items-justified-right{
--navigation-layout-justification-setting:flex-end;
--navigation-layout-justify:flex-end;
}
.wp-block-navigation.items-justified-right.is-vertical{
--navigation-layout-align:flex-end;
}
.wp-block-navigation.items-justified-space-between{
--navigation-layout-justification-setting:space-between;
--navigation-layout-justify:space-between;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container{
align-items:normal;
background-color:inherit;
color:inherit;
display:flex;
flex-direction:column;
height:0;
left:-1px;
opacity:0;
overflow:hidden;
position:absolute;
top:100%;
transition:opacity .1s linear;
visibility:hidden;
width:0;
z-index:2;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{
display:flex;
flex-grow:1;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
margin-left:auto;
margin-right:0;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
margin:0;
}
@media (min-width:782px){
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
left:100%;
top:-1px;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{
background:transparent;
content:"";
display:block;
height:100%;
position:absolute;
right:100%;
width:.5em;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{
margin-right:.25em;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{
transform:rotate(-90deg);
}
}
.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container{
height:auto;
min-width:200px;
opacity:1;
overflow:visible;
visibility:visible;
width:auto;
}
.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{
height:auto;
min-width:200px;
opacity:1;
overflow:visible;
visibility:visible;
width:auto;
}
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container{
height:auto;
min-width:200px;
opacity:1;
overflow:visible;
visibility:visible;
width:auto;
}
.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{
left:0;
top:100%;
}
@media (min-width:782px){
.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
left:100%;
top:0;
}
}
.wp-block-navigation-submenu{
display:flex;
position:relative;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{
stroke:currentColor;
}
button.wp-block-navigation-item__content{
background-color:transparent;
border:none;
color:currentColor;
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
line-height:inherit;
text-align:left;
text-transform:inherit;
}
.wp-block-navigation-submenu__toggle{
cursor:pointer;
}
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{
padding-left:0;
padding-right:.85em;
}
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{
margin-left:-.6em;
pointer-events:none;
}
.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){
padding:0;
}
.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{
gap:inherit;
}
:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){
padding:.5em 1em;
}
:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){
padding:.5em 1em;
}
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{
left:auto;
right:0;
}
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
left:-1px;
right:-1px;
}
@media (min-width:782px){
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
left:auto;
right:100%;
}
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
background-color:#fff;
border:1px solid rgba(0,0,0,.15);
}
.wp-block-navigation.has-background .wp-block-navigation__submenu-container{
background-color:inherit;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{
color:#000;
}
.wp-block-navigation__container{
align-items:var(--navigation-layout-align, initial);
display:flex;
flex-direction:var(--navigation-layout-direction, initial);
flex-wrap:var(--navigation-layout-wrap, wrap);
justify-content:var(--navigation-layout-justify, initial);
list-style:none;
margin:0;
padding-left:0;
}
.wp-block-navigation__container .is-responsive{
display:none;
}
.wp-block-navigation__container:only-child,.wp-block-page-list:only-child{
flex-grow:1;
}
@keyframes overlay-menu__fade-in-animation{
0%{
opacity:0;
transform:translateY(.5em);
}
to{
opacity:1;
transform:translateY(0);
}
}
.wp-block-navigation__responsive-container{
bottom:0;
display:none;
left:0;
position:fixed;
right:0;
top:0;
}
.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){
color:inherit;
}
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
align-items:var(--navigation-layout-align, initial);
display:flex;
flex-direction:var(--navigation-layout-direction, initial);
flex-wrap:var(--navigation-layout-wrap, wrap);
justify-content:var(--navigation-layout-justify, initial);
}
.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){
background-color:inherit !important;
color:inherit !important;
}
.wp-block-navigation__responsive-container.is-menu-open{
animation:overlay-menu__fade-in-animation .1s ease-out;
animation-fill-mode:forwards;
background-color:inherit;
display:flex;
flex-direction:column;
overflow:auto;
padding:clamp(1rem, var(--wp--style--root--padding-top), 20rem) clamp(1rem, var(--wp--style--root--padding-right), 20rem) clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) clamp(1rem, var(--wp--style--root--padding-left), 20em);
z-index:100000;
}
@media (prefers-reduced-motion:reduce){
.wp-block-navigation__responsive-container.is-menu-open{
animation-delay:0s;
animation-duration:1ms;
}
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
align-items:var(--navigation-layout-justification-setting, inherit);
display:flex;
flex-direction:column;
flex-wrap:nowrap;
overflow:visible;
padding-top:calc(2rem + 24px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{
justify-content:flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{
display:none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
border:none;
height:auto;
min-width:200px;
opacity:1;
overflow:initial;
padding-left:2rem;
padding-right:2rem;
position:static;
visibility:visible;
width:auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
gap:inherit;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
padding-top:var(--wp--style--block-gap, 2em);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
padding:0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{
align-items:var(--navigation-layout-justification-setting, initial);
display:flex;
flex-direction:column;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{
background:transparent !important;
color:inherit !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{
left:auto;
right:auto;
}
:not(.is-collapsed)>.wp-block-navigation__responsive-container:not(.is-menu-open){
background-color:inherit;
display:block;
position:relative;
width:100%;
z-index:auto;
}
:not(.is-collapsed)>.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close{
display:none;
}
:not(.is-collapsed)>.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{
left:0;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
background-color:#fff;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{
color:#000;
}
.wp-block-navigation__toggle_button_label{
font-size:1rem;
font-weight:700;
}
.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{
background:transparent;
border:none;
color:currentColor;
cursor:pointer;
margin:0;
padding:0;
text-transform:inherit;
vertical-align:middle;
}
.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{
fill:currentColor;
display:block;
height:24px;
pointer-events:none;
width:24px;
}
.wp-block-navigation__responsive-container-open{
display:flex;
}
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
:not(.is-collapsed)>.wp-block-navigation__responsive-container-open{
display:none;
}
.wp-block-navigation__responsive-container-close{
position:absolute;
right:0;
top:0;
z-index:2;
}
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
.wp-block-navigation__responsive-close{
width:100%;
}
.has-modal-open .wp-block-navigation__responsive-close{
margin-left:auto;
margin-right:auto;
max-width:var(--wp--style--global--wide-size, 100%);
}
.wp-block-navigation__responsive-close:focus{
outline:none;
}
.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{
box-sizing:border-box;
}
.wp-block-navigation__responsive-dialog{
position:relative;
}
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
margin-top:46px;
}
@media (min-width:782px){
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
margin-top:32px;
}
}
html.has-modal-open{
overflow:hidden;
}
Reference in New Issue View Git Blame Copy Permalink