molstar 3.0.0-dev.0 → 3.0.0-dev.2

package/lib/mol-plugin-ui/skin/base/components/sequence.scss

@@ -1,126 +1,126 @@
-.msp-sequence {
-    position: absolute;
-    right: 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background: $sequence-background;
-}
-
-$sequence-select-height: 24px;
-.msp-sequence-select {
-    position: relative;
-    height: $sequence-select-height;
-    width: 100%;
-    margin-bottom: 1px;
-    background: $control-background;
-    text-align: left;
-
-    > span {
-        display: inline-block;
-        line-height: $sequence-select-height;
-        padding: 0 $control-spacing;
-        font-size: 85%;
-        font-weight: bold;
-        cursor: default;
-    }
-
-    > select {
-        display: inline-block;
-        max-width: 120px;
-        width: auto;
-        text-overflow: ellipsis;
-        font-size: 85%;
-        height: $sequence-select-height;
-        line-height: $sequence-select-height;
-        background-size: 6px 8px;
-        background-color: $control-background;
-    }
-}
-
-.msp-sequence-wrapper {
-    word-break: break-word;
-    // use $control-spacing for top to have space for sequence numebrs
-    padding: $control-spacing $control-spacing $info-vertical-padding $control-spacing;
-    user-select: none;
-}
-
-.msp-sequence-wrapper-non-empty {
-    font-size: 85%;
-    line-height: 180%;
-    font-family: "Courier New", monospace;
-    background: $msp-form-control-background;
-
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: absolute;
-    top: $sequence-select-height + 1px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-
-.msp-sequence-chain-label {
-    margin-left: $control-spacing;
-    margin-top: $control-spacing;
-    user-select: none;
-    color: $sequence-number-color;
-    font-size: 90%;
-    line-height: 90%;
-    padding-left: 0.2em;
-}
-
-.msp-sequence-wrapper {
-    span {
-        cursor: pointer;
-    }
-
-    .msp-sequence-residue-long {
-        margin: 0em 0.2em 0em 0.2em;
-    }
-
-    .msp-sequence-residue-long-begin {
-        margin: 0em 0.2em 0em 0em;
-    }
-
-    .msp-sequence-label {
-        color: $sequence-number-color;
-        font-size: 90%;
-        line-height: 90%;
-        padding-bottom: 1em;
-        padding-left: 0.2em;
-    }
-    
-    .msp-sequence-number {
-        color: $sequence-number-color;
-        word-break: keep-all;
-        cursor: default;
-        position: relative;
-        top: -1.1em;
-        left: 3.1em;
-        padding: 0px;
-        margin-left: -3em;
-        font-size: 80%;
-    }
-
-    .msp-sequence-number-long {
-        left: 3.3em;
-    }
-
-    .msp-sequence-number-long-negative {
-        left: 2.7em;
-    }
-
-    .msp-sequence-number-negative {
-        left: 2.5em;
-    }
-
-    .msp-sequence-present {
-        color: $font-color;
-    }
-
-    .msp-sequence-missing {
-        color: color-lower-contrast($font-color, 33%);
-    }
+.msp-sequence {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background: $sequence-background;
+}
+
+$sequence-select-height: 24px;
+.msp-sequence-select {
+    position: relative;
+    height: $sequence-select-height;
+    width: 100%;
+    margin-bottom: 1px;
+    background: $control-background;
+    text-align: left;
+
+    > span {
+        display: inline-block;
+        line-height: $sequence-select-height;
+        padding: 0 $control-spacing;
+        font-size: 85%;
+        font-weight: bold;
+        cursor: default;
+    }
+
+    > select {
+        display: inline-block;
+        max-width: 120px;
+        width: auto;
+        text-overflow: ellipsis;
+        font-size: 85%;
+        height: $sequence-select-height;
+        line-height: $sequence-select-height;
+        background-size: 6px 8px;
+        background-color: $control-background;
+    }
+}
+
+.msp-sequence-wrapper {
+    word-break: break-word;
+    // use $control-spacing for top to have space for sequence numebrs
+    padding: $control-spacing $control-spacing $info-vertical-padding $control-spacing;
+    user-select: none;
+}
+
+.msp-sequence-wrapper-non-empty {
+    font-size: 85%;
+    line-height: 180%;
+    font-family: "Courier New", monospace;
+    background: $msp-form-control-background;
+
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    top: $sequence-select-height + 1px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.msp-sequence-chain-label {
+    margin-left: $control-spacing;
+    margin-top: $control-spacing;
+    user-select: none;
+    color: $sequence-number-color;
+    font-size: 90%;
+    line-height: 90%;
+    padding-left: 0.2em;
+}
+
+.msp-sequence-wrapper {
+    span {
+        cursor: pointer;
+    }
+
+    .msp-sequence-residue-long {
+        margin: 0em 0.2em 0em 0.2em;
+    }
+
+    .msp-sequence-residue-long-begin {
+        margin: 0em 0.2em 0em 0em;
+    }
+
+    .msp-sequence-label {
+        color: $sequence-number-color;
+        font-size: 90%;
+        line-height: 90%;
+        padding-bottom: 1em;
+        padding-left: 0.2em;
+    }
+    
+    .msp-sequence-number {
+        color: $sequence-number-color;
+        word-break: keep-all;
+        cursor: default;
+        position: relative;
+        top: -1.1em;
+        left: 3.1em;
+        padding: 0px;
+        margin-left: -3em;
+        font-size: 80%;
+    }
+
+    .msp-sequence-number-long {
+        left: 3.3em;
+    }
+
+    .msp-sequence-number-long-negative {
+        left: 2.7em;
+    }
+
+    .msp-sequence-number-negative {
+        left: 2.5em;
+    }
+
+    .msp-sequence-present {
+        color: $font-color;
+    }
+
+    .msp-sequence-missing {
+        color: color-lower-contrast($font-color, 33%);
+    }
 }

package/lib/mol-plugin-ui/skin/base/components/slider.scss

@@ -1,166 +1,166 @@
-@mixin borderBox {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-
-  * {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-  }
-}
-
-.msp-slider-base {
-  position: relative;
-  height: 14px;
-  padding: 5px 0;
-  width: 100%;
-  border-radius: $slider-border-radius-base;
-  align-self: center;
-  @include borderBox;
-
-  &-rail {
-    position: absolute;
-    width: 100%;
-    background-color: $control-background;
-    height: 4px;
-    border-radius: 2px;
-  }
-
-  &-track {
-    position: absolute;
-    left: 0;
-    height: 4px;
-    border-radius: $slider-border-radius-base;
-    background-color: tint($font-color, 60%);
-  }
-
-  &-handle {
-    position: absolute;
-    margin-left: -11px;
-    margin-top: -9px;
-    width: 22px;
-    height: 22px;
-    cursor: pointer;
-    border-radius: 50%;
-    background-color: $font-color;
-    border: 4px solid $control-background;
-
-    &:hover {
-      background-color: $hover-font-color;
-    }
-  }
-
-  &-mark {
-    position: absolute;
-    top: 18px;
-    left: 0;
-    width: 100%;
-    font-size: 12px;
-  }
-
-  &-mark-text {
-    position: absolute;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    color: #999;
-
-    &-active {
-      color: #666;
-    }
-  }
-
-  &-step {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background: transparent;
-  }
-
-  &-dot {
-    position: absolute;
-    bottom: -2px;
-    margin-left: -4px;
-    width: 8px;
-    height: 8px;
-    border: 2px solid #e9e9e9;
-    background-color: #fff;
-    cursor: pointer;
-    border-radius: 50%;
-    vertical-align: middle;
-    &:first-child {
-      margin-left: -4px;
-    }
-    &:last-child {
-      margin-left: -4px;
-    }
-    &-active {
-      border-color: tint($font-color, 50%);
-    }
-  }
-
-  &-disabled {
-    background: $default-background;
-    opacity: 0.35;
-    
-    // .msp-slider-base-track {
-    //   background-color: $slider-disabledColor;
-    // }
-    
-    .msp-slider-base-handle, .msp-slider-base-dot {
-      // border-color: $slider-disabledColor;
-      // background-color: color-lower-contrast($font-color, 10%);
-      cursor: not-allowed;
-    }
-
-    .msp-slider-base-mark-text, .msp-slider-base-dot {
-      cursor: not-allowed!important;
-    }
-  }
-}
-
-// .msp-slider-base-vertical {
-//   width: 14px;
-//   height: 100%;
-//   padding: 0 5px;
-
-//   .msp-slider-base {
-//     &-rail {
-//       height: 100%;
-//       width: 4px;
-//     }
-
-//     &-track {
-//       left: 5px;
-//       bottom: 0;
-//       width: 4px;
-//     }
-
-//     &-handle {
-//       margin-left: -5px;
-//       margin-bottom: -7px;
-//     }
-
-//     &-mark {
-//       top: 0;
-//       left: 18px;
-//       height: 100%;
-//     }
-
-//     &-step {
-//       height: 100%;
-//       width: 4px;
-//     }
-
-//     &-dot {
-//       left: 2px;
-//       margin-bottom: -4px;
-//       &:first-child {
-//         margin-bottom: -4px;
-//       }
-//       &:last-child {
-//         margin-bottom: -4px;
-//       }
-//     }
-//   }
+@mixin borderBox {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+
+  * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+  }
+}
+
+.msp-slider-base {
+  position: relative;
+  height: 14px;
+  padding: 5px 0;
+  width: 100%;
+  border-radius: $slider-border-radius-base;
+  align-self: center;
+  @include borderBox;
+
+  &-rail {
+    position: absolute;
+    width: 100%;
+    background-color: $control-background;
+    height: 4px;
+    border-radius: 2px;
+  }
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: $slider-border-radius-base;
+    background-color: tint($font-color, 60%);
+  }
+
+  &-handle {
+    position: absolute;
+    margin-left: -11px;
+    margin-top: -9px;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: $font-color;
+    border: 4px solid $control-background;
+
+    &:hover {
+      background-color: $hover-font-color;
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+
+    &-active {
+      color: #666;
+    }
+  }
+
+  &-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+  }
+
+  &-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+    &:first-child {
+      margin-left: -4px;
+    }
+    &:last-child {
+      margin-left: -4px;
+    }
+    &-active {
+      border-color: tint($font-color, 50%);
+    }
+  }
+
+  &-disabled {
+    background: $default-background;
+    opacity: 0.35;
+    
+    // .msp-slider-base-track {
+    //   background-color: $slider-disabledColor;
+    // }
+    
+    .msp-slider-base-handle, .msp-slider-base-dot {
+      // border-color: $slider-disabledColor;
+      // background-color: color-lower-contrast($font-color, 10%);
+      cursor: not-allowed;
+    }
+
+    .msp-slider-base-mark-text, .msp-slider-base-dot {
+      cursor: not-allowed!important;
+    }
+  }
+}
+
+// .msp-slider-base-vertical {
+//   width: 14px;
+//   height: 100%;
+//   padding: 0 5px;
+
+//   .msp-slider-base {
+//     &-rail {
+//       height: 100%;
+//       width: 4px;
+//     }
+
+//     &-track {
+//       left: 5px;
+//       bottom: 0;
+//       width: 4px;
+//     }
+
+//     &-handle {
+//       margin-left: -5px;
+//       margin-bottom: -7px;
+//     }
+
+//     &-mark {
+//       top: 0;
+//       left: 18px;
+//       height: 100%;
+//     }
+
+//     &-step {
+//       height: 100%;
+//       width: 4px;
+//     }
+
+//     &-dot {
+//       left: 2px;
+//       margin-bottom: -4px;
+//       &:first-child {
+//         margin-bottom: -4px;
+//       }
+//       &:last-child {
+//         margin-bottom: -4px;
+//       }
+//     }
+//   }
 // }