rails_design 0.0.1

data/app/assets/stylesheets/ext_bulma/elements/_title.scss

@@ -0,0 +1,9 @@
+.title-edit {
+  font-size: 1rem;
+  font-weight: normal;
+  color: $grey-light;
+}
+
+.title-edit:hover {
+  color: $grey;
+}

data/app/assets/stylesheets/ext_bulma/expand/_all.scss

@@ -0,0 +1,2 @@
+@import 'slide';
+@import 'sortable';

data/app/assets/stylesheets/ext_bulma/expand/_slide.scss

@@ -0,0 +1,26 @@
+.slide {
+  --height: 430px;
+  position: relative;
+  height: calc(var(--height) + 30px);
+  //margin-bottom: 27px;
+
+  figure {
+    position: absolute;
+    width: 100%;
+    height: var(--height);
+    text-align: center;
+  }
+}
+
+.slide-y {
+  position: relative;
+  height: 100vh;
+
+  figure {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    background: black;
+  }
+}

data/app/assets/stylesheets/ext_bulma/expand/_sortable.scss

@@ -0,0 +1,4 @@
+.sortable-ghost {
+  opacity: .2;
+  background-color: red !important;
+}

data/app/assets/stylesheets/ext_bulma/form/_all.scss

@@ -0,0 +1,34 @@
+@charset "utf-8";
+
+@import 'file';
+@import 'select';
+@import 'tools';
+@import 'checkbox';
+
+form.button_to {
+  display: inline;
+  button:not(.button),
+  input[type="submit"] {
+    border: none;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+  }
+  button:not(.button):focus,
+  input[type="submit"]:focus {
+    outline: none;
+  }
+}
+
+form.button_box {
+  display: inline-block;
+  width: 100%;
+  height: 30px;
+  button:not(.button) {
+    text-align: left;
+    border: solid 1px transparent;
+    box-shadow: inset 1px 1px 2px dimgrey;
+    width: 100%;
+    height: 100%;
+  }
+}

data/app/assets/stylesheets/ext_bulma/form/_checkbox.scss

@@ -0,0 +1,267 @@
+$switch-background: $grey-light !default;
+$switch-border: .1rem solid transparent !default;
+$switch-background-active: $primary !default;
+$switch-radius: $radius !default;
+$switch-paddle-background: $white !default;
+$switch-paddle-background-active: $primary !default;
+$switch-paddle-offset: 0.25rem !default;
+$switch-paddle-transition: all 0.25s ease-out !default;
+$switch-focus: 1px dotted $grey-light !default;
+
+@mixin switch-size($size) {
+  $switch-height: $size * 1.5;
+  $switch-width: $switch-height * 2;
+  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);
+  + label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: $size;
+    height: $control-height;
+    line-height: $control-line-height;
+    padding-left: $switch-width + .5;
+    padding-top: .2rem;
+    cursor: pointer;
+
+    &::before,
+    &:before {
+      position: absolute;
+      display: block;
+      top: calc( 50% - #{$switch-height} / 2 );
+      left: 0;
+      width: $switch-width;
+      height: $switch-height;
+      border: $switch-border;
+      border-radius: $switch-radius;
+      background: $switch-background;
+      content: '';
+    }
+
+    &::after,
+    &:after { display: block;
+      position: absolute;
+      top: calc( 50% - #{$paddle-height} / 2 );
+      left: $switch-paddle-offset;
+      width: $paddle-width;
+      height: $paddle-height;
+      transform: translate3d(0, 0, 0);
+      border-radius: $switch-radius;
+      background: $switch-paddle-background;
+      transition: $switch-paddle-transition;content: '';
+    }
+  }
+
+  &.is-rtl {
+    + label {
+      padding-left: 0;
+      padding-right: $switch-width + .5;
+      &::before,
+      &:before {
+        left: auto;
+        right: 0;
+      }
+      &::after,
+      &:after {
+        left: auto;
+        right: $paddle-active-offest;
+      }
+    }
+  }
+
+  &:checked {
+    + label {
+      &::before,
+      &:before {
+        background: $switch-background-active;
+      }
+      &::after {
+        left: $paddle-active-offest;
+      }
+    }
+
+    &.is-rtl {
+      + label {
+        &::after,
+        &:after {
+          left: auto;
+          right: $switch-paddle-offset;
+        }
+      }
+    }
+  }
+
+  &.is-outlined {
+    + label {
+      &::before,
+      &:before {
+        background-color: transparent;
+        border-color: $switch-background;
+      }
+
+      &::after,
+      &:after {
+        background: $switch-background;
+      }
+    }
+
+    &:checked {
+      + label {
+        &::before,
+        &:before {
+          background-color: transparent;
+          border-color: $switch-background-active;
+        }
+        &::after,
+        &:after {
+          background: $switch-paddle-background-active;
+        }
+      }
+    }
+  }
+
+  &.is-thin {
+    + label {
+      &::before,
+      &:before {
+        top: divide($switch-height, 2.75);
+        height: divide($switch-height, 4);
+      }
+      &::after,
+      &:after {
+        box-shadow: 0 0 3px $grey;
+      }
+    }
+  }
+
+  &.is-rounded {
+    + label {
+      &::before,
+      &:before {
+        border-radius: $radius-large * 4;
+      }
+      &::after,
+      &:after {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.switch[type="checkbox"] {
+  outline: 0;
+  user-select: none;
+  display: inline-block;
+  position: absolute;
+  opacity: 0;
+  &:focus {
+    + label {
+      &::before,
+      &:before,
+      &::after,
+      &:after {
+        outline: $switch-focus;
+      }
+    }
+  }
+  &[disabled] {
+    cursor: not-allowed;
+    + label {
+      opacity: 0.5;
+      &::before,
+      &:before {
+        opacity: 0.5;
+      }
+      &::after,
+      &:after {
+        opacity: 0.5;
+      }
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include switch-size($size-normal);
+  &.is-small {
+    @include switch-size($size-small);
+  }
+  &.is-medium {
+    @include switch-size($size-medium);
+  }
+  &.is-large {
+    @include switch-size($size-large);
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      &:checked {
+        + label {
+          &::before,
+          &:before {
+            background: $color;
+          }
+        }
+      }
+      &.is-outlined {
+        &:checked {
+          + label {
+            &::before,
+            &:before {
+              background-color: transparent;
+              border-color: $color !important;
+            }
+            &::after,
+            &:after {
+              background: $color;
+            }
+          }
+        }
+      }
+      &.is-thin {
+        &.is-outlined {
+          + label {
+            &::after,
+            &:after {
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    &.is-unchecked-#{$name} {
+      + label {
+        &::before,
+        &:before {
+          background: $color;
+        }
+      }
+
+      &.is-outlined {
+        + label {
+          &::before,
+          &:before {
+            background-color: transparent;
+            border-color: $color !important;
+          }
+          &::after,
+          &:after {
+            background: $color;
+          }
+        }
+      }
+    }
+  }
+}
+
+.field-body {
+  .switch[type="checkbox"] {
+    + label {
+      margin-top: .375em;
+    }
+  }
+}

data/app/assets/stylesheets/ext_bulma/form/_file.scss

@@ -0,0 +1,23 @@
+input[type=file] {
+  border: none;
+  padding-left: 5px;
+  box-shadow: none;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  height: 100%;
+  background: lightgray;
+  border: none;
+}
+
+.file-label {
+  height: 100%;
+}
+
+.file.is-boxed .file-cta {
+  height: 100%;
+}
+
+.file-name {
+  text-align: center;
+}

data/app/assets/stylesheets/ext_bulma/form/_select.scss

@@ -0,0 +1,5 @@
+.select {
+  select {
+    display: inline-flex;
+  }
+}

data/app/assets/stylesheets/ext_bulma/form/_tools.scss

@@ -0,0 +1,30 @@
+.field {
+  &.has-addons {
+    a {
+      margin-right: .75rem;
+    }
+    &.has-addons-middle {
+      align-items: center;
+    }
+  }
+
+  .is-flex {
+    align-items: center;
+    justify-content: space-around;
+  }
+}
+
+.checkbox + .checkbox {
+  margin-left: .5em;
+}
+
+.radio + .radio.is-block {
+  margin-left: 0;
+}
+
+.checkbox,
+.radio {
+  input + span, label {
+    padding-left: .25em;
+  }
+}

data/app/assets/stylesheets/ext_bulma/grid/_all.scss

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+@import 'columns';

data/app/assets/stylesheets/ext_bulma/grid/_columns.scss

@@ -0,0 +1,13 @@
+main.columns {
+  margin: 0;
+}
+
+main.columns:not(:last-child) {
+  margin-bottom: 0;
+}
+
+main.columns.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}

data/app/assets/stylesheets/ext_bulma/helpers/_all.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import 'dot';
+@import 'drawable';
+@import 'grid';

data/app/assets/stylesheets/ext_bulma/helpers/_dot.scss

@@ -0,0 +1,11 @@
+.has-dot-success:before {
+  content: '•';
+  color: #48c78e;
+  padding-right: 5px;
+}
+
+.has-dot-danger:before {
+  content: '•';
+  color: #f14668;
+  padding-right: 5px;
+}