beyond-rails 1.0.3 → 1.0.4

data/src/sass/_main.scss

@@ -1,176 +1,56 @@
-html {
-  height: 100%;
-}
-body {
-  box-sizing: border-box;
-  font-family: 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei',
-    'Helvetica Neue', Helvetica, Verdana, 'Open Sans', sans-serif;
-  font-size: 16px;
-
-  .content {
-    flex: 1;
-  }
-  &.with-footer {
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-:focus {
-  outline: 3px solid $bg-outline;
-  outline-offset: 2px;
-}
-
-// for ie11
-body:focus {
-  outline: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-p {
-  line-height: 2.1em;
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-small {
-  font-size: 70%;
-}
-blockquote {
-  margin: 0 0 1rem;
-}
-
-th, td {
-  padding: 7px;
-}
-
-hr {
-  margin-top: 0.8rem;
-  margin-bottom: 0.8rem;
-  border: 0;
-  border-top: 1px solid rgba(0, 0, 0, .1);
-}
-
-a {
-  cursor: pointer;
-  color: $color-anchor;
-  text-decoration: none;
-  &:hover {
-    color: $color-anchor-ex;
-  }
-}
-
-// active style
-$color-active: #5469d4;
-
-.select,
-.select.select-outline,
-.select.select-outline-strong,
-.btn.btn-dropdown,
-.search-input,
-.input {
-  &.active {
-    color: $color-active;
-    box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
-      rgba(14, 48, 173, .3) 0 0 0 1px,
-      rgba(14, 26, 62, .12) 0 2px 5px 0;
-  }
-}
-.search-input.active .input,
-.search-input.active .icon-search:before {
-  color: $color-active;
-}
-
-.input,
-.select,
-.select.select-outline,
-.select.select-outline-strong {
-  &:focus.active {
-    color: $color-active;
-    box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
-      rgba(14, 48, 173, .3) 0 0 0 1px,
-      rgba(14, 26, 62, .12) 0 2px 5px 0,
-      0 0 0 4px rgba(58, 151, 212, .28);
-  }
-}
-.search-input.active.outline {
-  color: $color-active;
-  box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
-    rgba(14, 48, 173, .3) 0 0 0 1px,
-    rgba(14, 26, 62, .12) 0 2px 5px 0,
-    0 0 0 4px rgba(58, 151, 212, .28);
-}
-
-.scrollable {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-
-.align-left {
-  text-align: left !important;
-}
-.align-right {
-  text-align: right !important;
-}
-.align-center {
-  text-align: center !important;
-}
-
-.float-left {
-  float: left !important;
-}
-.float-right {
-  float: right !important;
-}
-.float-none {
-  float: none !important;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
-}
-
-.full-width {
-  width: 100% !important;
-}
-
-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e3e8ee;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-}
-
-input[type=file], /* FF, IE7+, chrome (except button) */
-input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
-  cursor: pointer;
-}
-
-.nowrap {
-  white-space: nowrap !important;
-}
+@import './abstracts/_post-variables';
+@import './abstracts/_placeholders';
+@import './abstracts/_mixins';
+@import './vendor/_normalize';
+@import './vendor/_turbolink';
+@import './base/_background';
+@import './base/_typography';
+@import './_animations';
+@import './_base';
+@import './layout/_border-util';
+@import './layout/_col';
+@import './layout/_container';
+@import './layout/_offset-util';
+@import './layout/_sizing-util';
+@import './layout/_spacing-util';
+@import './layout/_visibility-util';
+@import './layout/_flex-util';
+@import './components/_alert';
+@import './components/_autocomplete';
+@import './components/_avatar';
+@import './components/_badge';
+@import './components/_breadcrumb';
+@import './components/_btn';
+@import './components/_btn-group';
+@import './components/_card';
+@import './components/_checkbox';
+@import './components/_date-input';
+@import './components/_date-menu';
+@import './components/_month-menu';
+@import './components/_date-time-ranger';
+@import './components/_datepicker';
+@import './components/_dropdown';
+@import './components/_form';
+@import './components/_icon';
+@import './components/_input';
+@import './components/_list';
+@import './components/_modal';
+@import './components/_nav';
+@import './components/_navbar';
+@import './components/_pagination';
+@import './components/_radio';
+@import './components/_search-dropdown';
+@import './components/_select';
+@import './components/_sidebar';
+@import './components/_spinner';
+@import './components/_tabbox';
+@import './components/_table';
+@import './components/_tag';
+@import './components/_tag-input';
+@import './components/_time-input';
+@import './components/_time-menu';
+@import './components/_toast';
+@import './components/_tooltip';
+@import './components/_switch';
+@import './components/_mega-menu';
+@import './components/_chart';

data/src/sass/abstracts/_mixins.scss

@@ -24,9 +24,7 @@
 
 @mixin focus-outline {
   outline: 0;
-  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
-    0 1px 1px 0 rgba(0, 0, 0, .12),
-    0 0 0 4px rgba(58, 151, 212, .28);
+  box-shadow: $focus-outline;
 }
 
 @mixin ripple($size, $left, $top) {
@@ -41,7 +39,7 @@
     display: block;
     z-index: -1;
     @include size($size);
-    background-color: #e6e9ea;
+    background-color: $ripple-bg;
     opacity: 0;
     transform: scale(.6);
   }

data/src/sass/abstracts/_placeholders.scss

@@ -1,5 +1,5 @@
 %checkbox-disabled {
-  background-color: #eee;
+  background-color: $checkbox-disabled-bg;
   cursor: not-allowed;
   input[type="checkbox"] {
     cursor: not-allowed;
@@ -13,7 +13,7 @@
 }
 
 %radio-disabled {
-  background-color: #eee;
+  background-color: $radio-disabled-bg;
   cursor: not-allowed;
   input[type="radio"] {
     cursor: not-allowed;
@@ -39,5 +39,5 @@
   width: 250px;
   font-size: 14px;
   line-height: 1.5;
-  color: #495057;
+  color: $control-color;
 }

data/src/sass/abstracts/_post-variables.scss

@@ -0,0 +1,85 @@
+$bgs:
+  ('bg-transparent', $bg-transparent),
+  ('bg-admin', $bg-admin),
+  ('bg-outline', $bg-outline),
+  ('bg-content', $bg-content),
+  ('bg-primary', $bg-primary),
+  ('bg-primary-ex', $bg-primary-ex),
+  ('bg-primary-ex2', $bg-primary-ex2),
+  ('bg-secondary', $bg-secondary),
+  ('bg-secondary-ex', $bg-secondary-ex),
+  ('bg-secondary-ex2', $bg-secondary-ex2),
+  ('bg-success', $bg-success),
+  ('bg-success-ex', $bg-success-ex),
+  ('bg-success-ex2', $bg-success-ex2),
+  ('bg-danger', $bg-danger),
+  ('bg-danger-ex', $bg-danger-ex),
+  ('bg-danger-ex2', $bg-danger-ex2),
+  ('bg-warn', $bg-warn),
+  ('bg-warning', $bg-warn),
+  ('bg-warn-ex', $bg-warn-ex),
+  ('bg-warn-ex2', $bg-warn-ex2),
+  ('bg-info', $bg-info),
+  ('bg-info-ex', $bg-info-ex),
+  ('bg-info-ex2', $bg-info-ex2),
+  ('bg-white', $bg-white),
+  ('bg-type1', $bg-type1),
+  ('bg-type1-ex', $bg-type1-ex),
+  ('bg-type1-ex2', $bg-type1-ex2),
+  ('bg-type2', $bg-type2),
+  ('bg-type2-ex', $bg-type2-ex),
+  ('bg-type2-ex2', $bg-type2-ex2),
+  ('bg-light', $bg-light),
+  ('bg-light-ex', $bg-light-ex),
+  ('bg-light-ex2', $bg-light-ex2),
+  ('bg-dark', $bg-dark),
+  ('bg-dark-ex', $bg-dark-ex),
+  ('bg-dark-ex2', $bg-dark-ex2),
+  ('bg-icon', $bg-icon),
+  ('bg-disabled', $bg-disabled);
+
+$borders:
+ ('border-primary', $border-primary),
+ ('border-secondary', $border-secondary),
+ ('border-success', $border-success),
+ ('border-danger', $border-danger),
+ ('border-warning', $border-warning),
+ ('border-info', $border-info),
+ ('border-light', $border-light),
+ ('border-dark', $border-dark),
+ ('border-white', $border-white);
+
+$txt-types:
+  $txt-type0,
+  $txt-type1,
+  $txt-type2,
+  $txt-type3,
+  $txt-type4;
+
+$tags: (
+  ('tag-primary', $bg-tag-primary),
+  ('tag-secondary', $bg-tag-secondary),
+  ('tag-success', $bg-tag-success),
+  ('tag-danger', $bg-tag-danger),
+  ('tag-warn', $bg-tag-warn),
+  ('tag-info', $bg-tag-info),
+  ('tag-dark', $bg-tag-dark),
+  ('tag-light', $bg-tag-light),
+  ('tag-type0', $bg-tag-type0),
+  ('tag-type1', $bg-tag-type1),
+  ('tag-type2', $bg-tag-type2),
+  ('tag-type3', $bg-tag-type3),
+  ('tag-type4', $bg-tag-type4)
+);
+
+$alerts:
+  $alert-primary,
+  $alert-secondary,
+  $alert-warn,
+  $alert-danger;
+
+$btns:
+  $btn-primary,
+  $btn-secondary,
+  $btn-danger,
+  $btn-warn;