beyond-rails 0.0.183 → 0.0.188

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b95840e6e097242680b87b6f18a62d8143c862b42475a6267cf8fb1b3392b14
-  data.tar.gz: fb4dc8da9afd023477ae1e0615051b8117996518eb1b1278a2c8f1e4349fa3de
+  metadata.gz: a72c8e57a80e8c6a653ea5356f23c3be9ce034f88d23ec5e42c3a2a6256bda6f
+  data.tar.gz: cb191ff4300f1f09c79162109b85d44f0e07f0c86f4926b40654f83f25d2dc98
 SHA512:
-  metadata.gz: 5e07119c9cfc45279155a1d0e47fe0c893b1c838537ee5d7589dfa158d36f0d5b1ecd1ef2422b7c964ef6f7d9c6913a6a19c70fc5bae67f5022d7942a0d8d2f2
-  data.tar.gz: ff1cd77dc2d294fcbffff1315be60393e7430e51504f928da1d082267ee266d8fa82802903450a3cf348ad2c5248f9f0ee1cc5441b35fdae19c175a26a9264a8
+  metadata.gz: 12b25834e8759f6c421a785e1fc6e41d5095e197a383f8df7c8f8c85ed9cb35bd6651793e63dfcdb8071cf7a94cb495ac95b42c924f02c453b9e45599a25af00
+  data.tar.gz: 6b308a81c3ae0cadb78dcacf76fcf41ef76b5f0bae1b79685333632938eb697690093cba2f4db84d3fb131e9fdb934a9b57407809191c9f7d86719c962f8118c

data/src/js/components/Modal.js

@@ -46,15 +46,19 @@ export default class Modal {
   addEvents() {
     this.addEvent(this.dom, 'click', () => this.show())
 
-    this.addEvent(this.closeBtn, 'click', () => {
-      this.hide()
-      this.options.cancel('close')
-    })
+    if (this.closeBtn) {
+      this.addEvent(this.closeBtn, 'click', () => {
+        this.hide()
+        this.options.cancel('close')
+      })
+    }
 
-    this.addEvent(this.cancelBtn, 'click', () => {
-      this.hide()
-      this.options.cancel('cancel')
-    })
+    if (this.cancelBtn) {
+      this.addEvent(this.cancelBtn, 'click', () => {
+        this.hide()
+        this.options.cancel('cancel')
+      })
+    }
 
     this.addEvent(this.modal, 'click', event => {
       // is backdrop
@@ -64,13 +68,15 @@ export default class Modal {
       }
     })
 
-    this.addEvent(this.confirmBtn, 'click', () => {
-      if (typeof this.options.confirm === 'function') {
-        this.options.confirm()
-      }
-      else {
-        this.hide()
-      }
-    })
+    if (this.confirmBtn) {
+      this.addEvent(this.confirmBtn, 'click', () => {
+        if (typeof this.options.confirm === 'function') {
+          this.options.confirm()
+        }
+        else {
+          this.hide()
+        }
+      })
+    }
   }
 }

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/_beyond.scss

@@ -49,3 +49,4 @@
 @import './components/_toast';
 @import './components/_tooltip';
 @import './components/_switch';
+@import './components/_mega-menu';

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

@@ -1,5 +1,10 @@
 $beyond-use-helper: false !default;
 
+// texts
+$text-color-strong: #1a1f36;
+$text-color: #3c4257;
+$text-color-light: #828695;
+
 // backgrounds
 $bg-transparent: transparent;
 $bg-admin: #e3e8ee;
@@ -311,7 +316,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 +325,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/_mega-menu.scss

@@ -0,0 +1,63 @@
+.mega-menu {
+  padding-top: .2rem;
+  padding-bottom: .2rem;
+}
+.mega-menu-divider {
+  border-bottom: 1px solid #ebebeb;
+}
+.mega-menu-col {
+  padding: .7rem 1.5rem;
+  flex-grow: 1;
+  transition: .3s background-color;
+  min-width: 180px;
+  color: $text-color;
+  display: flex;
+  align-items: center;
+  &:hover {
+    color: $text-color-strong;
+    background-color: #f6f6f6;
+  }
+  i {
+    margin-right: .6rem;
+  }
+}
+.mega-menu-label {
+  padding-left: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  color: $text-color-light;
+  font-size: 12px;
+}
+.mega-menu-item {
+  transition: .3s background-color;
+  color: $text-color;
+  display: block;
+  padding: .5rem 2.2rem;
+  &:hover {
+    color: $text-color-strong;
+    background-color: #f6f6f6;
+  }
+}
+.mega-menu-icon-box {
+  display: table;
+  width: 100%;
+  > div {
+    display: table-row;
+  }
+}
+.mega-menu-icon-box-item {
+  cursor: pointer;
+  transition: .3s all;
+  display: table-cell;
+  padding: 1rem 1.8rem;
+  color: $color-primary;
+  text-align: center;
+  &:hover {
+    color: $text-color-strong;
+    background-color: #f6f6f6;
+  }
+  i {
+    display: block;
+    margin-bottom: .4rem;
+  }
+}

data/src/sass/components/_modal.scss

@@ -61,7 +61,6 @@
     text-align: right;
     .btn {
       padding: 6px 12px;
-      min-width: 62px;
       font-size: 14px;
       font-weight: 400;
     }
@@ -70,3 +69,15 @@
     }
   }
 }
+
+.modal.static {
+  overflow-y: initial;
+  background-color: transparent;
+  opacity: 1;
+  position: static;
+  display: block;
+  .modal-dialog {
+    transform: scale(1);
+    margin: 0 auto;
+  }
+}

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,59 @@
   color: #fff;
   background-color: #555;
 }
+
+.tooltip.tooltip-popover {
+  $border-color: #e8e8e8;
+  background-color: #fff;
+  color: #3c4257;
+  padding: 10px 13px;
+  box-shadow: 4px 4px 15px 1px rgba(68,  68, 72, .12);
+  border: 1px solid $border-color;
+
+  &: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;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+  }
+  &.bottom:after {
+    top: -6px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    border-left: 1px solid $border-color;
+    border-top: 1px solid $border-color;
+  }
+  &.left:after {
+    right: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    border-right: 1px solid $border-color;
+    border-top: 1px solid $border-color;
+  }
+  &.right:after {
+    left: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    border-left: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+  }
+}

data/src/sass/layout/_flex-util.scss

@@ -4,6 +4,9 @@
 .justify-content-between {
   justify-content: space-between;
 }
+.justify-content-around {
+  justify-content: space-around;
+}
 .justify-content-start {
   justify-content: flex-start;
 }

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.183
+  version: 0.0.188
 platform: ruby
 authors:
 - kmsheng
 - Eddie Li
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-26 00:00:00.000000000 Z
+date: 2020-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -67,7 +67,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '5.0'
-description:
+description: 
 email: kmsh3ng@gmail.com
 executables: []
 extensions: []
@@ -191,6 +191,7 @@ files:
 - src/sass/components/_icon.scss
 - src/sass/components/_input.scss
 - src/sass/components/_list.scss
+- src/sass/components/_mega-menu.scss
 - src/sass/components/_modal.scss
 - src/sass/components/_nav.scss
 - src/sass/components/_navbar.scss
@@ -225,7 +226,7 @@ homepage: https://superlanding.github.io/beyond/
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -240,9 +241,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.6.2
-signing_key:
+rubygems_version: 3.0.6
+signing_key: 
 specification_version: 4
 summary: beyond is a collection of frontend components which aims for admin website.
 test_files: []