beyond-rails 0.0.139

data/src/sass/components/_card.scss

@@ -0,0 +1,183 @@
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, .125);
+  border-radius: .25rem;
+}
+.card-body {
+  flex: 1 1 auto;
+  padding: 1.24rem;
+}
+.card-title {
+  font-weight: 900;
+  margin-bottom: .75rem;
+}
+.card-subtitle {
+  margin-top: -0.375rem;
+  margin-bottom: 0;
+}
+.card-link + .card-link {
+  margin-left: 1.25rem;
+}
+.card-text {
+  margin-bottom: 1rem;
+  line-height: 1.6rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.list-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: .75rem 1.25rem;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .125);
+}
+.card-header:first-child {
+  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
+  padding: .75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, .03);
+  border-bottom: 1px solid rgba(0, 0, 0, .125);
+}
+.card-header+.list-group .list-group-item:first-child {
+  border-top: 0;
+}
+.card-footer {
+  padding: .75rem 1.25rem;
+  background-color: rgba(0, 0, 0, .03);
+  border-top: 1px solid rgba(0, 0, 0, .125);
+}
+.card > .list-group:first-child .list-group-item:first-child {
+  border-top-left-radius: .25rem;
+  border-top-right-radius: .25rem;
+}
+.card > .list-group:last-child .list-group-item:last-child {
+  border-bottom-left-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+}
+.list-group-flush .list-group-item {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+.list-group-flush:first-child .list-group-item:first-child {
+  border-top: 0;
+}
+.card-img-top {
+  border-top-left-radius: calc(.25rem - 1px);
+  border-top-right-radius: calc(.25rem - 1px);
+}
+.card-shadow-sm {
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .12);
+}
+.card-shadow-md {
+  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.12),
+    0 3px 6px 0 rgba(0, 0, 0, .12);
+}
+.card-shadow-lg {
+  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, .25),
+    0 18px 36px -18px rgba(0, 0, 0, .3),
+    0 -12px 36px -8px rgba(0, 0, 0, .02);
+}
+.blockquote {
+  font-size: 1.25rem;
+}
+.blockquote-footer {
+  display: block;
+  font-size: 80%;
+  color: #6c757d;
+}
+.card-header-tabs {
+  margin-right: -.625rem;
+  margin-bottom: -.75rem;
+  margin-left: -.625rem;
+  border-bottom: 0;
+}
+.card .nav-item {
+  padding: 0;
+}
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem;
+}
+.card-group {
+  display: flex;
+  flex-flow: row wrap;
+}
+.card-deck {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-columns .card {
+  margin-bottom: .75rem;
+}
+
+@media (min-width: $screen-sm) {
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer,
+  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,
+  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
+  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top {
+    border-radius: 0;
+  }
+  .card-group > .card:first-child,
+  .card-group > .card:first-child .card-img-top {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
+    border-radius: 0;
+  }
+  .card-group > .card:last-child,
+  .card-group > .card:last-child .card-img-top {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: $screen-sm) {
+  .card-deck {
+    flex-flow: row wrap;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .card-deck .card {
+    display: flex;
+    flex: 1 0 0%;
+    margin-right: 15px;
+    margin-left: 15px;
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: $screen-sm) {
+  .card-columns {
+    column-count: 3;
+    column-gap: 1.25rem;
+  }
+  .card-columns .card {
+    display: inline-block;
+    width: 100%;
+  }
+}

data/src/sass/components/_checkbox.scss

@@ -0,0 +1,99 @@
+@keyframes check1 {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 5px;
+  }
+}
+@keyframes check2 {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 0;
+  }
+  100% {
+    width: 8px;
+  }
+}
+
+.label-checkbox {
+  padding: 6px 0;
+  cursor: pointer;
+  margin-right: 25px;
+  vertical-align: middle;
+  color: #3c4257;
+  font-size: 14px;
+  .checkbox + span {
+    position: relative;
+    margin-left: 4px;
+  }
+}
+
+.label-checkbox .checkbox .icon-checkbox {
+  transform: translateY(-1px);
+}
+label.checkbox {
+  margin-bottom: initial;
+}
+.checkbox {
+  transform: translateY(3px);
+  &.focus {
+    @include focus-outline;
+  }
+  $size: 14px;
+  @include size($size);
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  input[type="checkbox"] {
+    @include size($size);
+    cursor: pointer;
+    z-index: 1;
+    opacity: 0;
+    position: absolute;
+    display: block;
+    bottom: 0;
+    &:checked ~ .icon-checkbox {
+      background-color: #6772e5;
+      box-shadow: none;
+      &:before {
+        animation: .3s check1;
+        width: 5px;
+        transform: rotate(45deg) translate(7px, 2px);
+        transform-origin: left top;
+      }
+      &:after {
+        animation: .3s check2;
+        width: 9px;
+        transform: rotate(-50deg) translate(-5px, 10px);
+        transform-origin: left top;
+      }
+    }
+  }
+  .icon-checkbox {
+    background-color: #fff;
+    transform: translateY(-2px);
+    transition: .3s background-color;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12),
+      0 0 0 1px rgba(60, 66, 87, 0.16),
+      0 2px 5px 0 rgba(60, 66, 87, 0.12);
+    border-radius: 3px;
+    @include size(100%);
+    display: inline-block;
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      display: block;
+      background-color: #fff;
+      height: 2px;
+    }
+  }
+  @include ripple(34px, -10px, -9px);
+  &.disabled {
+    @extend %checkbox-disabled;
+  }
+}

data/src/sass/components/_date-input.scss

@@ -0,0 +1,28 @@
+.date-input {
+
+  width: 82px;
+  text-align: center;
+  height: 24px;
+  border: 0;
+  border-radius: 3px;
+  font-size: 13px;
+
+  &::placeholder {
+    font-size: 11px;
+    color: hsla(0, 0%, 100%, .6);
+  }
+  &.active {
+    background-color: #5469d4;
+    color: #fff
+  }
+  &.input.active {
+    color: #fff
+  }
+  &.active.danger {
+    background-color: #cd3d64;
+    color: #fff
+  }
+  &:focus {
+    outline: 0;
+  }
+}

data/src/sass/components/_date-menu.scss

@@ -0,0 +1,85 @@
+.date-menu {
+  display: none;
+  position: absolute;
+  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);
+  background-color: #fff;
+  white-space: nowrap;
+  .date-menu-content {
+    display: inline-block;
+    position: relative;
+    padding: 0 14px 14px 14px;
+
+    &.second-content {
+      padding: 0 14px 14px 0;
+    }
+  }
+  .date-menu-caption {
+    font-size: 15px;
+    color: #3c4257;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+  .date-menu-week-header {
+    li {
+      display: inline-block;
+      padding: 7px 10px;
+      font-size: 11px;
+      color: #8792a2;
+    }
+  }
+  .date-menu-btn-prev,
+  .date-menu-btn-next {
+    border: 0;
+    background-color: transparent;
+    position: absolute;
+    display: block;
+    @include size(50px);
+
+    .icon-chevron-left,
+    .icon-chevron-right {
+      font-size: 12px;
+    }
+  }
+  .date-menu-btn-prev {
+    left: 0;
+    top: 0;
+  }
+  .date-menu-btn-next {
+    right: 0;
+    top: 0;
+  }
+  .date-menu-date-table {
+    font-size: 14px;
+    width: 100%;
+    margin-top: 2px;
+    th, td {
+      padding: 3px;
+    }
+    td {
+      text-align: center;
+      &.cell {
+        background-color: #f7fafc;
+        cursor: pointer;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #e3e8ee;
+      }
+      &.cell.today {
+        background-color: #fffef4;
+      }
+      &.cell.selected {
+        background-color: #6c8eef;
+        color: #fff;
+        border-color: #6c8eef;
+      }
+      &.cell.selected-ex {
+        background-color: #5469d4;
+        color: #fff;
+        border-color: #5469d4;
+      }
+    }
+  }
+}

data/src/sass/components/_date-time-ranger.scss

@@ -0,0 +1,21 @@
+.date-time-ranger {
+  border-radius: 4px;
+  background-color: #fff;
+  display: inline-block;
+  box-shadow: 0 0 0 1px rgba(42, 47, 69, .1),
+    0 2px 5px 0 rgba(42, 47, 69, .1),
+    0 1px 1px 0 rgba(0, 0, 0, .07),
+    0 1px 2px 0 rgba(0, 0, 0, .08),
+    0 0 0 0 transparent;
+  padding: 4px;
+  .icon-arrow-right {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 7px;
+    margin-right: 7px;
+    outline: 0;
+    background-color: transparent;
+    font-size: 12px;
+    border: 0;
+  }
+}

data/src/sass/components/_datepicker.scss

@@ -0,0 +1,3 @@
+.datepicker {
+  display: inline-block;
+}

data/src/sass/components/_dropdown.scss

@@ -0,0 +1,144 @@
+.btn.btn-dropdown {
+  [class^="icon-"] {
+    font-size: 11px;
+    color: #4f566b;
+    margin-left: 4px;
+    display: inline-block;
+    vertical-align: middle;
+    transform: translateY(-1px);
+  }
+  [class^="icon-"].no-text {
+    margin-left: 0;
+  }
+}
+.heading-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  .icon.icon-chevron-down {
+    transition: .3s all;
+    opacity: 0;
+    margin-left: 7px;
+    font-size: 80%;
+  }
+  &:hover .icon.icon-chevron-down {
+    opacity: 1;
+  }
+}
+.dropdown-menu {
+  display: none;
+  transition: .2s all;
+
+  .dropdown-menu-scrollable {
+    max-height: 186px;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  z-index: 1;
+  padding: 8px 0;
+  position: absolute;
+  background-color: #fff;
+  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);
+  .dropdown-divider {
+    border-bottom: 1px solid #d8d8d8;
+    margin: 10px 0;
+  }
+  .dropdown-item {
+    min-width: 160px;
+    padding: 7px 20px;
+    font-size: 14px;
+    color: #5469d4;
+    display: block;
+    text-decoration: none;
+    &:hover {
+      background-color: #f7fafc;
+    }
+  }
+  &.no-arrow:after {
+    display: none;
+  }
+  &:after {
+    content: ' ';
+    display: block;
+    border: 0;
+    border-top-left-radius: 4px;
+    @include size(12px);
+    background-color: #fff;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+  &[data-place="top"]:after {
+    bottom: -6px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &[data-place="bottom"]:after {
+    top: -6px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &[data-place="left"]:after {
+    right: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  &[data-place="right"]:after {
+    left: -6px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &[data-place="top"][data-align="left"]:after {
+    bottom: -6px;
+    left: 20px;
+    right: auto;
+  }
+  &[data-place="bottom"][data-align="left"]:after {
+    top: -6px;
+    left: 20px;
+    right: auto;
+  }
+
+  &[data-place="top"][data-align="right"]:after {
+    bottom: -6px;
+    left: auto;
+    right: 20px;
+  }
+  &[data-place="bottom"][data-align="right"]:after {
+    top: -6px;
+    left: auto;
+    right: 20px;
+  }
+
+  &[data-place="left"][data-align="top"]:after {
+    right: -6px;
+    top: 14px;
+    bottom: auto;
+  }
+  &[data-place="right"][data-align="top"]:after {
+    left: -6px;
+    top: 14px;
+    bottom: auto;
+  }
+
+  &[data-place="left"][data-align="bottom"]:after {
+    right: -6px;
+    top: auto;
+    bottom: 14px;
+  }
+  &[data-place="right"][data-align="bottom"]:after {
+    left: -6px;
+    top: auto;
+    bottom: 14px;
+  }
+}