visagio-arctic_admin 2.0.2

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

@@ -0,0 +1,44 @@
+#main_content_wrapper {
+  float: left;
+  width: 100%;
+
+  @include clear-fix();
+}
+
+#active_admin_content.with_sidebar #main_content_wrapper {
+  width: 100%;
+
+  @media screen and (min-width: $sm-width) {
+    #main_content {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+  }
+
+  @media screen and (min-width: $lg-width) {
+    #main_content {
+      margin-right: 20px;
+    }
+  }
+
+  @media screen and (min-width: $lg-width) {
+    #main_content {
+      margin-right: 20px;
+    }
+  }
+}
+
+#main_content {
+  background-color: #fff;
+  @include box-shadow(0 0 4px 0 rgba(0,0,0,.04));
+  padding: 15px 10px;
+
+  @media screen and (max-width: 576px) {
+    overflow-x: scroll;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    padding: 20px;
+    border-radius: $border-radius;
+  }
+}

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

@@ -0,0 +1,104 @@
+.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: 1;
+  overflow: auto;
+  left: - $header-width;
+
+  @media screen and (min-width: $sm-width) {
+    top: 60px;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    left: 0px !important;
+  }
+
+  @media screen and (min-width: $x-lg-width) {
+    width: $lg-header-width;
+  }
+
+  li {
+    width: 100%;
+    font-size: 14px;
+    line-height: 38px;
+    cursor: pointer;
+
+    a {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      color: $text-color;
+      padding: 0 20px;
+
+      &:hover {
+        background-color: $sidebar-item-hover-background;
+      }
+    }
+
+    &.current {
+      a {
+        color: $primary-color;
+      }
+    }
+
+    &.has_nested {
+      & > a:nth-child(1) {
+        position: relative;
+
+        &:after {
+          @include icon("\f0d7");
+          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;
+          }
+
+          @media screen and (min-width: $x-lg-width) {
+            padding: 0px 15px 0px 40px;
+          }
+        }
+
+        .current a {
+          color: $primary-color;
+        }
+      }
+
+      &.open, &.current {
+        & > a:nth-child(1) {
+          position: relative;
+
+          &:after {
+            @include icon("\f0d8");
+          }
+        }
+
+        ul {
+          display: block;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+@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;
+  @include button();
+
+  &:hover {
+    color: #fff;
+    background-color: $color;
+  }
+
+  &:active, &:focus {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+}
+
+@mixin secondary-dropdown($color) {
+  @include secondary-button($color);
+  padding: 6px 25px 6px 10px;
+  position: relative;
+
+  &:after {
+    @include icon("\f0dd");
+    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/_mixins.scss

@@ -0,0 +1,2 @@
+@import "prefix_mixins";
+@import "buttons_mixins";

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 .2s linear,color .2s linear,width .2s linear,background-color .2s 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: normal normal normal 14px/1 FontAwesome;
+  content: $code-icon;
+}

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

@@ -0,0 +1,114 @@
+body.logged_in {
+  &.new, &.edit, &.create, &.update {
+    .formtastic 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: 14px;
+
+        @media screen and (min-width: $sm-width) {
+          padding-bottom: 0;
+          height: 25px;
+          width: 25%;
+          float: left;
+          padding-right: 20px;
+        }
+      }
+      input, textarea {
+        @media screen and (min-width: $sm-width) {
+          width: 50%;
+        }
+
+        &[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: 50% !important;
+        }
+
+        a {
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+
+      select {
+        min-width: 50%;
+        height: 30px;
+      }
+
+      .fragment {
+        margin-right: 10px;
+
+        label {
+          padding-right: 5px;
+        }
+
+        select {
+          min-width: auto;
+        }
+      }
+
+      &.boolean {
+        margin-left: 25%;
+        @include disable-user-select();
+
+        input {
+          width: auto;
+        }
+
+        label {
+          font-size: 14px;
+          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: 25%;
+        
+        .field_with_errors {
+          float: left;
+        }
+      }
+
+      .inline-errors {
+        padding-left: 25%;
+      }
+    }
+
+    .actions {
+      padding-left: 25%;
+    }
+  }
+}