beyond-rails 0.0.139

data/src/sass/components/_form.scss

@@ -0,0 +1,383 @@
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.form {
+  .btn.btn-form {
+    text-shadow: 0 1px 0 #fff;
+    color: #333;
+    background: linear-gradient(#ccd0d6, #adb2bb);
+    border: 1px solid #ccc;
+    box-shadow: none;
+    font-size: 12px;
+    font-weight: 400;
+    padding: 0;
+    overflow: hidden;
+    > span {
+      display: inline-block;
+      padding: 2px 10px;
+      background: linear-gradient(#f7f8fa, #eff1f4);
+    }
+    &:hover {
+      transform: none;
+    }
+    &:focus {
+      @include focus-outline;
+    }
+  }
+  a {
+    margin-top: 7px;
+    display: block;
+    font-size: 12px;
+  }
+  background-color: #fff;
+  .form-header {
+    padding: 16px 20px;
+    box-shadow: inset 0 -1px #e3e8ee;
+  }
+  .form-content {
+    padding: 16px 20px;
+  }
+  .form-heading {
+    color: #1a1f36;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+  .form-heading-desc {
+    color: #3c4257;
+    font-size: 14px;
+    line-height: 30px;
+  }
+  .field {
+    margin-bottom: 15px;
+    .label {
+      vertical-align: top;
+      display: inline-block;
+      font-size: 14px;
+      width: 160px;
+      text-shadow: 0 1px 0 #fff;
+      color: #555;
+    }
+    .control {
+      display: inline-block;
+    }
+  }
+  .form-footer {
+    text-align: right;
+    padding: 16px 20px;
+    box-shadow: inset 0 1px #e3e8ee;
+  }
+  .hint {
+    margin: 7px 0;
+  }
+}
+
+.form-inline {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  .form-group {
+    margin-bottom: 0;
+  }
+}
+
+.hint {
+  font-size: 13px;
+  display: block;
+  color: #5469d4;
+}
+
+.hint.hint-danger {
+  color: #e03953;
+  &:before {
+    font-family: 'icomoon';
+    margin-right: 4px;
+    display: inline-block;
+    transform: translateY(1px);
+    color: #e03953;
+    @extend .icon-exclamation-triangle:before
+  }
+}
+
+.form.form-vertical {
+  .field .label {
+    color: #1a1f36;
+    display: block;
+  }
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+.col .form-control,
+[class*=col-] .form-control {
+  width: 100%;
+}
+
+.form-control {
+  @extend %form-control;
+  padding: 5px 7px 6px;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
+    0 1px 1px 0 rgba(0, 0, 0, .12);
+  transition: box-shadow .15s ease-in-out;
+
+  &:focus {
+    @include focus-outline;
+  }
+}
+
+.form-control-plaintext {
+  @extend %form-control;
+  height: 100%;
+  padding: 6px 0;
+  background-color: transparent;
+}
+
+.col-form-label-lg {
+  padding-top: calc(.5rem + 1px);
+  padding-bottom: calc(.5rem + 1px);
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+.col-form-label {
+  padding-top: calc(.375rem + 1px);
+  padding-bottom: calc(.375rem + 1px);
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 1.5;
+}
+.col-form-label-sm {
+  padding-top: calc(.25rem + 1px);
+  padding-bottom: calc(.25rem + 1px);
+  font-size: .875rem;
+  line-height: 1.5;
+}
+.col-form-field {
+  display: flex;
+  align-items: center;
+  .form-check {
+    transform: translateY(-2px);
+    margin-bottom: 0;
+  }
+}
+
+.form-control-lg {
+  padding: .5rem 1rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: .3rem;
+}
+
+.form-control-sm {
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+.form-control,
+.form-control-lg,
+.form-control-sm,
+.form-control-plaintext {
+  &.is-valid {
+    box-shadow: 0 0 0 1px $txt-color-success;
+  }
+  &.is-invalid {
+    box-shadow: 0 0 0 1px $txt-color-danger;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled,
+  &[readonly] {
+    color: #111;
+    background-color: #e9ecef;
+  }
+}
+.form-control-plaintext {
+  &[readonly] {
+    background: transparent;
+  }
+}
+
+.valid-feedback,
+.invalid-feedback {
+  font-size: 80%;
+  margin-top: .35rem;
+  &:before {
+    font-family: 'icomoon';
+    display: inline-block;
+  }
+}
+
+.valid-feedback {
+  color: $txt-color-success;
+  &:before {
+    margin-right: 4px;
+    transform: translateY(1px);
+    color: $txt-color-success;
+    @extend .icon-check:before
+  }
+}
+
+.invalid-feedback {
+  color: $txt-color-danger;
+  &:before {
+    margin-right: 4px;
+    transform: translateY(1px);
+    color: $txt-color-danger;
+    @extend .icon-exclamation-triangle:before
+  }
+}
+
+.form-txt {
+  display: block;
+  margin-top: .25rem;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+.form-check.form-check-inline {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0;
+  margin-right: .75rem;
+
+  .checkbox,
+  .radio {
+    transform: translateY(0);
+  }
+  .checkbox + span,
+  .radio + span {
+    position: relative;
+    margin-left: 7px;
+  }
+}
+
+.form-check {
+  margin-bottom: 1rem;
+  display: block;
+  padding: 6px 0;
+  cursor: pointer;
+  margin-right: 25px;
+  vertical-align: middle;
+  color: #3c4257;
+  font-size: 14px;
+  .checkbox + span,
+  .radio + span {
+    position: relative;
+    margin-left: 4px;
+  }
+  .checkbox .icon-checkbox {
+    transform: translateY(-1px);
+  }
+  &.disabled {
+    color: #6c757d;
+    cursor: not-allowed;
+    .checkbox {
+      @extend %checkbox-disabled;
+    }
+    .radio {
+      @extend %radio-disabled;
+    }
+  }
+  span.is-valid {
+    color: $txt-color-success;
+  }
+  span.is-invalid {
+    color: $txt-color-danger;
+  }
+}
+
+.form-row {
+  @extend %row;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+.form-row > .col, .form-row > [class*=col-] {
+  padding-left: 5px;
+  padding-right: 15px;
+}
+
+.form-control-file {
+  display: block;
+  width: 100%;
+}
+
+input[type="file"] {
+  line-height: 1;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+  > .form-control {
+    flex: 1 1 0%;
+  }
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: .25rem .75rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 0;
+  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
+    0 1px 1px 0 rgba(0, 0, 0, .12);
+  border-radius: .25rem;
+}
+
+.input-group-prepend {
+  margin-right: -1px;
+}
+
+.input-group > .form-control:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@media (min-width: $screen-sm) {
+  .form-inline {
+    .form-control {
+      width: auto;
+    }
+    .input-group {
+      width: auto;
+    }
+    .form-group {
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
+      margin-bottom: 0;
+    }
+    label {
+      margin-bottom: 0;
+    }
+  }
+}

data/src/sass/components/_icon.scss

@@ -0,0 +1,371 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url(beyond-font-path('#{$beyond-icon-font-path}#{$beyond-icon-font-name}.eot?sxulqz'));
+  src: url(beyond-font-path('#{$beyond-icon-font-path}#{$beyond-icon-font-name}.eot?sxulqz#iefix')) format('embedded-opentype'),
+    url(beyond-font-path('#{$beyond-icon-font-path}#{$beyond-icon-font-name}.ttf?sxulqz')) format('truetype'),
+    url(beyond-font-path('#{$beyond-icon-font-path}#{$beyond-icon-font-name}.woff?sxulqz')) format('woff'),
+    url(beyond-font-path('#{$beyond-icon-font-path}#{$beyond-icon-font-name}.svg?sxulqz#icomoon')) format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-a:before {
+  content: "\e900";
+}
+.icon-arrow-down:before {
+  content: "\e901";
+}
+.icon-arrow-left:before {
+  content: "\e902";
+}
+.icon-arrow-right:before {
+  content: "\e903";
+}
+.icon-arrow-up:before {
+  content: "\e904";
+}
+.icon-bank:before {
+  content: "\e905";
+}
+.icon-bell-alt:before {
+  content: "\e906";
+}
+.icon-bell:before {
+  content: "\e907";
+}
+.icon-birthday-cake:before {
+  content: "\e908";
+}
+.icon-black-cat:before {
+  content: "\e909";
+}
+.icon-bolt-alt:before {
+  content: "\e90a";
+}
+.icon-bolt:before {
+  content: "\e90b";
+}
+.icon-brush:before {
+  content: "\e90c";
+}
+.icon-calculator:before {
+  content: "\e90d";
+}
+.icon-caret-square-up:before {
+  content: "\e90e";
+}
+.icon-cart-empty:before {
+  content: "\e90f";
+}
+.icon-cart:before {
+  content: "\e910";
+}
+.icon-chart-bar:before {
+  content: "\e911";
+}
+.icon-check-circle:before {
+  content: "\e912";
+}
+.icon-check:before {
+  content: "\e913";
+}
+.icon-chevron-down:before {
+  content: "\e914";
+}
+.icon-chevron-left:before {
+  content: "\e915";
+}
+.icon-chevron-right:before {
+  content: "\e916";
+}
+.icon-chevron-up:before {
+  content: "\e917";
+}
+.icon-clock:before {
+  content: "\e918";
+}
+.icon-code:before {
+  content: "\e919";
+}
+.icon-cog:before {
+  content: "\e91a";
+}
+.icon-cogs:before {
+  content: "\e91b";
+}
+.icon-comments:before {
+  content: "\e91c";
+}
+.icon-copy:before {
+  content: "\e91d";
+}
+.icon-cross-circle:before {
+  content: "\e91e";
+}
+.icon-cross:before {
+  content: "\e91f";
+}
+.icon-doc:before {
+  content: "\e920";
+}
+.icon-dollar-alt:before {
+  content: "\e921";
+}
+.icon-dollar:before {
+  content: "\e922";
+}
+.icon-dot-circle-alt:before {
+  content: "\e923";
+}
+.icon-dot-circle:before {
+  content: "\e924";
+}
+.icon-download:before {
+  content: "\e925";
+}
+.icon-earth:before {
+  content: "\e926";
+}
+.icon-ecpay:before {
+  content: "\e927";
+}
+.icon-ellipsis-h:before {
+  content: "\e928";
+}
+.icon-ellipsis-v:before {
+  content: "\e929";
+}
+.icon-envelop:before {
+  content: "\e92a";
+}
+.icon-exchange:before {
+  content: "\e92b";
+}
+.icon-exclamation-triangle:before {
+  content: "\e92c";
+}
+.icon-external-link:before {
+  content: "\e92d";
+}
+.icon-family-mart:before {
+  content: "\e92e";
+}
+.icon-fb-messenger:before {
+  content: "\e92f";
+}
+.icon-fb:before {
+  content: "\e930";
+}
+.icon-female:before {
+  content: "\e931";
+}
+.icon-file-alt:before {
+  content: "\e932";
+}
+.icon-file:before {
+  content: "\e933";
+}
+.icon-h:before {
+  content: "\e934";
+}
+.icon-hamburger:before {
+  content: "\e935";
+}
+.icon-hct:before {
+  content: "\e936";
+}
+.icon-hi-life:before {
+  content: "\e937";
+}
+.icon-horn:before {
+  content: "\e938";
+}
+.icon-image-alt:before {
+  content: "\e939";
+}
+.icon-image:before {
+  content: "\e93a";
+}
+.icon-images-alt:before {
+  content: "\e93b";
+}
+.icon-images:before {
+  content: "\e93c";
+}
+.icon-invoice:before {
+  content: "\e93d";
+}
+.icon-kafen:before {
+  content: "\e93e";
+}
+.icon-language:before {
+  content: "\e93f";
+}
+.icon-line:before {
+  content: "\e940";
+}
+.icon-link:before {
+  content: "\e941";
+}
+.icon-list:before {
+  content: "\e942";
+}
+.icon-lock:before {
+  content: "\e943";
+}
+.icon-male:before {
+  content: "\e944";
+}
+.icon-medium-alt:before {
+  content: "\e945";
+}
+.icon-medium:before {
+  content: "\e946";
+}
+.icon-move:before {
+  content: "\e947";
+}
+.icon-ok-mart:before {
+  content: "\e948";
+}
+.icon-paper-plane:before {
+  content: "\e949";
+}
+.icon-pause:before {
+  content: "\e94a";
+}
+.icon-pelican:before {
+  content: "\e94b";
+}
+.icon-pencil:before {
+  content: "\e94c";
+}
+.icon-pie:before {
+  content: "\e94d";
+}
+.icon-play:before {
+  content: "\e94e";
+}
+.icon-plus:before {
+  content: "\e94f";
+}
+.icon-question-mark:before {
+  content: "\e950";
+}
+.icon-random:before {
+  content: "\e951";
+}
+.icon-refresh:before {
+  content: "\e952";
+}
+.icon-refund-alt:before {
+  content: "\e953";
+}
+.icon-refund:before {
+  content: "\e954";
+}
+.icon-search:before {
+  content: "\e955";
+}
+.icon-seven-eleven:before {
+  content: "\e956";
+}
+.icon-shipping:before {
+  content: "\e957";
+}
+.icon-sign-out:before {
+  content: "\e958";
+}
+.icon-site-map:before {
+  content: "\e959";
+}
+.icon-smilepay:before {
+  content: "\e95a";
+}
+.icon-sms:before {
+  content: "\e95b";
+}
+.icon-star-alt:before {
+  content: "\e95c";
+}
+.icon-star:before {
+  content: "\e95d";
+}
+.icon-sticky-alt:before {
+  content: "\e95e";
+}
+.icon-sticky:before {
+  content: "\e95f";
+}
+.icon-super-landing-alt:before {
+  content: "\e960";
+}
+.icon-super-landing:before {
+  content: "\e961";
+}
+.icon-tachometer:before {
+  content: "\e962";
+}
+.icon-tag:before {
+  content: "\e963";
+}
+.icon-tasks:before {
+  content: "\e964";
+}
+.icon-text-cog:before {
+  content: "\e965";
+}
+.icon-trash:before {
+  content: "\e966";
+}
+.icon-upload:before {
+  content: "\e967";
+}
+.icon-user-alt:before {
+  content: "\e968";
+}
+.icon-user:before {
+  content: "\e969";
+}
+.icon-users-alt:before {
+  content: "\e96a";
+}
+.icon-users:before {
+  content: "\e96b";
+}
+.icon-window-maximize:before {
+  content: "\e96c";
+}
+.icon-youtube:before {
+  content: "\e96d";
+}
+.icon-flag:before {
+  content: "\e96f";
+}
+.icon-rocket:before {
+  content: "\e96e";
+}
+.icon-store:before {
+  content: "\e970";
+}
+.icon-calendar:before {
+  content: "\e971";
+}
+.icon-minus:before {
+  content: "\e972";
+}