#1142 side bar theme changes (these themes also need some fixes for s…

…ide bar to work properly as header & footer bars go out of line)
thexerteproject · Sep 30, 2022 · c1a7eec · c1a7eec
1 parent 00333c6
commit c1a7eec
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 0 deletions.
diff --git a/themes/Nottingham/modernandsleek/modernandsleek.css b/themes/Nottingham/modernandsleek/modernandsleek.css
diff --git a/themes/Nottingham/modernandsleek/scss/_footer.scss b/themes/Nottingham/modernandsleek/scss/_footer.scss
@@ -96,6 +96,47 @@
   border: 2px solid $darkestcolor;
 }
 
+//*****SIDE BAR****/
+
+#x_sideBar {
+	background-color: $contrastcolor;
+}
+
+#x_sideBarToggleBtn {
+	border-color: $brightcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
+	color: $whiteorlightest;
+	background-color: $darkestcolor;
+}
+
+#x_sideBarBtnHolder button {
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
+	border-color: $brightcolor;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
+	background-color: $whiteorlightest;
+	border-color: $whiteorlightest;
+	color: $contrastcolor
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
+	background-color: $darkestcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
+	background-color: $darkestcolor;
+	border-color: $darkestcolor;
+	color: $whiteorlightest;
+}
+
 //******** Smartphones (portrait) - change progress bar display for small screen-----------*/
 @media only screen
 and (max-width :500px) {

diff --git a/themes/Nottingham/modernandurban/modernandurban.css b/themes/Nottingham/modernandurban/modernandurban.css
diff --git a/themes/Nottingham/modernandurban/scss/_footer.scss b/themes/Nottingham/modernandurban/scss/_footer.scss
@@ -89,6 +89,47 @@
   border: 2px solid $defaultpagebackground;
 }
 
+//*****SIDE BAR****/
+
+#x_sideBar {
+	background-color: $contrastcolor;
+}
+
+#x_sideBarToggleBtn {
+	border-color: $lightestcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
+	color: $whiteorlightest;
+	background-color: $darkestcolor;
+}
+
+#x_sideBarBtnHolder button {
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
+	border-color: $lightestcolor;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
+	background-color: $whiteorlightest;
+	border-color: $whiteorlightest;
+	color: $contrastcolor;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
+	background-color: $darkestcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
+	background-color: $darkestcolor;
+	border-color: $darkestcolor;
+	color: $whiteorlightest;
+}
+
 //******** Smartphones (portrait) - change progress bar display for small screen-----------*/
 @media only screen
 and (max-width :500px) {

diff --git a/themes/Nottingham/modernorange/modernorange.css b/themes/Nottingham/modernorange/modernorange.css
diff --git a/themes/Nottingham/modernorange/scss/_footer.scss b/themes/Nottingham/modernorange/scss/_footer.scss
@@ -88,6 +88,46 @@
   border: 2px solid $brightcolor;
 }
 
+//*****SIDE BAR****/
+
+#x_sideBar {
+	background-color: $contrastcolor;
+}
+
+#x_sideBarToggleBtn {
+	border-color: $whiteorlightest;
+	color: $whiteorlightest;
+}
+
+#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
+	color: $whiteorlightest;
+	background-color: $brightcolor;
+}
+
+#x_sideBarBtnHolder button {
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
+	border-color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
+	border-color: $accent1;
+	background-color: $accent1;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
+	background-color: $accent1;
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
+	background-color: $brightcolor;
+	border-color: $brightcolor;
+	color: $whiteorlightest;
+}
+
 //******** Smartphones (portrait) - change progress bar display for small screen-----------*/
 @media only screen
 and (max-width :500px) {

diff --git a/themes/Nottingham/rgbo/rgbo.css b/themes/Nottingham/rgbo/rgbo.css
diff --git a/themes/Nottingham/rgbo/scss/_footer.scss b/themes/Nottingham/rgbo/scss/_footer.scss
@@ -91,6 +91,46 @@
   border: 2px solid $contrastcolor;
 }
 
+//*****SIDE BAR****/
+
+#x_sideBar {
+	background-color: $darkestcolor;
+}
+
+#x_sideBarToggleBtn {
+	border-color: $bodybackgroundcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
+	color: $darkestcolor;
+	background-color: $lightestcolor;
+}
+
+#x_sideBarBtnHolder button {
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
+	border-color: $bodybackgroundcolor;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
+	background-color: $contrastcolor;
+	border-color: $contrastcolor;
+}
+
+#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
+	background-color: $contrastcolor;
+	color: $whiteorlightest;
+}
+
+#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
+	background-color: $lightestcolor;
+	border-color: $lightestcolor;
+	color: $whiteorlightest;
+}
+
 //******** Smartphones 600px (portrait) change progress bar display-----------/
 @media only screen
 and (max-width:600px) {