toolbox_esten 1.0.0

data/assets/stylesheets/toolbox_esten/mixins.scss

@@ -0,0 +1,179 @@
+@mixin box-shadow($shadow1) {
+  -webkit-box-shadow: $shadow1;
+  -moz-box-shadow:    $shadow1;
+  box-shadow:         $shadow1;
+}
+@mixin box-shadows($shadow1, $shadow2) {
+  -webkit-box-shadow: $shadow1, $shadow2;
+  -moz-box-shadow:    $shadow1, $shadow2;
+  box-shadow:         $shadow1, $shadow2;
+}
+@mixin transition($seconds) {
+  -webkit-transition: $seconds;
+  -moz-transition:    $seconds;
+  -o-transition:      $seconds;
+  transition:         $seconds;
+}
+@mixin opacity($opa) {
+  filter: Alpha(Opacity=#{$opa});
+  opacity: $opa/100;
+}
+@mixin transform($transforms) {
+  -webkit-transform:  $transforms;
+  -ms-transform:      $transforms;
+  transform:          $transforms;
+}
+@mixin transform-origin($x, $y) {
+  -webkit-transform-origin:  $x $y;
+  -ms-transform-origin:      $x $y;
+  transform-origin:          $x $y;
+}
+@mixin border-radius($radius) {
+  -webkit-border-radius:  $radius;
+  -moz-border-radius:     $radius;
+  border-radius:          $radius;
+}
+@mixin border-radius2($topleft, $topright, $bottomright, $bottomleft) {
+  -webkit-border-radius:  $topleft $topright $bottomright $bottomleft;
+  -moz-border-radius:     $topleft $topright $bottomright $bottomleft;
+  border-radius:          $topleft $topright $bottomright $bottomleft;
+}
+@mixin user-select($type) {
+  -webkit-user-select:  $type;
+  -moz-user-select:     $type;
+  -ms-user-select:      $type;
+}
+@mixin box-sizing($sizing) {
+  -webkit-box-sizing: $sizing;
+  -moz-box-sizing:    $sizing;
+  box-sizing:         $sizing;
+}
+@mixin background-size($size) {
+  -webkit-background-size:  unquote($size);
+  -moz-background-size:     unquote($size);
+  -o-background-size:       unquote($size);
+  background-size:          unquote($size);
+}
+@mixin col-c($count) {
+  -webkit-column-count: $count;
+  -moz-column-count:    $count;
+  column-count:         $count;
+}
+@function position($direction) {
+  $position: $direction;
+
+  @if($direction == 'up') {
+    $position: 'top';
+  } @else if($direction == 'down') {
+    $position: 'bottom';
+  } @else if($direction == 'left') {
+    $position: 'left';
+  } @else {
+    $position: 'right';
+  }
+
+  @return $position;
+}
+@function opposite-position($direction) {
+  $opposite: $direction;
+
+  @if($direction == 'up') {
+    $opposite: 'bottom';
+  } @else if($direction == 'down') {
+    $opposite: 'top';
+  } @else if($direction == 'left') {
+    $opposite: 'right';
+  } @else {
+    $opposite: 'left';
+  }
+
+  @return $opposite;
+}
+
+@mixin linear-g($direction, $fallback, $from, $to) {
+  $directions: get-direction($direction);
+
+  background: $fallback;
+  background: -webkit-gradient(linear, unquote(nth($directions, 2)), color-stop(0%, $from), color-stop(100%, $to));
+  background: -webkit-linear-gradient(unquote(nth($directions, 1)), $from 0%, $to 100%);
+  background:    -moz-linear-gradient(unquote(nth($directions, 1)), $from 0%, $to 100%);
+  background:     -ms-linear-gradient(unquote(nth($directions, 1)), $from 0%, $to 100%);
+  background:      -o-linear-gradient(unquote(nth($directions, 1)), $from 0%, $to 100%);
+  background:         linear-gradient($direction, $from 0%, $to 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 );
+}
+@mixin multiple-linear-g($args) {
+  $gradient: ();
+  $deg: nth($args, 1) + "deg";
+
+  @each $cs in $args {
+    @if(type-of($cs) != 'number') {
+      $gradient: append($gradient, unquote($cs), comma);
+    }
+  }
+  background-image: -webkit-linear-gradient(unquote($deg), $gradient);
+  background-image:    -moz-linear-gradient(unquote($deg), $gradient);
+  background-image:      -o-linear-gradient(unquote($deg), $gradient);
+  background-image:         linear-gradient(unquote($deg), $gradient);
+}
+@mixin size($w, $h) {
+  width: $w;
+  height: $h;
+}
+@mixin line-height($h, $lh) {
+  height: $h;
+  line-height: $lh;
+}
+@mixin font($size, $weight) {
+  font-size: $size;
+  font-weight: $weight;
+}
+@mixin tblr($t, $b, $l, $r) {
+  top: $t;
+  bottom: $b;
+  left: $l;
+  right: $r;
+}
+@mixin tblr-cust($args...) {
+  @each $pair in $args {
+    #{nth($pair, 1)}: #{nth($pair, 2)};
+  }
+}
+@mixin color($index, $color) {
+  &.color#{$index}:after {
+    background: #{$color};
+    border: solid 2px #{$color};
+  }
+}
+@mixin trans-rotate($deg) {
+  -webkit-transform:  rotate(#{$deg});
+  -ms-transform:      rotate(#{$deg});
+  transform:          rotate(#{$deg});
+}
+@mixin text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+@mixin appearance($val) {
+  -webkit-appearance: #{$val};
+  -moz-appearance:    #{$val};
+  appearance:         #{$val};
+}
+
+/* -------------------- Functions -------------------- */
+@function get-direction($direction) {
+  $old-direction: $direction;
+  $veryold-direction: $direction;
+
+  @if($direction == 'to bottom') {
+    $old-direction: 'top';
+    $veryold-direction: 'left top, left bottom';
+  } @else {
+    $old-direction: 'left';
+    $veryold-direction: 'left top, right top';
+  }
+
+  @return $old-direction, $veryold-direction;
+}
+/* -------------------- END Functions -------------------- */

data/assets/stylesheets/toolbox_esten/notification.scss

@@ -0,0 +1,109 @@
+.notification_alert {
+  @include border-radius(4px);
+  padding: 15px;
+  line-height: 16px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  h4 {
+    margin-top: 0;
+    color: inherit;
+  }
+  a { color: $blue_500; }
+  &.alert-success {
+    color: $light_green_800;
+    background: $light_green_200;
+    border-color: $light_green_400;
+  }
+  &.alert-warning {
+    color: $yellow_800;
+    background: $yellow_100;
+    border-color: $yellow_400;
+    b { color: $yellow_800!important; }
+  }
+  &.alert-danger {
+    color: $red_800;
+    background: $red_100;
+    border-color: $red_400;
+  }
+  &.alert-info {
+    color: $light_blue_600;
+    background: $light_blue_100;
+    border-color: $light_blue_200;
+  }
+}
+
+.error-message {
+  position: relative;
+  padding: 16px 64px;
+  min-height: 30px;
+  h2 {
+    span { margin-left: 4px; }
+    > * {
+      display: inline-block;
+      vertical-align: baseline!important;
+    }
+    &:before { vertical-align: baseline; }
+  }
+  .close {
+    @include font(18px, 700);
+    @include tblr-cust((top, 20px), (right, 20px));
+    position: absolute;
+    display: block;
+  }
+  > *:not(.clear):not(.close) {
+    @extend .inline-baseline;
+    line-height: 40px;
+  }
+  &.normal {
+    @include box-shadows(inset 0 3px 7px $grey_500, inset 0 -1px 3px $grey_500);
+    background: $grey_300;
+    color: $grey_800;
+    .close {
+      &:hover { color: $grey_800;}
+    }
+  }
+  &.success {
+    @include box-shadows(inset 0 3px 7px $green_500, inset 0 -1px 3px $green_500);
+    background: $green_300;
+    color: $green_800;
+    .close {
+      color: $green_800;
+      &:hover { color: $green_800;}
+    }
+  }
+  &.warning {
+    @include box-shadows(inset 0 3px 7px $amber_500, inset 0 -1px 3px $amber_500);
+    background: $amber_300;
+    color: $amber_900;
+    .close {
+      color: $amber_900;
+      &:hover { color: $amber_900;}
+    }
+  }
+  &.alert {
+    @include box-shadows(inset 0 3px 7px $red_600, inset 0 -1px 3px $red_600);
+    background: $red_200;
+    color: $red_600;
+    .close {
+      color: $red_600;
+      &:hover { color: $red_600;}
+    }
+  }
+  &.temp {
+    @include tblr-cust((top, 10px), (right, 0));
+    position: fixed;
+    top: 10px;
+    right: 0;
+    padding: 16px 64px 16px 16px;
+    // z-index: index($z-index-ele, noti_temp);
+    .close {
+      @include tblr-cust((top, 20px), (right, 20px));
+      top: 23px;
+      right: 10px;
+    }
+    &.normal { @include box-shadow(0 1px 3px $grey_500); }
+    &.success { @include box-shadow(0 1px 3px $green_500); }
+    &.warning { @include box-shadow(0 1px 3px $amber_500); }
+    &.alert { @include box-shadow(0 1px 3px $red_600); }
+  }
+}

data/assets/stylesheets/toolbox_esten/reset.scss

@@ -0,0 +1,38 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
+abbr, acronym, address, big, cite, code, del, dfn,
+em, img, ins, kbd, q, s, samp, small, strike, strong,
+sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,
+li, fieldset, form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside, canvas, details,
+embed, figure, figcaption, footer, header, hgroup, menu,
+nav, output, ruby, section, summary, time, mark, audio, video {
+  border: 0;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+select { outline: none; }
+html, body { @include size(100%, 100%); }
+body {
+	line-height: 1;
+	font-size: 12px;
+}
+a { text-decoration: none; }
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+ol, ul { list-style: none; }
+textarea.noresize { resize: none; }

data/assets/stylesheets/toolbox_esten/section.scss

@@ -0,0 +1,53 @@
+.section {
+  .section-head {
+    padding: 20px 40px;
+    > *:not(.clear) { @include line-height(30px, 30px); }
+    h1,
+    > h2 {
+      @include text-overflow();
+      @include box-sizing(border-box);
+      span { @extend .inline-top; }
+      &[class^="icon-"]:before,
+      &[class*=" icon-"]:before {
+        @extend .inline-top;
+        @include line-height(40px, 40px);
+        @include font(24px, 300);
+        margin-right: 8px;
+      }
+    }
+    h1 { @include font(24px, 300); }
+    > h2 { @include font(16px, 600); }
+    .controls {
+      > li {
+        @extend .inline-top;
+        margin: 0 4px;
+        .btn {
+          @include line-height(30px, 30px);
+          display: inline-block;
+          vertical-align: middle;
+          &.flat {
+            color: #FFFFFF;
+            &.normal:hover { background: #FFFFFF; }
+          }
+          &.circle {
+            width: 40px;
+            &[class^="icon-"]:before,
+            &[class*=" icon-"]:before {
+              @extend .inline-top;
+            }
+          }
+          &[class^="icon-"]:before,
+          &[class*=" icon-"]:before {
+            line-height: 30px;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+  .section-body {
+    min-height: 50px;
+    padding: 10px 8px;
+    overflow: hidden;
+  }
+}

data/assets/stylesheets/toolbox_esten/tables.scss

@@ -0,0 +1,72 @@
+/* ---------- Table ---------- */
+.table {
+  border-collapse: collapse;
+  thead tr th,
+  tbody tr td,
+  tfoot tr th {
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 14px;
+  }
+  thead tr.controls th {
+    border: none;
+    background: #FFFFFF;
+    padding: 8px;
+    > ul > li {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+  thead tr th,
+  tfoot tr th {
+    height: 32px;
+  }
+  thead tr {
+    // &:last-child {
+    //   th { border-bottom: solid 4px $grey_300; }
+    // }
+    th {
+      outline: 0;
+      background-color: $grey_100;
+      color: $grey_600;
+    }
+  }
+  tbody tr {
+    &:first-child {
+      td { border-top: solid 4px $grey_300; }
+    }
+    td {
+      height: 40px;
+      color: $grey_700;
+      a:not(.btn):hover { text-decoration: underline; }
+      &.actions {
+        a, span {
+          display: inline-block;
+          vertical-align: middle;
+          &:hover { text-decoration: none; }
+          &.btn {
+            &.circle { @include size(30px, 30px); }
+            &:before { line-height: 28px; }
+          }
+        }
+      }
+    }
+  }
+  tfoot tr {
+    th {
+      background-color: $grey_100;
+      border-top: solid 4px $grey_300;
+    }
+  }
+}
+/* ---------- END Table ---------- */
+
+.table-striped > tbody {
+  > tr:nth-child(even) > td { background: #F7F7F7; }
+}
+.table-bordered {
+  tbody tr td { border-bottom: solid 1px $grey_300; }
+}
+.table-hover > tbody {
+  > tr:hover > td { background: $grey_200; }
+}