[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/blocks/navigation/ -> style.css (source)

   1  .wp-block-navigation{
   2    position:relative;
   3  }
   4  .wp-block-navigation ul{
   5    margin-bottom:0;
   6    margin-left:0;
   7    margin-top:0;
   8    padding-left:0;
   9  }
  10  .wp-block-navigation ul,.wp-block-navigation ul li{
  11    list-style:none;
  12    padding:0;
  13  }
  14  .wp-block-navigation .wp-block-navigation-item{
  15    align-items:center;
  16    background-color:inherit;
  17    display:flex;
  18    position:relative;
  19  }
  20  .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{
  21    display:none;
  22  }
  23  .wp-block-navigation .wp-block-navigation-item__content{
  24    display:block;
  25    z-index:1;
  26  }
  27  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{
  28    color:inherit;
  29  }
  30  .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{
  31    text-decoration:underline;
  32  }
  33  .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{
  34    text-decoration:line-through;
  35  }
  36  .wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){
  37    text-decoration:none;
  38  }
  39  .wp-block-navigation .wp-block-navigation__submenu-icon{
  40    align-self:center;
  41    background-color:inherit;
  42    border:none;
  43    color:currentColor;
  44    display:inline-block;
  45    font-size:inherit;
  46    height:.6em;
  47    line-height:0;
  48    margin-left:.25em;
  49    padding:0;
  50    width:.6em;
  51  }
  52  .wp-block-navigation .wp-block-navigation__submenu-icon svg{
  53    display:inline-block;
  54    stroke:currentColor;
  55    height:inherit;
  56    margin-top:.075em;
  57    width:inherit;
  58  }
  59  .wp-block-navigation{
  60    --navigation-layout-justification-setting:flex-start;
  61    --navigation-layout-direction:row;
  62    --navigation-layout-wrap:wrap;
  63    --navigation-layout-justify:flex-start;
  64    --navigation-layout-align:center;
  65  }
  66  .wp-block-navigation.is-vertical{
  67    --navigation-layout-direction:column;
  68    --navigation-layout-justify:initial;
  69    --navigation-layout-align:flex-start;
  70  }
  71  .wp-block-navigation.no-wrap{
  72    --navigation-layout-wrap:nowrap;
  73  }
  74  .wp-block-navigation.items-justified-center{
  75    --navigation-layout-justification-setting:center;
  76    --navigation-layout-justify:center;
  77  }
  78  .wp-block-navigation.items-justified-center.is-vertical{
  79    --navigation-layout-align:center;
  80  }
  81  .wp-block-navigation.items-justified-right{
  82    --navigation-layout-justification-setting:flex-end;
  83    --navigation-layout-justify:flex-end;
  84  }
  85  .wp-block-navigation.items-justified-right.is-vertical{
  86    --navigation-layout-align:flex-end;
  87  }
  88  .wp-block-navigation.items-justified-space-between{
  89    --navigation-layout-justification-setting:space-between;
  90    --navigation-layout-justify:space-between;
  91  }
  92  
  93  .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
  94    align-items:normal;
  95    background-color:inherit;
  96    color:inherit;
  97    display:flex;
  98    flex-direction:column;
  99    opacity:0;
 100    position:absolute;
 101    z-index:2;
 102  }
 103  @media not (prefers-reduced-motion){
 104    .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
 105      transition:opacity .1s linear;
 106    }
 107  }
 108  .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
 109    height:0;
 110    overflow:hidden;
 111    visibility:hidden;
 112    width:0;
 113  }
 114  .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{
 115    display:flex;
 116    flex-grow:1;
 117    padding:.5em 1em;
 118  }
 119  .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
 120    margin-left:auto;
 121    margin-right:0;
 122  }
 123  .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
 124    margin:0;
 125  }
 126  .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
 127    left:-1px;
 128    top:100%;
 129  }
 130  @media (min-width:782px){
 131    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
 132      left:100%;
 133      top:-1px;
 134    }
 135    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{
 136      background:#0000;
 137      content:"";
 138      display:block;
 139      height:100%;
 140      position:absolute;
 141      right:100%;
 142      width:.5em;
 143    }
 144    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{
 145      margin-right:.25em;
 146    }
 147    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{
 148      transform:rotate(-90deg);
 149    }
 150  }
 151  .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{
 152    height:auto;
 153    min-width:200px;
 154    opacity:1;
 155    overflow:visible;
 156    visibility:visible;
 157    width:auto;
 158  }
 159  
 160  .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{
 161    left:0;
 162    top:100%;
 163  }
 164  @media (min-width:782px){
 165    .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
 166      left:100%;
 167      top:0;
 168    }
 169  }
 170  
 171  .wp-block-navigation-submenu{
 172    display:flex;
 173    position:relative;
 174  }
 175  .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{
 176    stroke:currentColor;
 177  }
 178  
 179  button.wp-block-navigation-item__content{
 180    background-color:initial;
 181    border:none;
 182    color:currentColor;
 183    font-family:inherit;
 184    font-size:inherit;
 185    font-style:inherit;
 186    font-weight:inherit;
 187    letter-spacing:inherit;
 188    line-height:inherit;
 189    text-align:left;
 190    text-transform:inherit;
 191  }
 192  
 193  .wp-block-navigation-submenu__toggle{
 194    cursor:pointer;
 195  }
 196  .wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-icon>svg,.wp-block-navigation-submenu__toggle[aria-expanded=true]>svg{
 197    transform:rotate(180deg);
 198  }
 199  
 200  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{
 201    padding-left:0;
 202    padding-right:.85em;
 203  }
 204  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{
 205    margin-left:-.6em;
 206    pointer-events:none;
 207  }
 208  
 209  .wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){
 210    padding:0;
 211  }
 212  .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{
 213    gap:inherit;
 214  }
 215  :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)){
 216    padding:.5em 1em;
 217  }
 218  
 219  :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){
 220    padding:.5em 1em;
 221  }
 222  .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{
 223    left:auto;
 224    right:0;
 225  }
 226  .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{
 227    left:-1px;
 228    right:-1px;
 229  }
 230  @media (min-width:782px){
 231    .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{
 232      left:auto;
 233      right:100%;
 234    }
 235  }
 236  
 237  .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
 238    background-color:#fff;
 239    border:1px solid #00000026;
 240  }
 241  
 242  .wp-block-navigation.has-background .wp-block-navigation__submenu-container{
 243    background-color:inherit;
 244  }
 245  
 246  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{
 247    color:#000;
 248  }
 249  
 250  .wp-block-navigation__container{
 251    align-items:var(--navigation-layout-align, initial);
 252    display:flex;
 253    flex-direction:var(--navigation-layout-direction, initial);
 254    flex-wrap:var(--navigation-layout-wrap, wrap);
 255    justify-content:var(--navigation-layout-justify, initial);
 256    list-style:none;
 257    margin:0;
 258    padding-left:0;
 259  }
 260  .wp-block-navigation__container .is-responsive{
 261    display:none;
 262  }
 263  
 264  .wp-block-navigation__container:only-child,.wp-block-page-list:only-child{
 265    flex-grow:1;
 266  }
 267  @keyframes overlay-menu__fade-in-animation{
 268    0%{
 269      opacity:0;
 270      transform:translateY(.5em);
 271    }
 272    to{
 273      opacity:1;
 274      transform:translateY(0);
 275    }
 276  }
 277  .wp-block-navigation__responsive-container{
 278    bottom:0;
 279    display:none;
 280    left:0;
 281    position:fixed;
 282    right:0;
 283    top:0;
 284  }
 285  .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){
 286    color:inherit;
 287  }
 288  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
 289    align-items:var(--navigation-layout-align, initial);
 290    display:flex;
 291    flex-direction:var(--navigation-layout-direction, initial);
 292    flex-wrap:var(--navigation-layout-wrap, wrap);
 293    justify-content:var(--navigation-layout-justify, initial);
 294  }
 295  .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){
 296    background-color:inherit !important;
 297    color:inherit !important;
 298  }
 299  .wp-block-navigation__responsive-container.is-menu-open{
 300    background-color:inherit;
 301    display:flex;
 302    flex-direction:column;
 303  }
 304  @media not (prefers-reduced-motion){
 305    .wp-block-navigation__responsive-container.is-menu-open{
 306      animation:overlay-menu__fade-in-animation .1s ease-out;
 307      animation-fill-mode:forwards;
 308    }
 309  }
 310  .wp-block-navigation__responsive-container.is-menu-open{
 311    overflow:auto;
 312    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), 20rem);
 313    z-index:100000;
 314  }
 315  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
 316    align-items:var(--navigation-layout-justification-setting, inherit);
 317    display:flex;
 318    flex-direction:column;
 319    flex-wrap:nowrap;
 320    overflow:visible;
 321    padding-top:calc(2rem + 24px);
 322  }
 323  .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{
 324    justify-content:flex-start;
 325  }
 326  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{
 327    display:none;
 328  }
 329  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
 330    border:none;
 331    height:auto;
 332    min-width:200px;
 333    opacity:1;
 334    overflow:initial;
 335    padding-left:2rem;
 336    padding-right:2rem;
 337    position:static;
 338    visibility:visible;
 339    width:auto;
 340  }
 341  .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{
 342    gap:inherit;
 343  }
 344  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
 345    padding-top:var(--wp--style--block-gap, 2em);
 346  }
 347  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
 348    padding:0;
 349  }
 350  .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{
 351    align-items:var(--navigation-layout-justification-setting, initial);
 352    display:flex;
 353    flex-direction:column;
 354  }
 355  .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{
 356    background:#0000 !important;
 357    color:inherit !important;
 358  }
 359  .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{
 360    left:auto;
 361    right:auto;
 362  }
 363  @media (min-width:600px){
 364    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
 365      background-color:inherit;
 366      display:block;
 367      position:relative;
 368      width:100%;
 369      z-index:auto;
 370    }
 371    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{
 372      display:none;
 373    }
 374    .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{
 375      left:0;
 376    }
 377  }
 378  
 379  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
 380    background-color:#fff;
 381  }
 382  
 383  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{
 384    color:#000;
 385  }
 386  
 387  .wp-block-navigation__toggle_button_label{
 388    font-size:1rem;
 389    font-weight:700;
 390  }
 391  
 392  .wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{
 393    background:#0000;
 394    border:none;
 395    color:currentColor;
 396    cursor:pointer;
 397    margin:0;
 398    padding:0;
 399    text-transform:inherit;
 400    vertical-align:middle;
 401  }
 402  .wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{
 403    fill:currentColor;
 404    display:block;
 405    height:24px;
 406    pointer-events:none;
 407    width:24px;
 408  }
 409  
 410  .wp-block-navigation__responsive-container-open{
 411    display:flex;
 412  }
 413  .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{
 414    font-family:inherit;
 415    font-size:inherit;
 416    font-weight:inherit;
 417  }
 418  @media (min-width:600px){
 419    .wp-block-navigation__responsive-container-open:not(.always-shown){
 420      display:none;
 421    }
 422  }
 423  
 424  .wp-block-navigation__responsive-container-close{
 425    position:absolute;
 426    right:0;
 427    top:0;
 428    z-index:2;
 429  }
 430  .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{
 431    font-family:inherit;
 432    font-size:inherit;
 433    font-weight:inherit;
 434  }
 435  
 436  .wp-block-navigation__responsive-close{
 437    width:100%;
 438  }
 439  .has-modal-open .wp-block-navigation__responsive-close{
 440    margin-left:auto;
 441    margin-right:auto;
 442    max-width:var(--wp--style--global--wide-size, 100%);
 443  }
 444  .wp-block-navigation__responsive-close:focus{
 445    outline:none;
 446  }
 447  
 448  .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{
 449    box-sizing:border-box;
 450  }
 451  
 452  .wp-block-navigation__responsive-dialog{
 453    position:relative;
 454  }
 455  
 456  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
 457    margin-top:46px;
 458  }
 459  @media (min-width:782px){
 460    .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
 461      margin-top:32px;
 462    }
 463  }
 464  
 465  html.has-modal-open{
 466    overflow:hidden;
 467  }


Generated : Thu Oct 23 08:20:05 2025 Cross-referenced by PHPXref