angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_style.scss (2381B)

      1 .wp-block-navigation {
      2 
      3 	.wp-block-navigation-link {
      4 		padding: 0;
      5 
      6 		.wp-block-navigation-link__content {
      7 			padding: var(--primary-nav--padding);
      8 		}
      9 
     10 		.wp-block-navigation-link__label {
     11 			font-family: var(--primary-nav--font-family);
     12 			font-size: var(--primary-nav--font-size);
     13 			font-weight: var(--primary-nav--font-weight);
     14 		}
     15 	}
     16 
     17 	.wp-block-navigation-link__submenu-icon {
     18 		padding: 0;
     19 	}
     20 
     21 	// Top level navigation container.
     22 	> .wp-block-navigation__container {
     23 
     24 		.has-child {
     25 
     26 			.wp-block-navigation-link {
     27 				display: inherit;
     28 			}
     29 
     30 			.wp-block-navigation__container {
     31 				border: none;
     32 				left: 0;
     33 				margin-left: var(--primary-nav--padding);
     34 				min-width: max-content;
     35 				opacity: 0;
     36 				padding: 0;
     37 				position: inherit;
     38 				top: inherit;
     39 
     40 				.wp-block-navigation-link {
     41 
     42 					.wp-block-navigation-link__content {
     43 						display: inline-block;
     44 						padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
     45 					}
     46 				}
     47 
     48 				.wp-block-navigation-link__submenu-icon {
     49 					display: none;
     50 				}
     51 			}
     52 
     53 			&:hover,
     54 			&:focus-within {
     55 
     56 				.wp-block-navigation__container {
     57 					display: block;
     58 					opacity: 1;
     59 					visibility: visible;
     60 				}
     61 			}
     62 		}
     63 
     64 		> .has-child {
     65 
     66 			> .wp-block-navigation__container {
     67 				background: var(--global--color-background);
     68 				margin: 0;
     69 				padding: 0;
     70 				position: absolute;
     71 				top: 100%;
     72 				border: 1px solid var(--primary-nav--border-color);
     73 
     74 				&:before,
     75 				&:after {
     76 					content: "";
     77 					display: block;
     78 					position: absolute;
     79 					width: 0;
     80 					top: -10px;
     81 					left: var(--global--spacing-horizontal);
     82 					border-style: solid;
     83 					border-color: var(--primary-nav--border-color) transparent;
     84 					border-width: 0 7px 10px 7px;
     85 				}
     86 
     87 				&:after {
     88 					top: -9px;
     89 					border-color: var(--global--color-background) transparent;
     90 				}
     91 			}
     92 		}
     93 	}
     94 
     95 	&:not(.has-background) {
     96 
     97 		.wp-block-navigation__container {
     98 			background: var(--global--color-background);
     99 
    100 			.wp-block-navigation__container {
    101 				background: var(--global--color-background);
    102 			}
    103 		}
    104 	}
    105 
    106 	&:not(.has-text-color) {
    107 
    108 		.wp-block-navigation-link {
    109 
    110 			> a {
    111 
    112 				&:hover,
    113 				&:focus {
    114 					color: var(--primary-nav--color-link-hover);
    115 				}
    116 
    117 				&:hover {
    118 					text-decoration: underline;
    119 					text-decoration-style: dotted;
    120 				}
    121 			}
    122 		}
    123 
    124 		.wp-block-navigation-link__content {
    125 			color: currentColor;
    126 		}
    127 	}
    128 }