Dark - fixing the direction of the arrows (#51)

youcan-shop · Sep 24, 2024 · 29c73bb · 29c73bb
1 parent 9f06bf1
commit 29c73bb
Show file tree

Hide file tree

Showing 23 changed files with 40 additions and 77 deletions.
diff --git a/themes/aura/assets/desktop-slider.css b/themes/aura/assets/desktop-slider.css
@@ -18,14 +18,16 @@
 .splide{
   height:var(--mobile-height);
 }
+@media (min-width: 768px){
+  .splide{
+    height:var(--desktop-height);
+  }
+}
 
 .yc-slider__desktop{
   display:none;
 }
 @media (min-width: 768px){
-  .splide{
-    height:var(--desktop-height);
-  }
   .yc-slider__desktop{
     display:block;
   }
@@ -55,10 +57,10 @@
 .yc-slider__desktop .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder {
+.yc-slider__desktop .content .btn-holder{
   margin-top:1em;
   text-align:var(--alignment);
 }
-.yc-slider__desktop .content .btn-holder a {
+.yc-slider__desktop .content .btn-holder a{
   display:inline-flex;
 }
diff --git a/themes/aura/assets/main.css b/themes/aura/assets/main.css
@@ -615,9 +615,6 @@ textarea{
 .breadcrumbs-container .breadcrumbs-listings .third-listing{
   font-weight:800;
 }
-[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .arrow{
-  rotate:180deg;
-}
 .breadcrumbs-container .breadcrumbs-name{
   font-weight:700;
   font-size:26px;

diff --git a/themes/aura/assets/mobile-slider.css b/themes/aura/assets/mobile-slider.css
@@ -7,7 +7,7 @@
   height:100%;
   display:flex;
   justify-content:center;
-  flex-direction: column;
+  flex-direction:column;
   padding:0 20px;
   text-align:var(--alignment);
 }
@@ -28,10 +28,10 @@
 .yc-slider__mobile .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder {
+.yc-slider__mobile .content .btn-holder{
   margin-top:1em;
   text-align:var(--alignment);
 }
-.yc-slider__desktop .content .btn-holder a {
+.yc-slider__mobile .content .btn-holder a{
   display:inline-flex;
 }
diff --git a/themes/aura/sections/main-page.liquid b/themes/aura/sections/main-page.liquid
@@ -6,7 +6,7 @@
       <div class="listings__item">
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
-      <div class="listings__item arrow">
+      <div class="listings__item">
         <ion-icon name="chevron-forward-outline"></ion-icon>
       </div>
       <div class="listings__item">

diff --git a/themes/aura/snippets/breadcrumbs.liquid b/themes/aura/snippets/breadcrumbs.liquid
@@ -4,15 +4,15 @@
       <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
     </div>
       {%- if template contains 'collection' or template contains 'list-collections' -%}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections" class="second-listing">{{ 'snippets.collection-listing.collections' | t }}</a>
         </div>
       {% endif %}
       {% if category %}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">

diff --git a/themes/aura/styles/desktop-slider.scss b/themes/aura/styles/desktop-slider.scss
@@ -17,7 +17,7 @@
 
 .splide {
   height: var(--mobile-height);
-  
+
   @include breakpoint('md') {
     height: var(--desktop-height);
   }
@@ -58,15 +58,10 @@
     .btn-holder {
       margin-top: 1em;
       text-align: var(--alignment);
+
       a {
         display: inline-flex;
       }
     }
-
-    .container {
-      & > div {
-        max-width: 600px;
-      }
-    }
   }
 }
diff --git a/themes/aura/styles/main.scss b/themes/aura/styles/main.scss
@@ -698,12 +698,6 @@ textarea {
     .third-listing {
       font-weight: 800;
     }
-
-    .arrow {
-      [dir='ltr'] & { 
-        rotate: 180deg;
-      }
-    }
   }
 
   .breadcrumbs-name {

diff --git a/themes/harmony/assets/desktop-slider.css b/themes/harmony/assets/desktop-slider.css
@@ -43,6 +43,7 @@
 .yc-slider__desktop .content .headers, .yc-slider__desktop .content h3, .yc-slider__desktop .content h2, .yc-slider__desktop .content h1{
   font-weight:700;
   line-height:1.2;
+  margin-bottom:2rem;
 }
 .yc-slider__desktop .content h1{
   font-size:3rem;
@@ -56,10 +57,10 @@
 .yc-slider__desktop .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder {
+.yc-slider__desktop .content .btn-holder{
   margin-top:1em;
   text-align:var(--alignment);
 }
-.yc-slider__desktop .content .btn-holder a {
+.yc-slider__desktop .content .btn-holder a{
   display:inline-flex;
 }
diff --git a/themes/harmony/assets/main.css b/themes/harmony/assets/main.css
@@ -638,9 +638,6 @@ textarea{
   color:#000000;
   font-weight:600;
 }
-[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .arrow{
-  rotate:180deg;
-}
 .breadcrumbs-container .breadcrumbs-name{
   font-weight:400;
   font-size:24px;

diff --git a/themes/harmony/assets/mobile-slider.css b/themes/harmony/assets/mobile-slider.css
@@ -7,13 +7,14 @@
   height:100%;
   display:flex;
   justify-content:center;
-  flex-direction: column;
+  flex-direction:column;
   padding:0 20px;
   text-align:var(--alignment);
 }
 .yc-slider__mobile .content .headers, .yc-slider__mobile .content h3, .yc-slider__mobile .content h2, .yc-slider__mobile .content h1{
   font-weight:700;
   line-height:1.2;
+  margin-bottom:2rem;
 }
 .yc-slider__mobile .content h1{
   font-size:3rem;
@@ -27,10 +28,10 @@
 .yc-slider__mobile .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder {
+.yc-slider__mobile .content .btn-holder{
   margin-top:1em;
   text-align:var(--alignment);
 }
-.yc-slider__desktop .content .btn-holder a {
+.yc-slider__mobile .content .btn-holder a{
   display:inline-flex;
 }
diff --git a/themes/harmony/assets/navbar.css b/themes/harmony/assets/navbar.css
@@ -97,7 +97,7 @@
   }
 }
 .yc-header .yc-navbar .logo img{
-  width: 100%;
+  width:100%;
   max-width:110px;
   max-height:70px;
 }

diff --git a/themes/harmony/snippets/breadcrumbs.liquid b/themes/harmony/snippets/breadcrumbs.liquid
@@ -4,31 +4,31 @@
       <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
     </div>
       {%- if template contains 'collection' or template contains 'list-collections' -%}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections" class="second-listing">{{ 'snippets.collection-listing.collections' | t }}</a>
         </div>
       {% endif %}
       {% if category %}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/collections/{{ category.slug }}" class="third-listing">{{ category.name}}</a>
         </div>
       {%- endif -%}
       {%- if template contains 'cart' -%}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">
           <a href="/cart" class="second-listing">{{ 'cart.title' | t }}</a>
         </div>
       {% endif %}
       {% if template contains 'page' %}
-        <div class="listings__item arrow">
+        <div class="listings__item">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="listings__item">

diff --git a/themes/harmony/styles/desktop-slider.scss b/themes/harmony/styles/desktop-slider.scss
@@ -2,11 +2,11 @@
 
 .splide {
   height: var(--mobile-height);
-    
+
   @include breakpoint('md') {
     height: var(--desktop-height);
   }
-  
+
   .splide__arrow {
     margin: 0 100px;
   }
@@ -64,15 +64,10 @@
     .btn-holder {
       margin-top: 1em;
       text-align: var(--alignment);
+
       a {
         display: inline-flex;
       }
     }
-
-    .container {
-      & > div {
-        max-width: 600px;
-      }
-    }
   }
 }
diff --git a/themes/harmony/styles/main.scss b/themes/harmony/styles/main.scss
@@ -723,12 +723,6 @@ textarea {
         font-weight: 600;
       }
     }
-
-    .arrow {
-      [dir='ltr'] & {
-        rotate: 180deg;
-      }
-    }
   }
 
   .breadcrumbs-name {

diff --git a/themes/harmony/styles/mobile-slider.scss b/themes/harmony/styles/mobile-slider.scss
@@ -33,6 +33,7 @@
     .btn-holder {
       margin-top:1em;
       text-align:var(--alignment);
+
       a {
         display: inline-flex;
       }

diff --git a/themes/meraki/assets/main.css b/themes/meraki/assets/main.css
@@ -654,9 +654,6 @@ textarea{
 .breadcrumbs-container .breadcrumbs-listings .arrow-item{
   color:#9C9C9C;
 }
-[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .arrow{
-  rotate:180deg;
-}
 .breadcrumbs-container .breadcrumbs-name{
   font-weight:700;
   font-size:26px;

diff --git a/themes/meraki/assets/mobile-slider.css b/themes/meraki/assets/mobile-slider.css
@@ -26,7 +26,6 @@
 .yc-slider__mobile .content .btn-holder{
   text-align:var(--alignment);
 }
-
 .yc-slider__mobile .content .btn-holder a{
   display:inline-flex;
 }
diff --git a/themes/meraki/config/settings_schema.json b/themes/meraki/config/settings_schema.json
@@ -24,7 +24,7 @@
                   },
                   {
                       "value": "ltr",
-                      "label": "left to right"
+                      "label": "Left to right"
                   }
               ],
               "default": "rtl"

diff --git a/themes/meraki/sections/main-page.liquid b/themes/meraki/sections/main-page.liquid
@@ -7,7 +7,7 @@
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
       <div class="listings__item">
-        <ion-icon name="chevron-forward-outline"></ion-icon>
+        /
       </div>
       <div class="listings__item">
         <span class="second-listing">{{ page.name }}</span>

diff --git a/themes/meraki/snippets/breadcrumbs.liquid b/themes/meraki/snippets/breadcrumbs.liquid
@@ -12,11 +12,11 @@
         </div>
       {% endif %}
       {% if category %}
-        <div class="listings__item arrow">
+        <div class="listings__item arrow-item">
           /
         </div>
         <div class="listings__item">
-          <a href="/collections/{{ category.slug }}" class="third-listing">{{ category.name}}</a>
+          <a href="/collections/{{ category.slug }}" class="third-listing">{{ category.name }}</a>
         </div>
       {%- endif -%}
   </div>

diff --git a/themes/meraki/styles/desktop-slider.scss b/themes/meraki/styles/desktop-slider.scss
@@ -2,7 +2,7 @@
 
 .splide {
   height: var(--mobile-height);
-  
+
   @include breakpoint('md') {
     height: var(--desktop-height);
   }
@@ -77,13 +77,8 @@
     .btn-holder {
       text-align:var(--alignment);
 
-      .yc-btn-slider {
-        font-size: 14px;
-        background-color: var(--yc-primary-color) !important;
-        color: #ffffff;
-        margin-top: 38px;
-        padding: 12px 18px;
-        display:inline-flex;
+      a {
+          display:inline-flex;
       }
     }
   }

diff --git a/themes/meraki/styles/main.scss b/themes/meraki/styles/main.scss
@@ -738,12 +738,6 @@ textarea {
     .arrow-item {
       color: #9C9C9C;
     }
-
-    .arrow {
-      [dir='ltr'] & { 
-        rotate: 180deg;	        
-      }
-    }
   }
 
   .breadcrumbs-name {

diff --git a/themes/meraki/styles/mobile-slider.scss b/themes/meraki/styles/mobile-slider.scss
@@ -30,7 +30,8 @@
 
     .btn-holder {
       text-align: var(--alignment);
-      .yc-btn-slider {
+
+      a {
         display: inline-flex;
       }
     }