sigbit_admin_rails 0.0.3 → 0.0.4.1

data/assets/stylesheets/components/_sidebar.scss

@@ -0,0 +1,162 @@
+body {
+    overflow-x: hidden;
+ }
+
+
+#wrapper {
+    padding-left: 0;
+    @include transition(all 0.5s ease);
+}
+
+#wrapper.toggled {
+    padding-left: $sidebar-width;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: fixed;
+    left: $sidebar-width;
+    width: 0;
+    height: 100%;
+    margin-left: -$sidebar-width;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: $sidebar-bg;
+    @include transition(all 0.5s ease);
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: $sidebar-width;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    position: absolute;
+    padding: 0;
+
+    .container-fluid {
+      padding: $spacer;
+    }
+}
+
+#wrapper.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -$sidebar-width;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+    width: $sidebar-width;
+    margin: $spacer 0 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.sidebar-nav li {
+    text-indent: $spacer;
+    line-height: 50px;
+
+    .active {
+      color: white !important;
+    }
+
+    a {
+        position: relative;
+        display: block;
+        text-decoration: none;
+        color: rgba(white,0.6);
+
+        &:hover {
+            text-decoration: none;
+            color: #fff;
+            background: lighten($sidebar-bg,5%);
+        }
+        &:active, &:focus { text-decoration: none; }
+
+        > * {
+          text-indent: 0;
+        }
+        .fa {
+          margin-right: $spacer/2;
+        }
+
+        .fa-chevron-right {
+          position: absolute;
+          right: $spacer;
+          top: 50%;
+          @include transform(translateY(-50%) rotate(0deg));
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin: 0;
+          font-size: 0.8em;
+          @include transition(all .2s ease);
+        }
+
+        &[aria-expanded="true"] {
+          background: lighten($sidebar-bg, 5%);
+          .fa-chevron-right {
+            @include transform(translateY(-50%) rotate(90deg));
+          }
+        }
+    }
+
+    ul.submenu {
+      background: darken($sidebar-bg,6%);
+      padding: 0;
+
+      li {
+        text-indent: $spacer*1.5;
+        > ul.submenu li {
+          text-indent: $spacer*2;
+        }
+          a[aria-expanded="true"] {
+            background: darken($sidebar-bg,3%);
+          }
+      }
+      a:hover {
+        background: darken($sidebar-bg,3%);
+      }
+    }
+
+}
+
+
+.sidebar-brand {
+  display: block;
+  width: 100%;
+  height: $header-navbar-height;
+  background: darken($sidebar-bg,5%) url($sidebar-logotype) no-repeat $spacer center;
+  background-size: auto 50%;
+  border-bottom: 1px solid darken($sidebar-bg,25%);
+}
+
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-left: $sidebar-width;
+    }
+
+    #wrapper.toggled {
+        padding-left: 0;
+    }
+
+    #sidebar-wrapper {
+        width: $sidebar-width;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 0;
+    }
+
+    #page-content-wrapper {
+        padding: 0;
+        position: relative;
+    }
+
+    #wrapper.toggled #page-content-wrapper {
+        position: relative;
+        margin-right: 0;
+    }
+}

data/assets/stylesheets/components/action-toolbar.scss

@@ -0,0 +1,14 @@
+.action-toolbar {
+  position: relative;
+  padding: $navbar-padding-horizontal 0;
+  @include clearfix;
+
+  > * {
+    margin-left: $spacer/2;
+    margin-top: 0;
+    margin-bottom: 0;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}

data/assets/stylesheets/components/btn-circle.scss

@@ -0,0 +1,25 @@
+.btn-circle {
+    @include border-radius(50%); // Perfect circle
+    width: $btn-padding-x*3;
+    height: $btn-padding-x*3;
+
+    &.btn-sm {
+      width: $btn-padding-x*2.25;
+      height: $btn-padding-x*2.25;
+      font-size: $font-size-sm;
+    }
+    &.btn-lg {
+      width: $btn-padding-x*5;
+      height: $btn-padding-x*5;
+      font-size: $font-size-lg;
+    }
+    &.btn-xl {
+      width: $btn-padding-x*6.5;
+      height: $btn-padding-x*6.5;
+      font-size: $font-size-lg;
+    }
+}
+
+.btn-floating {
+    @include box-shadow( 0px 5px 10px 0px rgba(0,0,0,0.25));
+}

data/assets/stylesheets/components/card.scss

@@ -0,0 +1,45 @@
+// Override bootstrap CSS
+.card {
+  margin-bottom: $spacer;
+
+  .card-actions {
+    position: absolute;
+    top: $spacer/1.25;
+    right: $spacer/1.25;
+    font-size: 0.9em;
+  }
+
+  .card-header .card-actions {
+    position: absolute;
+    top: 50%;
+    @include transform(translateY(-50%));
+  }
+
+  .card-header {
+      position: relative;
+      padding-top: $spacer/1.1;
+      padding-bottom: $spacer/1.1;
+      background: transparent;
+
+      h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0 !important;
+      }
+  }
+  h1, h2, h3, h4, h5, h6 {
+    &.card-header {
+      margin-bottom: 0 !important;
+    }
+  }
+}
+
+.card-gray-dark         { background-color: $gray-dark; }
+.card-gray              { background-color: $gray; }
+.card-gray-light        { background-color: $gray-light; }
+.card-gray-lighter      { background-color: $gray-lighter; }
+.card-gray-lightest     { background-color: $gray-lightest; }
+.card-sidebar-bg        { background-color: $sidebar-bg; }
+.card-header-navbar-bg  { background-color: $header-navbar-bg; }
+
+.card-gray-dark, .card-gray, .card-gray-light, .card-gray-lighter, .card-gray-lightest, .card-sidebar-bg, .card-header-navbar-bg {
+  border: none;
+ }

data/assets/stylesheets/components/file-input.scss

@@ -0,0 +1,87 @@
+.js .inputfile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+
+.inputfile + label {
+    white-space: nowrap;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    margin: 0 0 -5px 0;
+    @include border-radius($border-radius);
+}
+
+
+.no-js .inputfile + label {
+    display: none;
+}
+
+.inputfile:focus + label,
+.inputfile.has-focus + label {
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+}
+
+.inputfile + label * {
+    /* pointer-events: none; */
+    /* in case of FastClick lib use */
+}
+
+
+/* BIG style */
+
+.inputfile.big + label {
+  width: 100%;
+  padding: $spacer*2 $spacer;
+  color: $brand-primary;
+  background-color: $gray-lighter;
+  text-align: center;
+
+  i {
+    margin-bottom: $spacer/2;
+  }
+}
+
+
+
+.inputfile.big:focus + label,
+.inputfile.big.has-focus + label,
+.inputfile.big + label:hover {
+    background-color: lighten($gray-lighter, 2%);
+}
+
+
+/* Medium style */
+
+.inputfile.medium + label {
+  width: 100%;
+  padding: $spacer/2;
+  color: $brand-primary;
+  background-color: $gray-lighter;
+}
+
+.inputfile.medium:focus + label,
+.inputfile.medium.has-focus + label,
+.inputfile.medium + label:hover {
+    border-color: #722040;
+}
+
+
+.inputfile.medium + label span {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    padding: $spacer/4 0;
+    color: $gray;
+}
+.inputfile.medium + label .btn {
+    float: right;
+}

data/assets/stylesheets/components/nestable.scss

@@ -0,0 +1,149 @@
+.nestable-list {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.nestable-list .nestable-list { padding-left: $spacer*1.5; }
+.nestable-collapsed .nestable-list { display: none; }
+
+.nestable-item,
+.nestable-empty,
+.nestable-placeholder {
+  display: block;
+  position: relative;
+}
+
+
+.nestable-handle {
+    display: block;
+    margin: $spacer/2 0;
+    padding: $spacer/2 $spacer/2 $spacer/2 $spacer*1.6666;
+    background-color: $gray-lighter;
+    border: 1px solid transparent;
+    cursor: move;
+    @include border-radius($border-radius-sm);
+
+    &:hover {
+      opacity: 0.7;
+     }
+}
+
+
+.nestable-item > button {
+  position: relative;
+  cursor: pointer;
+  float: left;
+  width: 32px;
+  margin: 0 $spacer/10 0 $spacer*1.5;
+  padding: $spacer/2 0 $spacer/2 $spacer/2;
+  text-indent: -9999px;
+  white-space: nowrap;
+  overflow: hidden;
+  border: 0;
+  z-index: 99;
+  background: transparent;
+}
+.nestable-item > button:before {
+  display: block;
+  margin-top: 5px;
+  position: absolute;
+  font-family: 'FontAwesome';
+  font-size: 0.9em;
+  content: '\f067'; // Font Awesome plus icon
+  color: rgba($gray-dark,0.5);
+  text-indent: 0;
+}
+.nestable-item > button[data-action="collapse"]:before {
+  content: '\f068'; // Font Awesome minus icon
+}
+
+
+.nestable-placeholder,
+.nestable-empty {
+  margin: 5px 0;
+  padding: 0;
+  min-height: 30px;
+  background: $gray-lightest;
+  border: 2px dashed $gray-light;
+}
+
+.nestable-empty {
+  border: 1px dashed #bbb;
+  min-height: 100px;
+  background-color: transparent;
+}
+
+.nestable-dragel {
+  position: absolute;
+  pointer-events: none;
+  z-index: 9999;
+
+  .nestable-handle { opacity: 0.7; }
+  .small-action-btn-group { display: none; }
+}
+
+.nestable-dragel > .nestable-item .nestable-handle { margin-top: 0; }
+
+.nestable-dragel .nestable-handle {
+    @include box-shadow(0 6px 12px rgba(0,0,0,.175));
+}
+
+// Drag handle (main styling is done in sortable.scss)
+
+.nestable-item .fa.drag-handle {
+  position: absolute;
+  top: $spacer/1.3333;
+  left: $spacer/1.3333;
+}
+
+
+// Background variants
+.nestable-primary .nestable-handle {
+  @include nestable-variant($brand-primary, $brand-primary);
+}
+.nestable-success .nestable-handle {
+  @include nestable-variant($brand-success, $brand-success);
+}
+.nestable-info .nestable-handle {
+  @include nestable-variant($brand-info, $brand-info);
+}
+.nestable-warning .nestable-handle {
+  @include nestable-variant($brand-warning, $brand-warning);
+}
+.nestable-danger .nestable-handle {
+  @include nestable-variant($brand-danger, $brand-danger);
+}
+
+// Remove all backgrounds
+.nestable-primary-outline {
+  @include nestable-outline-variant($btn-primary-bg);
+}
+.nestable-secondary-outline {
+  @include nestable-outline-variant($btn-secondary-border);
+}
+.nestable-info-outline {
+  @include nestable-outline-variant($btn-info-bg);
+}
+.nestable-success-outline {
+  @include nestable-outline-variant($btn-success-bg);
+}
+.nestable-warning-outline {
+  @include nestable-outline-variant($btn-warning-bg);
+}
+.nestable-danger-outline {
+  @include nestable-outline-variant($btn-danger-bg);
+}
+
+//
+// Inverse text within a nestable for use with dark backgrounds
+//
+
+.nestable-inverse {
+  color: white;
+  .small-action-btn-group .btn,
+  button:before {
+    color: white;
+  }
+}

data/assets/stylesheets/components/page-header.scss

@@ -0,0 +1,30 @@
+
+.page-header {
+  // background: rgba(red,0.1);
+  padding-bottom: $spacer;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+
+  // Override bootstrap breadcrumb CSS
+  .breadcrumb {
+    padding: 0;
+    margin: $spacer/4 0;
+    background: transparent;
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  .page-header-actions {
+    position: absolute;
+    right: $spacer/1.5;
+    top: 50%;
+    @include transform(translateY(-50%));
+  }
+}

data/assets/stylesheets/components/small-action-btns.scss

@@ -0,0 +1,41 @@
+.small-action-btn-group {
+  display: inline-block;
+  padding: 0 !important;
+  text-align: right !important;
+
+  .btn {
+    position: relative;
+    margin: 0;
+    font-size: 0.8em;
+    padding: $spacer/4;
+    opacity: 0.8;
+    line-height: 1rem;
+    border: none;
+    box-shadow: none;
+    &.btn-link {
+      color: $gray-dark;
+      padding: $spacer/4 $spacer/6;
+    }
+  }
+
+  .dropdown-menu {
+    font-size: 0.9em;
+  }
+  .dropdown-toggle {
+    i { font-size: 1.1em; }
+    &:after { display: none; }
+  }
+
+}
+
+
+table .small-action-btn-group {
+  display: table-cell;
+  vertical-align: middle !important;
+}
+
+.nestable .small-action-btn-group {
+  position: absolute;
+  top: $spacer/2;
+  right: $spacer/2;
+}

data/assets/stylesheets/components/sortable.scss

@@ -0,0 +1,47 @@
+
+.sortable-placeholder {
+  background: $gray-lightest;
+  border: 2px dashed $gray-light;
+}
+
+[class*="sortable"] > * {
+  cursor: move;
+}
+
+/*
+Drag-handles
+Using Font Awesome classes. The .drag-handle content is the icon fa-ellipsis-v used twice.
+*/
+
+.fa.drag-handle {
+  margin-top: -$spacer/2;
+  margin-right: 0;
+  margin-bottom: -$spacer/2;
+  margin-left: -$spacer/1.5;
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer/1.5;
+  cursor: move;
+  color: rgba($gray-dark,0.5);
+}
+
+.fa.drag-handle:before {
+  letter-spacing: 2px;
+  content: "\f142\f142";
+}
+
+button .fa.drag-handle {
+  margin: 0;
+  padding: 0;
+}
+
+
+/*
+This code snippet searches for divs containing classes with the word "sortable". This means
+every .card div inside a sortable container will inherit the properties and values.
+
+Divs with .card will disappear when included with sortable (jQuery plugin) because of its
+relative positioning. This will fix this. But it may screw up other things.
+*/
+
+div[class*="sortable"] .card {
+  position: static;
+}

data/assets/stylesheets/mixins/nestable.scss

@@ -0,0 +1,11 @@
+// nestable variants
+
+@mixin nestable-variant($background, $border) {
+  background-color: $background;
+  border-color: $border;
+}
+
+@mixin nestable-outline-variant($color) {
+  background-color: transparent;
+  border-color: $color;
+}

data/assets/stylesheets/sigbit-admin.scss

@@ -0,0 +1,15 @@
+@import 'bourbon';
+@import 'variables';
+@import "bootstrap";
+@import 'mixins/nestable';
+
+@import 'components/header-navbar';
+@import 'components/sidebar';
+@import 'components/page-header';
+@import 'components/card';
+@import 'components/btn-circle';
+@import 'components/small-action-btns';
+@import 'components/action-toolbar';
+@import 'components/file-input';
+@import 'components/nestable';
+@import 'components/sortable';