beyond-rails 0.0.183 → 0.0.184

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b95840e6e097242680b87b6f18a62d8143c862b42475a6267cf8fb1b3392b14
-  data.tar.gz: fb4dc8da9afd023477ae1e0615051b8117996518eb1b1278a2c8f1e4349fa3de
+  metadata.gz: 22e904c58d6c85c184e16b6aef492edefec12c7acbe2a52f6e9a6fae13578fce
+  data.tar.gz: 214741bf3e554a8eb8fd6006c73cfe82b691a5872318424aa0dd71363ed9aa17
 SHA512:
-  metadata.gz: 5e07119c9cfc45279155a1d0e47fe0c893b1c838537ee5d7589dfa158d36f0d5b1ecd1ef2422b7c964ef6f7d9c6913a6a19c70fc5bae67f5022d7942a0d8d2f2
-  data.tar.gz: ff1cd77dc2d294fcbffff1315be60393e7430e51504f928da1d082267ee266d8fa82802903450a3cf348ad2c5248f9f0ee1cc5441b35fdae19c175a26a9264a8
+  metadata.gz: 5190c2df04411758149200d4087ddf37fcba9c737605a856e5ad4137c31013bb212377e34f505edda830485576f194ee152add6694baee9b82371ec6db04df46
+  data.tar.gz: 43975df7af1266b11e8e462ee3068f6aee83e2ede74a501f5314702850355ef2aa04f7dd13eea5c03ffdd32100eb822533462a47b91e3c33f22d106bd8cb7136

data/src/js/components/Tabbox.js

@@ -82,6 +82,9 @@ export default class Tabbox {
     this.slider = document.createElement('div')
     this.slider.classList.add('js-slider')
     this.dom.appendChild(this.slider)
+
+    this.defaultSliderColor = getComputedStyle(this.slider).getPropertyValue('background-color')
+
     const defaultBtn = this.btns.find(btn => 'default' in btn.dataset)
 
     this.adjustSlider()
@@ -129,10 +132,12 @@ export default class Tabbox {
     })
   }
 
-  moveSlider({ top, left, width, color = '#858585' }) {
+  moveSlider({ top, left, width, color }) {
     this.slider.style.transform = `translate(${left}px, ${top}px)`
     this.slider.style.width = width + 'px'
-    this.slider.style.backgroundColor = color
+
+    const defaultSliderColor = this.defaultSliderColor || '#858585'
+    this.slider.style.backgroundColor = color || defaultSliderColor
   }
 
   removeCurrentClass() {
@@ -159,6 +164,7 @@ export default class Tabbox {
     }
 
     let dropdownMatched = false
+
     this.eachDropdownOption(({ dropdownBtn, dropdownInstance, optionEl }) => {
       if (status === optionEl.dataset.tabboxItem) {
         this.setDropdown({ dropdownBtn, dropdownInstance, optionEl })
@@ -174,9 +180,11 @@ export default class Tabbox {
   }
 
   setDropdown({ dropdownBtn, dropdownInstance, optionEl }) {
+    this.removeCurrentClass()
     this.currentNode = dropdownBtn
     this.optionEl = optionEl
     this.moveToCurrentNode()
+    this.addCurrentClass()
 
     this.dropdownInstances.filter(d => d !== dropdownInstance)
       .forEach(d => d.restoreText())

data/src/js/components/Tooltip.js

@@ -67,6 +67,7 @@ export default class Tooltip {
       this.addEvent(dom, 'mouseover', () => {
 
         const msg = this.dom.dataset.msg || ''
+        const style = this.dom.dataset.style || 'default'
 
         if (msg.length === 0) {
           return
@@ -77,12 +78,15 @@ export default class Tooltip {
         tooltip.style.opacity = 0
         tooltip.style.display = 'block'
 
-        const { pos } = getFloatedTargetPos({
+        const { pos, place } = getFloatedTargetPos({
           src: dom,
           target: tooltip,
           place: this.getPlace(),
           offset: this.getOffset()
         })
+
+        tooltip.className = (style === 'default') ? 'tooltip' : `tooltip tooltip-popover ${place}`
+
         tooltip.style.left = toPixel(pos.left)
         tooltip.style.top = toPixel(pos.top)
         tooltip.style.opacity = 1

data/src/sass/_main.scss

@@ -69,7 +69,6 @@ hr {
 a {
   cursor: pointer;
   color: $color-anchor;
-  font-weight: 500;
   text-decoration: none;
   &:hover {
     color: $color-anchor-ex;

data/src/sass/abstracts/_variables.scss

@@ -311,7 +311,7 @@ $badges:
   ('badge-danger', #cd3d64, #fff),
   ('badge-warn', #f1946a, #fff),
   ('badge-info', #5ecdf1, #fff),
-  ('badge-light', #f8f9fa, #fff),
+  ('badge-light', #f8f9fa, #666),
   ('badge-dark', #000, #fff),
   ('badge-type1', #d681d8, #fff),
   ('badge-type2', #fdd85f, #516487);
@@ -320,18 +320,18 @@ $badges:
 $border-color: #dee2e6;
 
 // buttons
-// classname, bg, color, bg-ex, bg-disabled
-$btn-primary: 'btn-primary', #6772e5, #fff, #7795f8, #b2b7df;
-$btn-secondary: 'btn-secondary', #fff, #6772e5, #fff, #ebebeb;
-$btn-success: 'btn-success', #25b47e, #fff, #7de1bb, #98b6ab;
-$btn-danger: 'btn-danger', #cd3d64, #fff, #ef6a8e, #b59ba7;
-$btn-warn: 'btn-warn', #f1946a, #fff, #ffaf8c, #e5cec3;
-$btn-warning: 'btn-warning', #f1946a, #fff, #ffaf8c, #e5cec3;
-$btn-info: 'btn-info', #5ecdf1, #fff, #7bdfff, #a4c5d0;
-$btn-light: 'btn-light', #f8f9fa, #697386, #f8f9fa, #ebebeb;
-$btn-dark: 'btn-dark', #000, #fff, #4c4c4c, #b7b7b7;
-$btn-type1: 'btn-type1', #d681d8, #fff, #eda3ef, #d1bdd1;
-$btn-type2: 'btn-type2', #fdd85f, #516487, #ffe89e, #dcd7c9;
+// classname, bg, color, bg-ex, bg-disabled, outlined-color, badge-bg, badge-color
+$btn-primary: 'btn-primary', #6772e5, #fff, #7795f8, #b2b7df, darken(#6772e5, 10%), #6c8eef, #fff;
+$btn-secondary: 'btn-secondary', #fff, #6772e5, #fff, #ebebeb, lighten(#6772e5, 18%), lighten(#ccc, 12%), #6772e5;
+$btn-success: 'btn-success', #25b47e, #fff, #7de1bb, #98b6ab, darken(#25b47e, 10%), lighten(#25b47e, 5%), #fff;
+$btn-danger: 'btn-danger', #cd3d64, #fff, #ef6a8e, #b59ba7, darken(#cd3d64, 10%), lighten(#cd3d64, 10%), #fff;
+$btn-warn: 'btn-warn', #f1946a, #fff, #ffaf8c, #e5cec3, darken(#f1946a, 10%), lighten(#f1946a, 7%), #fff;
+$btn-warning: 'btn-warning', #f1946a, #fff, #ffaf8c, #e5cec3, darken(#f1946a, 10%), lighten(#f1946a, 7%), #fff;
+$btn-info: 'btn-info', #5ecdf1, #fff, #7bdfff, #a4c5d0, darken(#5ecdf1, 10%), lighten(#5ecdf1, 7%), #fff;
+$btn-light: 'btn-light', #f8f9fa, #697386, #f8f9fa, #ebebeb, #ccc, lighten(#ccc, 13%), #697386;
+$btn-dark: 'btn-dark', #000, #fff, #4c4c4c, #b7b7b7, #000, lighten(#000, 30%), #fff;
+$btn-type1: 'btn-type1', #d681d8, #fff, #eda3ef, #d1bdd1, darken(#d681d8, 10%), lighten(#d681d8, 7%), #fff;
+$btn-type2: 'btn-type2', #fdd85f, #516487, #ffe89e, #dcd7c9, darken(#fdd85f, 10%), lighten(#fdd85f, 7%), #516487;
 
 $btns:
   $btn-primary,

data/src/sass/components/_badge.scss

@@ -1,16 +1,10 @@
 .badge {
-  position: relative;
-  top: -1px;
   font-family: 'Roboto', sans-serif;
   font-weight: 900;
-  font-size: 75%;
-  display: inline-block;
-  border-radius: .25em;
-  line-height: 1;
-  vertical-align: baseline;
+  font-size: 12px;
+  border-radius: 2px;
   background-color: #eaeaea;
-  padding: .25em .4em;
-  text-align: center;
+  padding: 1px 4px;
   white-space: nowrap;
   transform: translateY(-8%);
 }

data/src/sass/components/_btn.scss

@@ -1,7 +1,8 @@
 .btn {
   outline: 0;
   background-color: #fff;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   border: 0;
   padding: 6px 12px 7px;
   border-radius: 3px;
@@ -65,11 +66,7 @@
     cursor: not-allowed;
   }
   .icon {
-    display: inline-block;
-    margin-right: 2px;
-    vertical-align: sub;
-    transform: translateY(-2px);
-    font-size: 1rem;
+    margin-right: .7em;
   }
 }
 .btn-loader {
@@ -117,7 +114,12 @@
   }
 }
 
-@each $classname, $bg, $color, $bg-ex, $bg-disabled in $btns {
+.btn .badge {
+  margin-left: .5rem;
+  font-weight: 400;
+}
+
+@each $classname, $bg, $color, $bg-ex, $bg-disabled, $outlined-color, $badge-bg, $badge-color in $btns {
   .btn.#{$classname} {
     background-color: $bg;
     color: $color;
@@ -131,14 +133,21 @@
     &:disabled {
       background-color: $bg-disabled;
     }
+    &.outlined {
+      border: 1px solid $outlined-color;
+    }
+    .badge {
+      background-color: $badge-bg;
+      color: $badge-color;
+    }
   }
 }
 
 .btn.btn-link {
-  background-color: nth($btn-link, 2);
+  background-color: transparent;
   color: nth($btn-link, 3);
   cursor: pointer;
-  box-shadow: 'none';
+  box-shadow: none;
   &.hover,
   &:hover,
   &.active,
@@ -149,6 +158,9 @@
   &:disabled {
     color: nth($btn-link, 5);
   }
+  &.outlined {
+    border: 1px solid #ccc;
+  }
 }
 
 button.close {
@@ -159,10 +171,14 @@ button.close {
 
 .btn-line {
   background-color: #7ec163;
-  color: #fff;
+  &, &:hover {
+    color: #fff;
+  }
 }
 
 .btn-fb {
   background-color: #4a9cff;
-  color: #fff;
+  &, &:hover {
+    color: #fff;
+  }
 }

data/src/sass/components/_dropdown.scss

@@ -36,6 +36,9 @@
 
   z-index: 1;
   padding: 8px 0;
+  &.no-padding {
+    padding: 0;
+  }
   position: absolute;
   background-color: #fff;
   box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
@@ -142,3 +145,13 @@
     bottom: 14px;
   }
 }
+
+.dropdown-menu-title {
+  padding: 7px 14px;
+  font-weight: 500;
+  background-color: #f7fafc;
+}
+.dropdown-menu-content {
+  padding: 14px;
+  font-size: .9rem;
+}

data/src/sass/components/_nav.scss

@@ -23,23 +23,28 @@
     }
   }
   .nav-folder + ul {
+    margin-bottom: .5rem;
     .nav-item {
-      color: #626c98;
+      padding-left: 1rem;
     }
   }
   .nav-menu {
     display: none;
   }
   .nav-item {
+    font-weight: 400;
     color: #1a1f36;
     text-decoration: none;
-    display: block;
+    display: flex;
+    align-items: center;
     padding: 7px;
     font-size: .875rem;
+    > i {
+      margin-right: .8rem;
+    }
   }
   .nav-item.active {
     color: $color-primary;
-    font-weight: 700;
   }
 }
 .nav-tabs .nav-item.show .nav-link,

data/src/sass/components/_tabbox.scss

@@ -60,7 +60,7 @@
     border-left: 0;
     border-bottom-width: 2px;
     border-bottom-style: solid;
-    border-bottom-color: #cdcdcd;
+    border-bottom-color: #e3e8ee;
     outline: 0;
     transition: all .3s;
     &:hover {
@@ -84,3 +84,13 @@
     }
   }
 }
+.tabbox.tabbox-uno {
+  $tab-active-color: #6772e5;
+  .js-slider {
+    background-color: $tab-active-color;
+  }
+  .tab-btn.js-current {
+    color: $tab-active-color;
+    font-weight: 700;
+  }
+}

data/src/sass/components/_tooltip.scss

@@ -8,3 +8,49 @@
   color: #fff;
   background-color: #555;
 }
+
+.tooltip.tooltip-popover {
+  background-color: #fff;
+  color: #3c4257;
+  padding: 10px 13px;
+  box-shadow: 4px 4px 15px 1px rgba(68,  68, 72, .12);
+
+  &:after {
+    content: ' ';
+    display: block;
+    border: 0;
+    border-top-left-radius: 4px;
+    @include size(12px);
+    background-color: #fff;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+  &.top:after {
+    bottom: -6px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &.bottom:after {
+    top: -6px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &.left:after {
+    right: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  &.right:after {
+    left: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.183
+  version: 0.0.184
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-26 00:00:00.000000000 Z
+date: 2020-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc