vbax-admin_syst 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d81a5c395ddec0a16561001ea969cb37ec3af7a4d10f61cfcfab78d064392ebb
-  data.tar.gz: 349769abad5d1fe9301b7bb83262c654b73e82a18da0740f77a16a23db4a27eb
+  metadata.gz: fbc34fd6265b8805b68b0705d17f1926a64ad9715bc6a0bc9310921540e97ff9
+  data.tar.gz: 322de85f349dd4197b5ea78e2ec8f38ba8b7c6b4d9f4bfa617f8909bae056438
 SHA512:
-  metadata.gz: 2048cf303a25dad55122dcf5cf36fb12b8007244391617c68af23cf45863000cfe4bc7783dac2dc729f2b1b820f0d5812914ffcafa5d72a55f98f21dbbd05a3f
-  data.tar.gz: 9d4acac97d21fc2a85c356f3e0a153d1092dd89be31425cca8efdc61ef54f77c277011a4458c567ef626928540a8ba10eacbca31ab76d217c0b4665c9fe68b34
+  metadata.gz: 74e1c0f0e14fbbd31ed937561490e99f3cb1850c0612474992718dd7ef1b1b2292753f2d59f819a3f31f4120fce2241c5fd930c0dda3ec7ac444c3a24462305f
+  data.tar.gz: 22c8639a2df7a685494ad81be1937ceeb393307d8f467691256294fb155da446bb2335d6e06f071c1b3e64bb9f9458cab3faf9ca654ba20af8b8f09d5dd30ddd

data/lib/vbax/admin_syst/engine.rb

@@ -0,0 +1,14 @@
+module Vbax
+  module AdminSyst
+    class Engine < ::Rails::Engine
+    initializer 'admin_syst.sass' do |app|
+      # Set the sass load paths
+      app.config.sass.load_paths << File.join(config.root, "lib","vbax", "sass")
+
+      # Set the add becky_thatcher/lib/sass to assets path
+      app.config.assets.paths << File.join(config.root, "lib","vbax", "sass")
+    end
+
+  end
+  end
+end

data/lib/vbax/admin_syst/version.rb

@@ -1,5 +1,5 @@
 module Vbax
   module AdminSyst
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/lib/vbax/sass/admin_syst.scss

@@ -0,0 +1,26 @@
+@import "becky_thatcher";
+@import "library/clearfix";
+@import "library/data-label";
+@import "library/variables";
+@import "base/newcolor";
+@import "base/forms";
+@import "base/layout";
+@import "base/lists";
+@import "base/tables";
+@import "base/typography";
+
+@import "components/app-container";
+@import "components/attributes";
+@import "components/buttons";
+@import "components/cells";
+@import "components/field-unit";
+@import "components/flashes";
+@import "components/form-actions";
+@import "components/main-content";
+@import "components/navigation";
+@import "components/pagination";
+@import "components/search";
+
+@import "reset/normalize";
+
+@import "custom/index";

data/lib/vbax/sass/base/_forms.scss

@@ -0,0 +1,107 @@
+fieldset {
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  font-weight: $bold-font-weight;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  display: block;
+  font-weight: $light-font-weight;
+  margin: 0;
+}
+
+input,
+select {
+  display: block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+}
+
+input,
+select,
+textarea {
+  display: block;
+  font-family: $base-font-family;
+  font-size: 16px;
+}
+
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+input:not([type]),
+textarea {
+  appearance: none;
+  background-color: $white;
+  border: $base-border;
+  border-radius: $base-border-radius;
+  padding: 0.5em;
+  transition: border-color $base-duration $base-timing;
+  width: 100%;
+
+  &:hover {
+    border-color: mix($black, $base-border-color, 20%);
+  }
+
+  &:focus {
+    border-color: $action-color-focus;
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: mix($black, $white, 5%);
+    cursor: not-allowed;
+
+    &:hover {
+      border: $base-border;
+    }
+  }
+
+  &::placeholder {
+    font-style: italic;
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline;
+  margin-right: $small-spacing / 2;
+}
+
+[type="file"] {
+  width: 100%;
+}
+
+select {
+  width: 100%;
+}
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}

data/lib/vbax/sass/base/_layout.scss

@@ -0,0 +1,20 @@
+html {
+  background-color: $base-background-color;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

data/lib/vbax/sass/base/_lists.scss

@@ -0,0 +1,19 @@
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin-bottom: $small-spacing;
+
+  dt {
+    font-weight: $bold-font-weight;
+    margin-top: $small-spacing;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

data/lib/vbax/sass/base/_newcolor.scss

@@ -0,0 +1 @@
+$action-color-focus: rgba(118,118,212,0.5)!important;

data/lib/vbax/sass/base/_tables.scss

@@ -0,0 +1,55 @@
+table {
+  border-collapse: collapse;
+  font-size: 0.7em;
+  text-align: left;
+  width: 100%;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+thead {
+  font-weight: $bold-font-weight;
+}
+
+tr {
+  border-bottom: $base-border;
+}
+
+tbody tr {
+  &:hover {
+    background-color: $base-background-color;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: -($focus-outline-width);
+  }
+}
+
+td,
+th {
+  font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures, contextual;
+  font-variant-numeric: lining-nums, tabular-nums;
+  padding: 0.55rem;
+  vertical-align: middle;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 2rem;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 2rem;
+}
+
+td img {
+  max-height: 2rem;
+}

data/lib/vbax/sass/base/_typography.scss

@@ -0,0 +1,45 @@
+body {
+  color: $base-font-color;
+  // font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
+  margin: 0;
+}
+
+p {
+  margin: 0 0 $small-spacing;
+}
+
+a {
+  color: $action-color;
+  text-decoration-skip-ink: auto;
+  transition: color $base-duration $base-timing;
+
+  &:hover {
+    color: mix($black, $action-color, 25%);
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}

data/lib/vbax/sass/components/_app-container.scss

@@ -0,0 +1,12 @@
+.app-container {
+  // align-items: stretch;
+  // display: flex;
+  // margin-left: auto;
+  // margin-right: auto;
+  // max-width: 100rem;
+  min-height: 100vh;
+  padding: $base-spacing-panel;
+  @include media-breakpoint-down(lg) {
+    padding: 0px;
+  }
+}

data/lib/vbax/sass/components/_attributes.scss

@@ -0,0 +1,26 @@
+.attribute-label {
+  @include data-label;
+  clear: left;
+  float: left;
+  margin-bottom: $base-spacing;
+  margin-top: 0;
+  text-align: right;
+  width: calc(15% - 1rem);
+}
+
+.preserve-whitespace {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.attribute-data {
+  float: left;
+  margin-bottom: $base-spacing;
+  margin-left: 2rem;
+  width: calc(85% - 1rem);
+}
+
+.attribute--nested {
+  border: $base-border;
+  padding: $small-spacing;
+}

data/lib/vbax/sass/components/_buttons.scss

@@ -0,0 +1,51 @@
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.button {
+  appearance: none;
+  background-color: $action-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: $white;
+  cursor: pointer;
+  display: inline-block;
+  // font-family: $base-font-family;
+  // font-size: $base-font-size;
+  -webkit-font-smoothing: antialiased;
+  font-weight: $light-font-weight;
+  line-height: 1;
+  padding: $small-spacing $base-spacing;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition: all .25s ease-in-out;
+  &.btn-xxl{
+    padding: 0.75em 80px 0.75em 1.5em;;
+  }
+
+  &:hover {
+    // background-color: mix($black, $action-color, 20%);
+    color: $white;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
+    &.close-admin{
+      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
+    }
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: $action-color;
+    }
+  }
+}

data/lib/vbax/sass/components/_cells.scss

@@ -0,0 +1,45 @@
+.cell-label {
+  &:hover {
+    a {
+      color: $action-color;
+    }
+
+    svg {
+      fill: $action-color;
+      transform: rotate(180deg);
+    }
+  }
+
+  a {
+    color: inherit;
+    display: inline-block;
+    transition: color $base-duration $base-timing;
+    width: 100%;
+  }
+}
+
+.cell-label--asc,
+.cell-label--desc {
+  font-weight: $bold-font-weight;
+}
+
+.cell-label__sort-indicator {
+  float: right;
+  margin-left: 5px;
+
+  svg {
+    fill: $hint-grey;
+    height: 13px;
+    transition: transform $base-duration $base-timing;
+    width: 13px;
+  }
+}
+
+.cell-label__sort-indicator--desc {
+  transform: rotate(180deg);
+}
+
+.cell-data--number,
+.cell-label--number {
+  text-align: right;
+}

data/lib/vbax/sass/components/_field-unit.scss

@@ -0,0 +1,36 @@
+.field-unit {
+  @include administrate-clearfix;
+  align-items: center;
+  display: flex;
+  margin-bottom: $base-spacing;
+  position: relative;
+  width: 100%;
+}
+
+.field-unit__label {
+  float: left;
+  margin-left: 1rem;
+  text-align: right;
+  width: calc(15% - 1rem);
+}
+
+.field-unit__field {
+  float: left;
+  margin-left: 2rem;
+  width: 45%;
+}
+
+.field-unit--nested {
+  border: $base-border;
+  margin-left: 7.5%;
+  padding: $small-spacing;
+  width: 50%;
+
+  .field-unit__field {
+    width: calc(75% - 1rem);
+  }
+
+  .field-unit__label {
+    width: calc(25% - 1rem);
+  }
+}

data/lib/vbax/sass/components/_form-actions.scss

@@ -0,0 +1,3 @@
+.form-actions {
+  margin-left: calc(15% + 2rem);
+}

data/lib/vbax/sass/components/_main-content.scss

@@ -0,0 +1,29 @@
+.main-content {
+  background-color: $white;
+  border-radius: $base-border-radius;
+  box-shadow: 0 0 6px 0 rgba($black, 0.12),
+              0 2px 2px rgba($black, 0.2);
+  flex: 1 1 100%;
+  padding-bottom: 10vh;
+}
+
+.main-content__header,
+.main-content__body {
+  padding: 1rem 2rem;
+}
+
+.main-content__body--flush {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.main-content__header {
+  align-items: center;
+  border-bottom: $base-border;
+  display: flex;
+}
+
+.main-content__page-title {
+  font-size: 1.6em;
+  margin-right: auto;
+}

data/lib/vbax/sass/components/_navigation.scss

@@ -0,0 +1,34 @@
+$_navigation-link-padding: 0.6em;
+
+.navigation {
+  flex: 1 0 10rem;
+  padding-bottom: $base-spacing;
+  padding-right: calc(#{$base-spacing} - #{$_navigation-link-padding});
+  padding-top: $base-spacing;
+}
+
+.navigation__link {
+  background-color: transparent;
+  color: $base-font-color;
+  display: block;
+  line-height: 1;
+  margin-left: -($_navigation-link-padding);
+  padding: $_navigation-link-padding;
+  transition: background-color $base-duration $base-timing,
+              color $base-duration $base-timing;
+
+  &:not(:last-of-type) {
+    margin-bottom: $small-spacing;
+  }
+
+  &:hover {
+    // background-color: mix($black, $base-background-color, 0%);
+    // border-radius: $base-border-radius;
+    border: #fff solid 1px;
+    color: $base-font-color;
+  }
+}
+
+.navigation__link--active {
+  font-weight: $bold-font-weight;
+}

data/lib/vbax/sass/components/_pagination.scss

@@ -0,0 +1,18 @@
+.pagination {
+  margin-top: $base-spacing;
+  padding-left: $base-spacing;
+  padding-right: $base-spacing;
+  text-align: center;
+
+  .first,
+  .prev,
+  .page,
+  .next,
+  .last {
+    margin: $small-spacing;
+  }
+
+  .current {
+    font-weight: $light-font-weight;
+  }
+}

data/lib/vbax/sass/components/_search.scss

@@ -0,0 +1,46 @@
+$_search-icon-size: 1rem;
+
+.search {
+  margin-left: auto;
+  margin-right: 2rem;
+  max-width: 20rem;
+  position: relative;
+  width: 100%;
+}
+
+.search__input {
+  border-radius: 100rem;
+  padding-left: $_search-icon-size * 2.5;
+  padding-right: $_search-icon-size * 2.5;
+}
+
+.search__eyeglass-icon {
+  fill: $grey-7;
+  height: $_search-icon-size;
+  left: $_search-icon-size;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: $_search-icon-size;
+}
+
+.search__clear-link {
+  height: $_search-icon-size;
+  position: absolute;
+  right: $_search-icon-size * 0.75;
+  top: 50%;
+  transform: translateY(-50%);
+  width: $_search-icon-size;
+}
+
+.search__clear-icon {
+  fill: $grey-5;
+  height: $_search-icon-size;
+  position: absolute;
+  transition: fill $base-duration $base-timing;
+  width: $_search-icon-size;
+
+  &:hover {
+    fill: $action-color;
+  }
+}