]> _ Git - fluidbook-html5.git/commitdiff
fix #2806 @0:20
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 29 May 2019 09:21:22 +0000 (11:21 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 29 May 2019 09:21:22 +0000 (11:21 +0200)
style/fluidbook.less
style/slider.less

index 9f9723569c50540b53042abb9cdcd25b5664b889..c77872ac273bdfabc12826ac6c14ce887c388eda 100644 (file)
@@ -179,8 +179,10 @@ body, html {
 }
 
 /* Orientation */
-.portrait .shade, .portrait .page.right {
-  display: none;
+.portrait #fluidbook {
+  .shade, .page.right {
+    display: none;
+  }
 }
 
 .portrait .hideOnPortrait {
@@ -1930,7 +1932,6 @@ form input[type="text"], form input[type="email"] {
     }
   }
 
-
   &.left {
     .pageholder {
       .shade {
index d0789c9a0ff29d3d0399f4a893ac6f4da9066cce..a28aa82d6efa0726dd385a5f8ba3e2a57aceacf6 100644 (file)
 @slider-background: rgba(0, 0, 0, 0.1);
 
 #slider {
-       position: absolute;
-       height: 6px;
-       bottom: 20px;
-       cursor: pointer;
-       .hideifnot(@slider-display);
-
-       .visible {
-               height: 6px;
-               width: 100%;
-               position: relative;
-               top: 20px;
-               transition: all 250ms;
-       }
-
-       &:hover, &.drag {
-               .visible {
-                       height: 12px;
-                       top: 17px;
-               }
-       }
-
-       &.drag, &.hover {
-               z-index: 13;
-       }
-
-       // When help overlay is active
-       .help & {
-               z-index: 22;
-       }
-
-       #sliderback {
-               position: absolute;
-               top: -20px;
-               left: 0;
-               width: 100%;
-               z-index: 0;
-               height: 46px;
-               .visible {
-                       background-color: @slider-background;
-               }
-       }
-
-       #slidercursor {
-               height: 46px;
-               position: absolute;
-               left: 0;
-               top: -20px;
-               z-index: 1;
-
-               .visible {
-                       background-color: #fff;
-               }
-       }
-
-       &:hover, &.drag {
-               #slidercursor {
-                       .visible {
-                               height: 10px;
-                               top: 18px;
-                       }
-               }
-       }
-
-       @sliderthumb-height: unit(@thumb-height+60, px);
-       @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
-
-       #sliderthumb {
-               position: absolute;
-               top: @sliderthumb-top;
-               left: 0;
-               background-color: @slider-thumb-background;
-               padding: 25px;
-               display: none;
-               width: 250px;
-               height: @sliderthumb-height;
-
-               &.single {
-                       width: 150px;
-                       &:after {
-                               left: 59px;
-                       }
-               }
-
-               &:after {
-                       content: "";
-                       position: absolute;
-                       bottom: -16px;
-                       left: 109px;
-                       width: 0;
-                       height: 0;
-                       border-left: 16px solid transparent;
-                       border-right: 16px solid transparent;
-                       border-top: 16px solid @slider-thumb-background;
-                       display: block;
-               }
-
-               .doubleThumb {
-                       position: relative;
-
-                       > .right {
-                               left: 100px;
-                       }
-               }
-
-               .number {
-                       color: @menu-text;
-
-               }
-       }
-       &.drag, &.hover {
-               #sliderthumb {
-                       display: block;
-               }
-       }
+  position: absolute;
+  height: 6px;
+  bottom: 20px;
+  cursor: pointer;
+  .hideifnot(@slider-display);
+
+  .visible {
+    height: 6px;
+    width: 100%;
+    position: relative;
+    top: 20px;
+    transition: all 250ms;
+  }
+
+  &:hover, &.drag {
+    .visible {
+      height: 12px;
+      top: 17px;
+    }
+  }
+
+  &.drag, &.hover {
+    z-index: 13;
+  }
+
+  // When help overlay is active
+  .help & {
+    z-index: 22;
+  }
+
+  #sliderback {
+    position: absolute;
+    top: -20px;
+    left: 0;
+    width: 100%;
+    z-index: 0;
+    height: 46px;
+
+    .visible {
+      background-color: @slider-background;
+    }
+  }
+
+  #slidercursor {
+    height: 46px;
+    position: absolute;
+    left: 0;
+    top: -20px;
+    z-index: 1;
+
+    .visible {
+      background-color: #fff;
+    }
+  }
+
+  &:hover, &.drag {
+    #slidercursor {
+      .visible {
+        height: 10px;
+        top: 18px;
+      }
+    }
+  }
+
+  @sliderthumb-height: unit(@thumb-height+60, px);
+  @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
+
+  #sliderthumb {
+    position: absolute;
+    top: @sliderthumb-top;
+    left: 0;
+    background-color: @slider-thumb-background;
+    padding: 25px;
+    display: none;
+    width: 250px;
+    height: @sliderthumb-height;
+
+    &.single {
+      width: 150px;
+
+      &:after {
+        left: 59px;
+      }
+
+      .doubleThumb .thumb.right {
+        .rtl & {
+          left: 0;
+        }
+      }
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: -16px;
+      left: 109px;
+      width: 0;
+      height: 0;
+      border-left: 16px solid transparent;
+      border-right: 16px solid transparent;
+      border-top: 16px solid @slider-thumb-background;
+      display: block;
+    }
+
+    .doubleThumb {
+      position: relative;
+
+      > .right {
+        left: 100px;
+      }
+    }
+
+    .number {
+      color: @menu-text;
+
+    }
+  }
+
+  &.drag, &.hover {
+    #sliderthumb {
+      display: block;
+    }
+  }
 }
\ No newline at end of file