slider - styles for nav (issue #3) & finite sliding by arrow (issue #6)

Author: pgalias

css/components.css

@@ -1,3 +1,7 @@
+@import "_variables";
+@import "../_mixins";
+@import "../_themes";
+
 .slider {
   position: relative;
   .center-horizontal;
@@ -88,6 +92,15 @@
       border-radius: @blue-border-radius;
     }
   }
+
+  &--finite {
+    input[type=radio]:first-of-type:checked ~ .slider__arrows label:last-of-type {
+      visibility: hidden;
+    }
+    input[type=radio]:last-of-type:checked ~ .slider__arrows label:nth-last-of-type(2) {
+      visibility: hidden;
+    }
+  }
 }
 .create-selector(@pattern, @iterator:1, @count: @max-slides) {
   @repeat: ~'@{pattern}';
@@ -103,25 +116,32 @@
   })()`;
 }
 & {
-  .create-selector('.slider--blue input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $imm ),\n.slider--blue input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $ipp ),');
+  .create-selector('.slider input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $imm ),\n.slider input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $ipp ),');
   @{result} {
     display: flex;
   }
 }
 & {
-  .create-selector('.slider--blue input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $imm ) span::after,');
+  .create-selector('.slider input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $imm ) span::after,');
   @{result} {
     content: '\003c';
     display: block;
   }
 }
 & {
-  .create-selector('.slider--blue input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $ipp ) span::after,');
+  .create-selector('.slider input[type=radio]:nth-of-type( $i ):checked ~ .slider__arrows label:nth-of-type( $ipp ) span::after,');
   @{result} {
     content: '\003e';
     display: block;
   }
 }
+& {
+  .create-selector('.slider input[type=radio]:nth-of-type( $i ):checked ~ .slider__pills label:nth-of-type( $i ),');
+  @{result} {
+    color: fade(#000, 80%);
+    font-weight: 900;
+  }
+}
 & {
   .create-selector('.slider--blue input[type=radio]:nth-of-type( $i ):checked ~ .slider__pills label:nth-of-type( $i ),');
   @{result} {

css/components.css.map

@@ -1,3 +1,7 @@
+@import "_variables";
+@import "../_mixins";
+@import "../_themes";
+
 .slider {
   label {
     cursor: pointer;
@@ -48,13 +52,23 @@
     position: absolute;
     .same(0, top left);
 
+    @size: unit(@slider-border-width * 2, px);
+    .same(calc(~"100% - @{size}"), height width);
+
+    margin: @slider-border-width;
+
     display: flex;
     justify-content: space-between;
 
     label {
       display: none;
       height: 100%;
 
+      color: #000;
+      font-size: 2em;
+      margin: 0;
+      padding: @arrows-padding;
+
       flex-direction: column;
       justify-content: center;
     }
@@ -65,14 +79,7 @@
       color: @blue-header-color;
     }
     .slider__arrows {
-      height: calc(~"100% - @{slider-border-width}*2");
-      width: calc(~"100% - @{slider-border-width}*2");
-      margin: @slider-border-width;
-
       label {
-        margin: 0;
-        padding: @arrows-padding;
-
         color: @blue-header-color;
         font-size: 3.5em;
 

less/slider/_element.less

@@ -1,4 +1,4 @@
-@max-slides: 15;
+@max-slides: 10;
 
 @slider-width: 80%;
 @slider-height: 400px;