toolbox_esten 1.0.0

data/assets/stylesheets/toolbox_esten/base.scss

@@ -0,0 +1,27 @@
+//
+// 1. Set default font
+// 2. Set default size, box-sizing, position, and margin of global container
+//
+a { color: $grey_700; }
+.norecord {
+  @include font(14px, 500);
+  padding: 100px 0;
+}
+body {
+	@include font(12px, 500);
+	font-family: $helvetica;
+	color: $grey_900;
+}
+.container {
+  @include size(100%, 100%);
+  @include box-sizing(border-box);
+  position: relative;
+  overflow: hidden;
+}
+.bodycontent {
+  @include box-sizing(border-box);
+  position: relative;
+  height: 100%;
+  padding: 40px 0 0;
+  overflow: auto;
+}

data/assets/stylesheets/toolbox_esten/buttons.scss

@@ -0,0 +1,162 @@
+.caret {
+  border-style: solid;
+  border-width: 4px;
+  border-color: transparent;
+  float: none!important;
+}
+@each $dir in 'up', 'down', 'left', 'right' {
+  .caret.#{$dir} {
+    border-#{position(#{$dir})}-width: 0;
+    border-#{opposite-position(#{$dir})}-color: $grey_600;
+  }
+}
+
+//Structure
+.btn {
+  @include line-height(30px, 30px);
+  @include box-sizing(border-box);
+  @include transition(0.3s);
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  min-width: 30px;
+  outline: 0;
+  border: none;
+  cursor: pointer;
+  &.flat,
+  &.square {
+    @include border-radius(2px);
+    @include font(12px, 400);
+    height: 30px;
+    padding: 0 8px;
+    text-transform: uppercase;
+  }
+  &.circle {
+    @include border-radius(100%);
+    @include size(30px, 30px);
+    &[class^="icon-"]:before,
+    &[class*="icon-"]:before {
+      @include font(16px, 400);
+      float: none;
+      vertical-align: top;
+      margin: 0;
+    }
+  }
+  &[class^="icon-"]:before,
+  &[class*="icon-"]:before {
+    float: left;
+    line-height: 29px;
+    margin: 0 4px 0 0;
+  }
+  input[type="button"] {
+    @extend .vm;
+    @include size(100%, 100%);
+    @include tblr-cust((left, 0), (top, 0));
+    @include opacity(0);
+    border: none;
+    cursor: pointer;
+  }
+  &.btn-mini {
+    @include line-height(20px, 20px);
+  }
+}
+
+
+//Theme
+.btn {
+  &.flat {
+    color: #FFFFFF;
+    background: transparent;
+    @each $dir in 'up', 'down', 'left', 'right' {
+      .caret.#{$dir} {
+        border-#{opposite-position(#{$dir})}-color: #FFFFFF;
+      }
+    }
+    &.normal {
+      color: $grey_500;
+      &:hover { background: $grey_500; }
+      @each $dir in 'up', 'down', 'left', 'right' {
+        .caret.#{$dir} {
+          border-#{opposite-position(#{$dir})}-color: $grey_500;
+        }
+      }
+    }
+    &.alert {
+      color: $deep_orange_400;
+      &:hover { background: $deep_orange_400; }
+      @each $dir in 'up', 'down', 'left', 'right' {
+        .caret.#{$dir} {
+          border-#{opposite-position(#{$dir})}-color: $deep_orange_400;
+        }
+      }
+    }
+    &.success { color: $light_green_400; }
+    &.warning { color: $yellow_600; }
+    &.info {
+      color: $blue_400;
+      &:hover { background: $blue_400; }
+      @each $dir in 'up', 'down', 'left', 'right' {
+        .caret.#{$dir} {
+          border-#{opposite-position(#{$dir})}-color: $blue_400;
+        }
+      }
+    }
+    &:hover {
+      color: #FFFFFF;
+      @each $dir in 'up', 'down', 'left', 'right' {
+        .caret.#{$dir} {
+          border-#{opposite-position(#{$dir})}-color: #FFFFFF;
+        }
+      }
+    }
+  }
+  &.square {
+    @each $dir in 'up', 'down', 'left', 'right' {
+      .caret.#{$dir} {
+        border-#{opposite-position(#{$dir})}-color: #FFFFFF;
+      }
+    }
+  }
+  &.square,
+  &.circle {
+    @include box-shadow(0 1px 2px $grey_300);
+    &.normal {
+      color: $grey_600;
+      background: #FFFFFF;
+      border: solid 1px $grey_300;
+      &:hover { background: #FFFFFF; }
+    }
+    &.alert {
+      color: #FFFFFF;
+      background: $deep_orange_400;
+      border: solid 1px $deep_orange_400;
+      &:hover { background: $deep_orange_600; }
+    }
+    &.success {
+      color: #FFFFFF;
+      background: $light_green_400;
+      border: solid 1px $light_green_400;
+      &:hover { background: $light_green_600; }
+    }
+    &.warning {
+      color: #FFFFFF;
+      background: $yellow_600;
+      border: solid 1px $yellow_600;
+      &:hover { background: $yellow_600; }
+    }
+    &.info {
+      color: #FFFFFF;
+      background: $blue_400;
+      border: solid 1px $blue_400;
+      &:hover { background: $blue_600; }
+    }
+    &[disabled],
+    &.disabled {
+      color: $grey_400!important;
+      background: $grey_200!important;
+      border: solid 1px $grey_200!important;
+      cursor: not-allowed;
+      &:hover { background: $grey_300; }
+    }
+  }
+}

data/assets/stylesheets/toolbox_esten/datatables.scss

@@ -0,0 +1,113 @@
+.dataTables_empty {
+  vertical-align: middle;
+  text-align: center;
+  color: $grey_500;
+}
+.dataTables_wrapper {
+  .dataTables_paginate {
+    float: right;
+    text-align: right;
+    padding-top: 0.25em;
+    .paginate_button {
+      @include box-sizing(border-box);
+      display: inline-block;
+      min-width: 1.5em;
+      padding: 0.5em 1em;
+      margin-left: 2px;
+      text-align: center;
+      text-decoration: none!important;
+      border: solid 1px $grey_300;
+      color: $grey_700!important;
+      cursor: pointer;
+      *cursor: hand;
+      &.current,
+      &.current:hover {
+        background: $grey_300;
+      }
+      &.disabled,
+      &.disabled:hover,
+      &.disabled:active {
+        @include box-shadow(none);
+        border: solid 1px transparent;
+        color: #666666!important;
+        background: transparent;
+        cursor: default;
+      }
+      &:hover {
+        color: #FFFFFF!important;
+        background: $grey_400;
+      }
+      &:active {
+        @include box-shadow(inset 0 0 3px #111111);
+        background: #2B2B2B;
+        outline: none;
+      }
+    }
+  }
+}
+// table.dataTable {
+//   thead {
+//     .sorting_asc,
+//     .sorting_desc,
+//     .sorting {
+//       position: relative;
+//       cursor: pointer;
+//       *cursor: hand;
+//     }
+//     .sorting {
+//       overflow: hidden;
+//       &:before, &:after {
+//         @extend .vm;
+//         @include size(0, 0);
+//         display: block;
+//         content: "";
+//         left: auto;
+//         right: 10px;
+//         border: solid 4px transparent;
+//       }
+//       &:before {
+//         top: 11px;
+//         bottom: auto;
+//         border-top: 0;
+//         border-bottom-color: $grey_500;
+//       }
+//       &:after {
+//         top: auto;
+//         bottom: 11px;
+//         border-bottom: 0;
+//         border-top-color: $grey_500;
+//       }
+//     }
+//     .sorting_asc,
+//     .sorting_desc,
+//     .sorting_asc_disabled,
+//     .sorting_desc_disabled {
+//       position: relative;
+//       &:after {
+//         @extend .vm;
+//         @include size(0, 0);
+//         display: block;
+//         content: "";
+//         left: auto;
+//         right: 10px;
+//         border: solid 4px transparent;
+//       }
+//     }
+//     .sorting_asc:after,
+//     .sorting_asc_disabled:after {
+//       top: auto;
+//       bottom: 11px;
+//       border-bottom: 0;
+//     }
+//     .sorting_desc:after,
+//     .sorting_desc_disabled:after {
+//       top: 11px;
+//       bottom: auto;
+//       border-top: 0;
+//     }
+//     .sorting_asc:after { border-top-color: $grey_500; }
+//     .sorting_desc:after { border-bottom-color: $grey_500; }
+//     .sorting_asc_disabled:after { border-top-color: $grey_300; }
+//     .sorting_desc_disabled:after { border-bottom-color: $grey_300; }
+//   }
+// }

data/assets/stylesheets/toolbox_esten/detail.scss

@@ -0,0 +1,22 @@
+.detail {
+  @extend .form;
+  .detail-head { @extend .section-head; }
+  .detail-body {
+    @extend .form-body;
+    .field {
+      padding: 16px 0;
+      div.controls {
+        .label_name {
+          @include line-height(100%, 20px);
+          @include font(12px, 400);
+          text-transform: uppercase;
+          color: $grey_500;
+        }
+        .detail_val {
+          @extend .textfield;
+          height: auto;
+        }
+      }
+    }
+  }
+}

data/assets/stylesheets/toolbox_esten/flex.scss

@@ -0,0 +1,32 @@
+.flex-container {
+  display: flex;
+  /* ---------- Direction ---------- */
+  @each $dir in 'row', 'row-reverse', 'column', 'column-reverse' {
+    &.#{$dir} { flex-direction: #{$dir}; }
+  }
+  /* ---------- END Direction ---------- */
+
+  /* ---------- Wrap ---------- */
+  @each $wrap in 'nowrap', 'wrap', 'wrap-reverse' {
+    &.flex-#{$wrap} { flex-wrap: #{$wrap}; }
+  }
+  /* ---------- END Wrap ---------- */
+
+  /* ---------- Flow ---------- */
+  @each $flow in 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' {
+    &.#{$flow} { justify-content: #{$flow}; }
+  }
+  /* ---------- END Flow ---------- */
+
+  /* ---------- Align Item ---------- */
+  @each $align in 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' {
+    &.item-#{$align} { align-items: #{$align}; }
+  }
+  /* ---------- END Align Item ---------- */
+
+  /* ---------- Align Content ---------- */
+  @each $align in 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch' {
+    &.content-#{$align} { align-content: #{$align}; }
+  }
+  /* ---------- END Align Content ---------- */
+}

data/assets/stylesheets/toolbox_esten/form.scss

@@ -0,0 +1,35 @@
+.form {
+  @extend .section;
+  overflow: auto;
+  .form-head {
+    @extend .section-head;
+    padding: 20px 40px 10px;
+    h1 { margin: 0 auto 8px; }
+  }
+  .form-body {
+    @extend .section-body;
+    .field {
+      position: relative;
+      margin: 0 auto;
+      padding: 24px 0;
+      div.controls {
+        position: relative;
+        line-height: 30px;
+        padding: 0 8px;
+        .label_name {
+          @include line-height(100%, 30px);
+          @include font(18px, 200);
+          @include transition(0.2s);
+          display: inline-block;
+          color: $grey_500;
+        }
+        .textfield {
+          @include font(18px, 200);
+          font-family: $helvetica;
+          &.datefield { cursor: pointer; }
+        }
+      }
+      &.actions { padding: 16px 0; }
+    }
+  }
+}

data/assets/stylesheets/toolbox_esten/grid.scss

@@ -0,0 +1,34 @@
+.span1, .span2, .span3, .span4,
+.span5, .span6, .span7, .span8,
+.span9, .span10, .span11, .span12 {
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing:    border-box;
+  box-sizing:         border-box;
+}
+
+.span1  { width: 8.333333333333332%; }
+.span2  { width: 16.666666666666664%; }
+.span3  { width: 25%; }
+.span4  { width: 33.33333333333333%; }
+.span5  { width: 41.66666666666667%; }
+.span6  { width: 50%; }
+.span7  { width: 58.333333333333336%; }
+.span8  { width: 66.66666666666666%; }
+.span9  { width: 75%; }
+.span10 { width: 83.33333333333334%; }
+.span11 { width: 91.66666666666666%; }
+.span12 { width: 100%; }
+
+.offset1  { margin-left: 8.333333333333332%!important; }
+.offset2  { margin-left: 16.666666666666664%!important; }
+.offset3  { margin-left: 25%!important; }
+.offset4  { margin-left: 33.33333333333333%!important; }
+.offset5  { margin-left: 41.66666666666667%!important; }
+.offset6  { margin-left: 50%!important; }
+.offset7  { margin-left: 58.333333333333336%!important; }
+.offset8  { margin-left: 66.66666666666666%!important; }
+.offset9  { margin-left: 75%!important; }
+.offset10 { margin-left: 83.33333333333334%!important; }
+.offset11 { margin-left: 91.66666666666666%!important; }
+.offset12 { margin-left: 100%!important; }

data/assets/stylesheets/toolbox_esten/helper.scss

@@ -0,0 +1,42 @@
+.transition {
+  -webkit-transition:  0.4s;
+  -moz-transition:     0.4s;
+  -o-transition:       0.4s;
+  transition:          0.4s;
+}
+.transition-fast {
+  -webkit-transition:  0.1s;
+  -moz-transition:     0.1s;
+  -o-transition:       0.1s;
+  transition:          0.1s;
+}
+.clear { clear: both; }
+.hide { display: none; }
+.hidden { display:none!important; }
+.visible { overflow: visible!important; }
+.auto { overflow: auto!important; }
+.pointer { cursor: pointer; }
+.vm {
+  @include tblr(0,0,0,0);
+  position: absolute;
+  margin: auto;
+}
+.nowrap { white-space: nowrap; }
+.text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.table-fixed { width: auto; table-layout: fixed; }
+@each $dir in 'left', 'right', 'center' {
+  .text-#{$dir} { text-align: #{$dir}!important; }
+}
+@each $dir in 'left', 'right' {
+  .#{$dir} { float: #{$dir}; }
+}
+@each $valign in 'top', 'middle', 'baseline' {
+  .inline-#{$valign} {
+    display: inline-block;
+    vertical-align: #{$valign};
+  }
+}