Renamed sidebar class

Author: lcharette

packages/theme-pink-cupcake/CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [6.0.0-beta.7](https://github.com/userfrosting/theme-pink-cupcake/compare/6.0.0-beta.6...6.0.0-beta.7)
 - Add scroll-padding-top to prevent content from being hidden behind fixed headers when using anchor links
 - Minor UI tweaks to sidebar components
+- Renamed sidebar class
 - CSS: Add webkit-font-smoothing
 
 ## [6.0.0-beta.6](https://github.com/userfrosting/theme-pink-cupcake/compare/6.0.0-beta.5...6.0.0-beta.6)

packages/theme-pink-cupcake/src/components/Content/FooterContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <footer class="uf-main uk-section uk-section-small uk-section-muted uk-text-center">
+    <footer class="uk-section uk-section-small uk-section-muted uk-text-center">
         <hr />
         <p class="uk-text-small uk-text-center" data-test="slot">
             <slot></slot>

packages/theme-pink-cupcake/src/components/Content/MainContent.vue

@@ -1,9 +1,9 @@
 <template>
-    <div
-        class="uf-main uk-section uk-section-default uk-section-muted"
+    <main
+        class="uk-section uk-section-default uk-section-muted"
         uk-height-viewport="expand: true">
         <div class="uk-container" data-test="slot">
             <slot></slot>
         </div>
-    </div>
+    </main>
 </template>

packages/theme-pink-cupcake/src/components/NavBar/NavBar.vue

@@ -23,7 +23,7 @@ withDefaults(
                             <li>
                                 <a
                                     class="uk-navbar-item uk-logo"
-                                    uk-toggle="target: aside.uf-sidenav; cls: open">
+                                    uk-toggle="target: aside; cls: open">
                                     <font-awesome-icon icon="bars" />
                                 </a>
                             </li>

packages/theme-pink-cupcake/src/components/SideBar/SideBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside class="uf-sidenav">
+    <aside>
         <ul class="uk-nav-default" uk-nav>
             <slot></slot>
         </ul>

packages/theme-pink-cupcake/src/less/components/uf-sidebar.less

@@ -5,6 +5,7 @@
 * Set to `light` to use dark text on light background for sidebar
 */
 @sidebar-aside-color-mode: dark;
+@sidebar-aside-mode: left; // left | right
 
 @sidebar-width: 285px;
 @sidebar-item-padding-vertical: 4px;
@@ -45,7 +46,7 @@
 /* ========================================================================
    Component: Sidebar
  ========================================================================== */
-aside.uf-sidenav {
+aside {
     --uk-inverse: @sidebar-aside-color-mode;
     position: fixed;
     left: 0;
@@ -59,7 +60,8 @@ aside.uf-sidenav {
     transition: height 0.3s ease-out;
 
     /* Set main content beside sidebar */
-    ~ .uf-main {
+    ~ main,
+    ~ footer {
         margin-left: @sidebar-width;
     }
 
@@ -131,23 +133,25 @@ aside.uf-sidenav {
 // @media (max-width: @breakpoint-small-max) {}
 /* Phone landscape and smaller */
 @media (max-width: @breakpoint-small-max) {
-    aside.uf-sidenav:not(.open) {
+    aside:not(.open) {
         display: none !important;
     }
 
-    aside.uf-sidenav {
-        ~ .uf-main {
+    aside {
+        ~ main,
+        ~ footer {
             margin-left: inherit;
         }
     }
 }
 
 // Right side modifier
-aside.uf-sidenav-right {
+aside when (@sidebar-aside-mode = right) {
     left: auto;
     right: 0;
 
-    ~ .uf-main {
+    ~ main,
+    ~ footer {
         margin-right: @sidebar-width;
         margin-left: inherit;
     }
@@ -168,7 +172,7 @@ aside.uf-sidenav-right {
 /* ========================================================================
    Dark mode variant
  ========================================================================== */
-aside.uf-sidenav when (@sidebar-aside-color-mode = dark) {
+aside when (@sidebar-aside-color-mode = dark) {
     background-color: @inverse-sidebar-background;
 
     .uk-nav-default > li > a {
@@ -202,7 +206,7 @@ aside.uf-sidenav when (@sidebar-aside-color-mode = dark) {
     }
 
     // Apply light text color to nav headers
-    .uk-nav-header {
+    .uk-nav-default .uk-nav-header {
         color: @global-inverse-color;
     }
 }