active_s95 1.0.0

data/app/assets/stylesheets/arctic_admin/layouts/_sidebar.scss

@@ -0,0 +1,150 @@
+.header #tabs {
+  width: $header-width;
+  height: calc(100% - 60px);
+  position: fixed;
+  top: 50px;
+  background-color: $sidebar-background;
+  border-right: 1px solid $sidebar-border-color;
+  z-index: 1000;
+  overflow: auto;
+  left: - $header-width;
+  transition: transform 0.3s ease-in-out;
+  @include momentum-scroll;
+
+  // Backdrop overlay when open
+  @include backdrop-overlay(999);
+
+  &.tabs_open {
+    transform: translateX($header-width);
+  }
+
+  @media screen and (min-width: $sm-width) {
+    top: 60px;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    left: 0px !important;
+    transform: none !important;
+
+    &::before {
+      display: none !important;
+    }
+  }
+
+  @media screen and (min-width: $x-lg-width) {
+    width: $lg-header-width;
+  }
+
+  li {
+    width: 100%;
+    font-size: $font-size;
+    line-height: 42px;
+    cursor: pointer;
+    margin: 4px 0;
+
+    a {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      color: $text-color;
+      padding: 0 20px;
+      transition: all 0.3s ease;
+      font-weight: 500;
+      @include no-tap-highlight;
+      min-height: 44px;
+      display: flex;
+      align-items: center;
+
+      @media screen and (max-width: $sm-width) {
+        min-height: 48px;
+        padding: 0 24px;
+        font-size: 15px;
+      }
+
+      &:hover {
+        background-color: $sidebar-item-hover-background;
+        padding-left: 28px;
+        color: $indigo;
+
+        @media screen and (max-width: $sm-width) {
+          padding-left: 32px;
+        }
+      }
+    }
+
+    &.current {
+      a {
+        color: $indigo;
+        background-color: $sidebar-active-background;
+        border-radius: 0 25px 25px 0;
+        font-weight: 700;
+        border-left: 4px solid $indigo;
+        padding-left: 16px;
+      }
+    }
+
+    &.has_nested {
+      &>a:nth-child(1) {
+        position: relative;
+
+        &:after {
+          @include icon($icon-down);
+          display: inline;
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          @include transform(translateY(-50%));
+          color: $text-color;
+        }
+      }
+
+      ul {
+        border-top: 1px solid $sidebar-border-color;
+        border-bottom: 1px solid $sidebar-border-color;
+        background-color: $body-background;
+        padding: 10px 0;
+        cursor: auto;
+        display: none;
+
+        a {
+          padding: 0px 15px 0px 35px;
+          color: $text-color;
+
+          &:hover {
+            background-color: $sidebar-nested-item-hover-background;
+            padding-left: 40px;
+          }
+
+          @media screen and (min-width: $x-lg-width) {
+            padding: 0px 15px 0px 40px;
+
+            &:hover {
+              padding-left: 45px;
+            }
+          }
+        }
+
+        .current a {
+          color: $indigo;
+          font-weight: 700;
+          background-color: rgba($indigo, 0.05);
+        }
+      }
+
+      &.open,
+      &.current {
+        &>a:nth-child(1) {
+          position: relative;
+
+          &:after {
+            @include icon($icon-up);
+          }
+        }
+
+        &>ul {
+          display: block;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/arctic_admin/layouts/_wrapper.scss

@@ -0,0 +1,8 @@
+#wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .flashes {
+    order: -1;
+  }
+}

data/app/assets/stylesheets/arctic_admin/mixins/_buttons_mixins.scss

@@ -0,0 +1,142 @@
+$bg-tertiary-button: transparent;
+$bg-tertiary-button-hover: rgba($border-color, .3);;
+
+@mixin button() {
+  border-radius: $border-radius;
+  display: inline-block;
+  @include transition-button();
+  cursor: pointer;
+
+  &:active, &:focus {
+    outline: 0;
+  }
+
+  &.disabled, &:disabled {
+    opacity: 0.6;
+    cursor: no-drop;
+  }
+}
+
+@mixin primary-button($background-color, $color) {
+  background-color: $background-color;
+  color: $color;
+  border: none; 
+  @include button();
+
+  &:hover {
+    background-color: lighten($background-color, 10%);
+  }
+
+  &:active, &:focus {
+    background-color: darken($background-color, 10%); 
+  }
+
+  &:disabled {
+    background-color: $background-color;
+  }
+}
+
+@mixin secondary-button($color) {
+  background-color: #fff;
+  color: $color;
+  border: 1px solid $color;
+  padding: 4px 8px;
+  @include button();
+
+  &:hover {
+    color: #fff;
+    background-color: $color;
+  }
+
+  &:active, &:focus {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+}
+
+@mixin tertiary-button($color) {
+  background-color: $bg-tertiary-button;
+  color: $color;
+  border: 1px solid $bg-tertiary-button;
+  padding: 4px 8px;
+  @include button();
+
+  &:hover {
+    color: $color;
+    background-color: $bg-tertiary-button-hover;
+  }
+
+  &:active, &:focus {
+    background-color: $bg-tertiary-button-hover;
+    color: $color;
+  }
+}
+
+@mixin secondary-dropdown($color) {
+  @include secondary-button($color);
+  padding: 6px 25px 6px 10px;
+  position: relative;
+
+  &:after {
+    @include icon($icon-sort-down);
+    position: absolute;
+    right: 8px;
+  }
+
+  &:active, &:focus {
+    background-color: darken($color, 10%); 
+    color: #fff;
+  }
+
+  &.disabled, &:disabled {
+    color: $grey;
+    background-color: #f3f7f9;
+    border-color: #f3f7f9;
+    @include box-shadow(none);
+    opacity: .65;
+  }
+}
+
+@mixin group-button($color) {
+  a {
+    display: inline-block;
+    color: $color;
+    border-top: 1px solid $color;
+    border-bottom: 1px solid $color;
+    float: left;
+    padding: 6px 10px;
+    border-right: 1px solid $color;
+    @include transition-button();
+  }
+
+  &:first-child a {
+    border-left: 1px solid $color;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child a {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &:hover {
+    a {
+      background-color: lighten($color, 10%);
+      border-color: lighten($color, 10%);
+      color: #fff;
+    }
+  }
+
+  &:active, &:focus, &.selected {
+    a {
+      background-color: darken($color, 10%);
+      border-color: darken($color, 10%);
+      color: #fff;
+    }
+  }
+}
+
+@mixin little-button() {
+  padding: 6px 12px;
+}

data/app/assets/stylesheets/arctic_admin/mixins/_forms.scss

@@ -0,0 +1,9 @@
+@mixin input-valid() {
+  border-color: $success;
+  background-color: rgba($success, .1);
+}
+
+@mixin input-invalid() {
+  border-color: $error;
+  background-color: rgba($error, .1);
+}

data/app/assets/stylesheets/arctic_admin/mixins/_mixins.scss

@@ -0,0 +1,4 @@
+@import "prefix_mixins";
+@import "buttons_mixins";
+@import "sidebar_mixins";
+@import "forms";

data/app/assets/stylesheets/arctic_admin/mixins/_prefix_mixins.scss

@@ -0,0 +1,63 @@
+@mixin transform($var) {
+  -webkit-transform: $var;
+     -moz-transform: $var;
+      -ms-transform: $var;
+       -o-transform: $var;
+          transform: $var;
+}
+
+@mixin appearance($effect:none) {
+  -webkit-appearance: $effect;
+     -moz-appearance: $effect;
+      -ms-appearance: $effect;
+       -o-appearance: $effect;
+          appearance: $effect;
+}
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin transition-button() {
+  @include transition(border .15s linear,color .15s linear,width .15s linear,background-color .15s linear);
+}
+
+@mixin box-shadow($args...) {
+  -webkit-box-shadow: $args;
+  -moz-box-shadow: $args;
+  box-shadow: $args;
+}
+
+@mixin disable-user-select() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin clear-fix() {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+@mixin outline() {
+  &:focus {
+    outline: 0;
+  }
+}
+
+@mixin icon($code-icon) {
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font: 900 normal normal 14px/1 $font-icon;
+  content: $code-icon;
+}

data/app/assets/stylesheets/arctic_admin/mixins/_sidebar_mixins.scss

@@ -0,0 +1,24 @@
+@mixin sidebar-container() {
+  #active_admin_content.with_sidebar {
+    #main_content_wrapper {
+      width: $screen-filter-width;
+
+      @media screen and (min-width: $sm-width) {
+        padding-right: 10px;
+      }
+
+      @media screen and (min-width: $lg-width) {
+        padding-right: 0;
+        width: $lg-screen-filter-width;
+      }
+    }
+
+    #sidebar {
+      display: inline-block;
+
+      tr:hover {
+        background: rgba(243, 247, 249, 0.3);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/arctic_admin/pages/_form.scss

@@ -0,0 +1,124 @@
+@mixin s95-admin-form() {
+  @include sidebar-container();
+  
+  form legend {
+    font-weight: normal;
+  }
+  
+  fieldset.inputs {
+    margin-bottom: 20px;
+  }
+  
+  .input {
+    .label {
+      padding-bottom: 5px;
+      text-align: left;
+      margin: auto 0;
+      padding-top: 8px;
+      text-align: right;
+      font-size: $font-size;
+  
+      @media screen and (min-width: $sm-width) {
+        padding-bottom: 0;
+        height: 25px;
+        width: $form-margin-left;
+        float: left;
+        padding-right: 20px;
+      }
+    }
+    input, textarea {
+      @media screen and (min-width: $sm-width) {
+        width: $form-input-width;
+      }
+  
+      &[type='radio'] {
+        width: 15px;
+        float: left;
+        margin-top: 3px;
+      }
+  
+      &[type='checkbox'] {
+        width: 15px;
+        margin: 0 5px -2px 0;
+      }
+    }
+  
+    .select2-container {
+      @media screen and (min-width: $sm-width) {
+        width: $form-input-width !important;
+      }
+  
+      a {
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  
+    select {
+      min-width: $form-input-width;
+      height: 30px;
+    }
+  
+    select[multiple] {
+      height: 100px;
+    }
+  
+    .fragment {
+      margin-right: 10px;
+  
+      label {
+        padding-right: 5px;
+      }
+  
+      select {
+        min-width: auto;
+      }
+    }
+  
+    &.boolean {
+      margin-left: $form-margin-left;
+      @include disable-user-select();
+  
+      input {
+        width: auto;
+      }
+  
+      label {
+        font-size: $font-size;
+        cursor: pointer;
+        padding: 5px 5px 5px 0;
+      }
+  
+      input[type='checkbox'] {
+        width: 15px;
+        margin: 0 5px -2px 0;
+      }
+    }
+  
+    li.fragment {
+      display: inline;
+    }
+  
+    li.choice {
+      margin-left: $form-margin-left;
+      
+      .field_with_errors {
+        float: left;
+      }
+    }
+  
+    .inline-errors {
+      padding-left: $form-margin-left;
+    }
+  }
+  
+  .actions {
+    padding-left: $form-margin-left;
+  }
+}
+
+body.logged_in {
+  &.new, &.edit, &.create, &.update {
+    @include s95-admin-form();
+  }
+}