Browse Source

add an RTL stylesheet for the navigation

Ben Dwyer 4 years ago
parent
commit
2e239058e7
3 changed files with 466 additions and 1 deletions
  1. 463 0
      seedlet/assets/css/style-navigation-rtl.css
  2. 1 0
      seedlet/functions.php
  3. 2 1
      seedlet/package.json

+ 463 - 0
seedlet/assets/css/style-navigation-rtl.css

@@ -0,0 +1,463 @@
+/**
+ * Required Variables
+ */
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	right: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-right: auto;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button,
+.primary-navigation .button,
+.woo-navigation .button {
+	font-size: var(--primary-nav--font-size);
+	background-color: transparent;
+	color: var(--primary-nav--color-link);
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+	z-index: 501;
+}
+
+.menu-button-container .button#woo-open-menu,
+.primary-navigation .button#woo-open-menu,
+.woo-navigation .button#woo-open-menu {
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon,
+.primary-navigation .button#woo-open-menu .svg-icon,
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-right: 0;
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon,
+.primary-navigation .button .dropdown-icon .svg-icon,
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.primary-navigation,
+.woo-navigation {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--primary-nav--color-text);
+	font-size: var(--primary-nav--font-size);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+@media only screen and (max-width: 481px) {
+	.primary-navigation,
+	.woo-navigation {
+		width: 100%;
+	}
+}
+
+.primary-navigation > div,
+.woo-navigation > div {
+	visibility: hidden;
+	opacity: 0;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
+	background-color: var(--global--color-background);
+	overflow-x: hidden;
+	overflow-y: scroll;
+	transition: all .15s ease-in-out;
+	transform: translateY(var(--global--spacing-vertical));
+}
+
+@media only screen and (max-width: 481px) {
+	.primary-navigation > div,
+	.woo-navigation > div {
+		z-index: 499;
+	}
+}
+
+.primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
+.woo-navigation > .primary-menu-container {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.lock-scrolling .primary-navigation > .button, .lock-scrolling
+.woo-navigation > .button {
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+.admin-bar .primary-navigation,
+.admin-bar .primary-navigation > div,
+.admin-bar.lock-scrolling .primary-navigation > .button, .admin-bar
+.woo-navigation,
+.admin-bar
+.woo-navigation > div,
+.admin-bar.lock-scrolling
+.woo-navigation > .button {
+	top: 46px;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation,
+	.woo-navigation {
+		position: relative;
+		display: flex;
+		justify-content: var(--primary-nav--justify-content);
+		margin-top: calc( var(--global--spacing-vertical) * 1.5);
+	}
+	.primary-navigation > div,
+	.woo-navigation > div {
+		visibility: visible;
+		opacity: 1;
+		position: relative;
+		padding: 0;
+		background-color: transparent;
+		overflow: initial;
+		transform: none;
+	}
+	.primary-navigation #toggle-menu,
+	.woo-navigation #toggle-menu {
+		display: none;
+	}
+	.primary-navigation > div > ul > li > ul,
+	.woo-navigation > div > ul > li > ul {
+		display: none;
+	}
+	.admin-bar .primary-navigation, .admin-bar
+	.woo-navigation {
+		top: initial;
+	}
+	.admin-bar .primary-navigation > div, .admin-bar
+	.woo-navigation > div {
+		top: initial;
+	}
+}
+
+.primary-navigation > div > ul,
+.woo-navigation > div > ul {
+	display: flex;
+	justify-content: var(--primary-nav--justify-content);
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0;
+	max-width: none;
+	padding-right: 0;
+	position: relative;
+	/* Sub-menus Flyout */
+}
+
+.primary-navigation > div > ul ul,
+.woo-navigation > div > ul ul {
+	padding-right: 0;
+}
+
+.primary-navigation > div > ul li,
+.woo-navigation > div > ul li {
+	display: block;
+	position: relative;
+	width: 100%;
+	z-index: 1;
+}
+
+.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
+.woo-navigation > div > ul li:hover,
+.woo-navigation > div > ul li:focus-within {
+	cursor: pointer;
+	z-index: 99999;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation > div > ul li,
+	.woo-navigation > div > ul li {
+		display: inherit;
+		width: inherit;
+		/* Submenu display */
+	}
+	.primary-navigation > div > ul li:hover > ul,
+	.primary-navigation > div > ul li:focus-within > ul,
+	.primary-navigation > div > ul li ul:hover,
+	.primary-navigation > div > ul li ul:focus,
+	.woo-navigation > div > ul li:hover > ul,
+	.woo-navigation > div > ul li:focus-within > ul,
+	.woo-navigation > div > ul li ul:hover,
+	.woo-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu {
+	position: relative;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation > div > ul > li > .sub-menu,
+	.woo-navigation > div > ul > li > .sub-menu {
+		margin: 0;
+		background: var(--global--color-background);
+		box-shadow: var(--global--elevation);
+		right: 0;
+		top: calc(100% - (0.5 * var(--primary-nav--padding)));
+		min-width: max-content;
+		opacity: 0;
+		position: absolute;
+		transition: all 0.5s ease;
+		visibility: hidden;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+	width: 100%;
+}
+
+.primary-navigation .primary-menu > .menu-item:hover > a,
+.woo-navigation .primary-menu > .menu-item:hover > a {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: calc(0.5 * var(--primary-nav--padding)) 0;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .menu-item > a,
+.woo-navigation .menu-item > a {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:hover {
+	color: var(--primary-nav--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:focus {
+	color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:active,
+.woo-navigation .menu-item > a:active {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation a,
+.woo-navigation a {
+	color: currentColor;
+	display: inline;
+	font-family: var(--primary-nav--font-family-mobile);
+	font-size: var(--primary-nav--font-size-mobile);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation a,
+	.woo-navigation a {
+		display: block;
+		font-family: var(--primary-nav--font-family);
+		font-size: var(--primary-nav--font-size);
+		font-weight: var(--primary-nav--font-weight);
+	}
+}
+
+.primary-navigation a + svg,
+.woo-navigation a + svg {
+	fill: currentColor;
+}
+
+.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited,
+.woo-navigation a:hover,
+.woo-navigation a:link,
+.woo-navigation a:visited {
+	color: currentColor;
+}
+
+.primary-navigation .sub-menu,
+.woo-navigation .sub-menu {
+	list-style: none;
+	margin-right: var(--primary-nav--padding);
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu,
+	.woo-navigation .sub-menu {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .sub-menu .menu-item,
+.woo-navigation .sub-menu .menu-item {
+	padding-top: calc(0.5 * var(--primary-nav--padding));
+	padding-bottom: calc(0.5 * var(--primary-nav--padding));
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu .menu-item,
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: calc(0.5 * var(--primary-nav--padding));
+		padding-bottom: calc(0.5 * var(--primary-nav--padding));
+	}
+}
+
+.primary-navigation .sub-menu .menu-item a,
+.woo-navigation .sub-menu .menu-item a {
+	display: inline;
+	font-size: var(--primary-nav--font-size-sub-menu-mobile);
+	font-style: var(--primary-nav--font-style-sub-menu-mobile);
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu .menu-item a,
+	.woo-navigation .sub-menu .menu-item a {
+		font-size: var(--primary-nav--font-size);
+		font-style: var(--primary-nav--font-style);
+	}
+}
+
+.primary-navigation .menu-item-has-children > .svg-icon,
+.woo-navigation .menu-item-has-children > .svg-icon {
+	display: none;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .menu-item-has-children > .svg-icon,
+	.woo-navigation .menu-item-has-children > .svg-icon {
+		display: inline-block;
+		height: 100%;
+	}
+}
+
+.primary-navigation .hide-visually,
+.woo-navigation .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+@media only screen and (max-width: 481px) {
+	.lock-scrolling .site {
+		position: fixed;
+		max-width: 100%;
+	}
+}

+ 1 - 0
seedlet/functions.php

@@ -373,6 +373,7 @@ function seedlet_scripts() {
 
 
 	// RTL styles
 	// RTL styles
 	wp_style_add_data( 'seedlet-style', 'rtl', 'replace' );
 	wp_style_add_data( 'seedlet-style', 'rtl', 'replace' );
+	wp_style_add_data( 'seedlet-style-navigation', 'rtl', 'replace' );
 
 
 	// Print styles
 	// Print styles
 	wp_enqueue_style( 'seedlet-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
 	wp_enqueue_style( 'seedlet-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

+ 2 - 1
seedlet/package.json

@@ -37,8 +37,9 @@
     "build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:style-navigation": "node-sass assets/sass/style-navigation.scss assets/css/style-navigation.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:style-navigation": "node-sass assets/sass/style-navigation.scss assets/css/style-navigation.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:woocommerce": "node-sass assets/sass/style-woocommerce.scss assets/css/style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:woocommerce": "node-sass assets/sass/style-woocommerce.scss assets/css/style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
-    "build:woocommerce-rtl": "rtlcss assets/css/style-woocommerce.css assets/css/style-woocommerce-rtl.css",
     "build:rtl": "rtlcss style.css style-rtl.css",
     "build:rtl": "rtlcss style.css style-rtl.css",
+    "build:navigation-rtl": "rtlcss assets/css/style-navigation.css assets/css/style-navigation-rtl.css",
+    "build:woocommerce-rtl": "rtlcss assets/css/style-woocommerce.css assets/css/style-woocommerce-rtl.css",
     "build:print": "node-sass assets/sass/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:print": "node-sass assets/sass/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build": "run-s \"build:*\"",
     "build": "run-s \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",