beyond-rails 0.0.139

data/src/sass/components/_input.scss

@@ -0,0 +1,48 @@
+.input {
+  width: 250px;
+  @media (max-width: $screen-sm) {
+    width: initial;
+  }
+  color: #3c4257;
+  border-radius: 4px;
+  border: 0;
+  appearance: none;
+  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
+    0 1px 1px 0 rgba(0, 0, 0, .12);
+  font-size: 14px;
+  padding: 6px 7px 7px;
+  outline: 0;
+  background-color: #fff;
+  &:focus {
+    @include focus-outline;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+  &.input-danger {
+    box-shadow: 0 0 0 1px #e03953;
+  }
+}
+
+.search-input {
+  display: inline-block;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
+    0 1px 1px 0 rgba(0, 0, 0, .12);
+
+  i:before {
+    color: #8892b3;
+    margin-left: 10px;
+    font-size: 12px;
+  }
+  .input {
+    width: 174px;
+    border: 0;
+    box-shadow: none;
+    &::placeholder {
+      color: #697396;
+    }
+  }
+}

data/src/sass/components/_list.scss

@@ -0,0 +1,23 @@
+.list-inline {
+  list-style: none;
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  > li:not(:last-child) {
+    margin-right: 1.4rem;
+  }
+}
+.list-style-disc {
+  list-style-type: disc;
+}
+.list-style-circle {
+  list-style-type: circle;
+}
+.list-style-square {
+  list-style-type: square;
+}
+.list-style-decimal {
+  list-style-type: decimal;
+}

data/src/sass/components/_modal.scss

@@ -0,0 +1,72 @@
+.modal {
+  transition: .3s opacity;
+  opacity: .1;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  background-color: rgba(82, 95, 127, .25);
+  .modal-dialog {
+    transition: .2s transform;
+    transform: scale(.1);
+    border-radius: 4px;
+    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, .12),
+      0 3px 6px 0 rgba(0, 0, 0, .12);
+    background-color: #fff;
+    margin: 20px auto 0;
+    max-width: 600px;
+    @media (max-width: $screen-sm) {
+      max-width: 90%;
+    }
+  }
+  &.js-active {
+    opacity: 1;
+    .modal-dialog {
+      transform: scale(1);
+    }
+  }
+  .modal-header {
+    position: relative;
+    font-size: 20px;
+    color: #1a1f36;
+    .modal-title {
+      padding: 20px;
+    }
+    .btn-close {
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 0;
+      background-color: transparent;
+      border: 0;
+      @include size(68px);
+      .icon {
+        background-size: 16px 16px;
+        @include size(16px);
+      }
+    }
+  }
+  .modal-body {
+    font-size: 14px;
+    color: #1a1f36;
+    padding: 20px;
+  }
+  .modal-footer {
+    padding: 18px 20px;
+    text-align: right;
+    .btn {
+      padding: 6px 12px;
+      min-width: 62px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+    .btn.btn-primary {
+      margin-left: 10px;
+    }
+  }
+}

data/src/sass/components/_nav.scss

@@ -0,0 +1,75 @@
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  list-style: none;
+  .nav-folder {
+    user-select: none;
+    cursor: pointer;
+    padding: 7px;
+    color: #1a1f36;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    i {
+      transition: .3s all;
+      transform: translateY(1px);
+      font-size: .7rem;
+      margin-left: 10px;
+    }
+    &.js-opened i {
+      transform: translateY(1px) rotate(180deg);
+    }
+  }
+  .nav-folder + ul {
+    .nav-item {
+      color: #626c98;
+    }
+  }
+  .nav-menu {
+    display: none;
+  }
+  .nav-item {
+    color: #1a1f36;
+    text-decoration: none;
+    display: block;
+    padding: 7px;
+    font-size: .875rem;
+  }
+  .nav-item.active {
+    color: $color-primary;
+    font-weight: 700;
+  }
+}
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+.nav-link.disabled {
+  color: #6c757d;
+  cursor: not-allowed;
+}
+.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+.nav-tabs .nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: .25rem;
+  border-top-right-radius: .25rem;
+}
+.nav-link {
+  display: block;
+  padding: .5rem 1rem;
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: $bg-primary;
+}
+.card-header-pills {
+  margin-right: -.625rem;
+  margin-left: -.625rem;
+}

data/src/sass/components/_navbar.scss

@@ -0,0 +1,211 @@
+.navbar {
+  $bg-nav: rgb(227, 232, 238);
+  $color-nav-primary: rgb(60, 66, 87);
+  $color-nav-primary-ex: #101425;
+  $color-nav: rgb(105, 115, 150);
+  $color-nav-ex: #adb5d0;
+  $color-nav-disabled: #adb5d0;
+
+  display: flex;
+  background-color: $bg-nav;
+  font-size: 12px;
+  padding: 8px 14px 8px 8px;
+  @media (max-width: $screen-md) {
+    display: block;
+    .navbar-topbar {
+      @include flex-center;
+    }
+  }
+  &, a {
+    color: $color-nav;
+  }
+  .navbar-brand {
+    display: inline-block;
+    color: $color-nav-primary;
+    font-size: 16px;
+    padding: 4px 14px;
+  }
+  .navbar-nav {
+    display: flex;
+    align-items: center;
+    @media (max-width: $screen-md) {
+      display: block;
+      margin-bottom: 10px;
+      .nav-link {
+        display: block;
+        padding: 7px 0;
+      }
+    }
+  }
+  .nav-item.js-active,
+  .nav-item:hover  {
+    .nav-link {
+      color: $color-nav-primary-ex;
+    }
+  }
+  .nav-link {
+    padding: 7px 14px;
+    &.disabled {
+      color: $color-nav-disabled;
+      cursor: not-allowed;
+      &:hover {
+        color: $color-nav-ex;
+      }
+    }
+  }
+  &.js-collapse {
+    @media (max-width: $screen-md) {
+      top: 14px;
+      left: 14px;
+      right: 14px;
+      position: fixed;
+      z-index: 20;
+      box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
+        0 15px 35px 0 rgba(49, 49, 93, .1),
+        0 5px 15px 0 rgba(0, 0, 0, .08);
+    }
+  }
+  .navbar-collapse {
+
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+
+    @media (max-width: $screen-md) {
+      display: none;
+    }
+
+    &.js-collapse {
+      display: flex;
+      justify-content: space-between;
+      flex-grow: 1;
+      @media (max-width: $screen-md) {
+        display: block;
+        padding: 7px 14px 14px;
+      }
+    }
+  }
+  .navbar-toggler {
+    display: none;
+    @media (max-width: $screen-md) {
+      display: block;
+    }
+    border: 0;
+    background-color: transparent;
+    position: relative;
+    @include size(48px);
+    .navbar-toggler-icon {
+      @include absolute-center;
+      &,
+      &:before,
+      &:after {
+        transition: .3s all;
+        background-color: $color-nav-primary;
+        display: block;
+        position: absolute;
+        width: 24px;
+        height: 1px;
+      }
+      &:before {
+        content: '';
+        top: -7px;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      &:after {
+        content: '';
+        bottom: -7px;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+    &.js-active .navbar-toggler-icon {
+      & {
+        background-color: transparent;
+      }
+      &:before {
+        transform: rotate(45deg);
+        top: 0;
+      }
+      &:after {
+        transform: rotate(-45deg);
+        bottom: 0;
+      }
+    }
+  }
+
+  &.navbar-type1 {
+    $bg-nav-type1: #1a1f36;
+    $color-nav-primary-type1: #fff;
+    $color-nav-type1: #6c8eef;
+    $color-nav-ex-type1: #b9d2ff;
+    $color-nav-disabled-type1: #9193ce;
+
+    background: $bg-nav-type1;
+    &, & a {
+      color: $color-nav-type1;
+    }
+    .navbar-brand {
+      color: #fff;
+    }
+    .nav-item.js-active,
+    .nav-item:hover  {
+      .nav-link {
+        color: $color-nav-ex-type1;
+      }
+    }
+    .nav-link.disabled,
+    .nav-link.disabled:hover {
+      color: $color-nav-disabled-type1;
+    }
+    .navbar-toggler-icon,
+    .navbar-toggler-icon:before,
+    .navbar-toggler-icon:after {
+      background-color: $color-nav-primary-type1;
+    }
+    .search-input {
+      box-shadow: none;
+    }
+  }
+
+  &.navbar-type2 {
+    $color-nav-primary-type2: #fff;
+    $color-nav-type2: #e3e0e8;
+    $color-nav-ex-type2: #fff;
+    $color-nav-disabled-type2: #b5b6dc;
+
+    background: rgb(84,73,255);
+    background: linear-gradient(125deg,
+      rgba(84,73,255,1) 0%,
+      rgba(29,205,255,1) 80%,
+      rgba(166,255,203,1) 100%);
+    &, & a {
+      color: $color-nav-type2;
+    }
+    .navbar-brand {
+      color: $color-nav-primary-type2;
+    }
+    .nav-item.js-active,
+    .nav-item:hover  {
+      .nav-link {
+        color: $color-nav-ex-type2;
+      }
+    }
+    .nav-link.disabled,
+    .nav-link.disabled:hover {
+      color: $color-nav-disabled-type2;
+    }
+    .navbar-toggler-icon,
+    .navbar-toggler-icon:before,
+    .navbar-toggler-icon:after {
+      background-color: $color-nav-primary-type2;
+    }
+    .search-input {
+      box-shadow: none;
+    }
+  }
+}

data/src/sass/components/_pagination.scss

@@ -0,0 +1,64 @@
+.pagination {
+  display: flex;
+  list-style: none;
+}
+
+%page-link {
+  border-radius: 3px;
+  transition: .3s all;
+  margin: 0 7px;
+  color: #1a1f36;
+  display: block;
+  cursor: pointer;
+  padding: .5rem .75rem;
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:hover {
+    background-color: #3c4258;
+    color: #fff;
+  }
+}
+
+.page-link {
+  @extend %page-link;
+}
+
+.pagination-lg .page-link {
+  padding: 1rem 1.5rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+.pagination-sm .page-link {
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.page-link-btn {
+  font-weight: 900;
+  @extend %page-link;
+  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0,
+    rgba(0, 0, 0, 0.12) 0 1px 1px 0,
+    rgba(60, 66, 87, 0.16) 0 0 0 1px,
+    rgba(60, 66, 87, 0.12) 0 2px 5px 0;
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0) 0 0 0 0,
+      rgba(0, 0, 0, 0.12) 0 1px 1px 0,
+      rgba(60, 66, 87, 0.16) 0 0 0 1px,
+      rgba(60, 66, 87, 0.12) 0 3px 9px 0,
+      rgba(60, 66, 87, 0.12) 0 2px 5px 0;
+  }
+}
+
+.page-item.disabled {
+  .page-link,
+  .page-link-btn {
+    cursor: not-allowed;
+    opacity: .5;
+    &:hover {
+      background-color: initial;
+      color: initial;
+    }
+  }
+}