arctic_admin 1.0.1 → 1.0.2

data/app/assets/stylesheets/_reset.scss

@@ -0,0 +1,26 @@
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

data/app/assets/stylesheets/_variables.scss

@@ -0,0 +1,21 @@
+$red: #b34247;
+$green: #2dbb43;
+$blue: #4bacfe;
+
+$body-background: #eee !default;
+$header-border-color: #e6e6e6 !default;
+$left-menu-background: #f5f5f5 !default;
+
+$left-menu-item-hover-background: #f0f0f0 !default;
+$left-menu-item-nested-hover-background: #e7e7e7 !default;
+
+$text-color: #5a5a5a !default;
+$text-color-important: #526069 !default;
+
+$header-width: 200px !default;
+$screen-header-width: calc(100% - 200px) !default;
+
+$sidebar-width: 230px !default;
+$screen-sidebar-width: calc(100% - 230px) !default;
+
+$primary-color: $blue !default;

data/app/assets/stylesheets/arctic_admin.scss

@@ -0,0 +1 @@
+@import "base";

data/app/assets/stylesheets/components/_date_picker.scss

@@ -0,0 +1,29 @@
+#ui-datepicker-div {
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 3px;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,.04);
+  z-index: 3!important;
+
+  .ui-datepicker-prev {
+    float: left;
+  }
+
+  .ui-datepicker-next {
+    float: right;
+  }
+
+  .ui-datepicker-title {
+    text-align: center;
+  }
+
+  .ui-datepicker-calendar {
+    tr:hover {
+      background-color: #fff;
+    }
+
+    td {
+      border: none;
+    }
+  }
+}

data/app/assets/stylesheets/components/_flash.scss

@@ -0,0 +1,27 @@
+.flash {
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background-color: #76838f;
+  color: #fff;
+}
+
+.flash_alert {
+  background-color: #f96868;
+  color: #fff;
+}
+
+.flash_warning {
+  background-color: #f2a654;
+  color: #fff;
+}
+
+.flash_notice {
+  background-color: #46be8a;
+  color: #fff;
+}
+
+.flash_info {
+  background-color: #57c7d4;
+  color: #fff;
+}

data/app/assets/stylesheets/components/_form.scss

@@ -0,0 +1,32 @@
+.label {
+  display: inline-block;
+  margin-bottom: 5px;
+}
+
+.input {
+  margin-bottom: 20px;
+}
+
+#active_admin_content {
+  .formtastic {
+    legend {
+      margin-bottom: 20px;
+    }
+
+    .actions {
+
+      .action {
+        display: inline-block;
+        margin-right: 10px;
+
+        input[type="submit"] {
+          line-height: 43px;
+        }
+      }
+
+      .cancel {
+        display: inline-block;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/components/_inputs.scss

@@ -0,0 +1,61 @@
+input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea {
+  -webkit-appearance: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+  -o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+  transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+  -moz-appearance: none;
+
+  display: block;
+  width: 100%;
+  height: 36px;
+  padding: 6px 15px;
+  font-size: 14px;
+  line-height: 1.57142857;
+  color: #76838f;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #e4eaec;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+
+  &:focus {
+    border-color: #62a8ea;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: 0;
+
+    -webkit-appearance: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+    -o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+    transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+    -moz-appearance: none;
+  }
+
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+  }
+}
+
+input[type="submit"] {
+  @include primary-button($primary-color, white);
+  width: 100%;
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  box-shadow: 0 1px 0 rgba(0,0,0,.05);
+  border: none;
+  cursor: pointer;
+}
+
+textarea {
+  height: 80px;
+  padding: 5px 10px;
+}

data/app/assets/stylesheets/components/_panel_contents.scss

@@ -0,0 +1,7 @@
+.panel_contents {
+  th {
+    border-top: 1px solid #e4eaec;
+    text-align: left;
+    padding: 8px;
+  }
+}

data/app/assets/stylesheets/components/_status_tag.scss

@@ -0,0 +1,17 @@
+.status_tag {
+  background: #cacaca;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  padding: 3px 5px 2px 5px;
+  font-size: 0.8em;
+  border-radius: 3px;
+}
+
+.status_tag.ok, .status_tag.published, .status_tag.complete, .status_tag.completed, .status_tag.green {
+  background-color: #46be8a;
+}
+
+.status_tag.cancel, .status_tag.red {
+  background-color: #f73737;
+}

data/app/assets/stylesheets/components/_tables.scss

@@ -0,0 +1,47 @@
+table {
+  width: 100%;
+}
+
+thead th {
+  font-size: 12px;
+  text-align: left;
+
+  a {
+    color: $text-color-important;
+    font-weight: normal;
+    width: 100%;
+    display: inline-block;
+    padding: 8px 20px 8px 8px;
+  }
+
+  &.col-selectable {
+    padding-left: 8px;
+  }
+}
+
+tbody tr {
+  &:nth-of-type(odd) {
+    background-color: rgba(243,247,249,.3);
+  }
+  
+  &:hover {
+    background-color: #f3f7f9;
+  }
+
+  th {
+    font-size: 14px;
+  }
+
+  td {
+    padding: 8px;
+    line-height: 1.57142857;
+    vertical-align: top;
+    border-top: 1px solid #e4eaec;
+    color: #7A8392;
+    font-size: 12px;
+
+    &.col-actions {
+      padding: 6px 8px;
+    }
+  }
+}

data/app/assets/stylesheets/layouts/_footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  display: inline-block;
+  padding: 0 15px;
+}

data/app/assets/stylesheets/layouts/_header.scss

@@ -0,0 +1,203 @@
+.admin_namespace {
+  padding-left: $header-width;
+  padding-top: 60px;
+
+  #active_admin_content {
+    padding: 30px 25px;
+    
+    @include clear-fix();
+  }
+}
+
+.header {
+  .site_title {
+    width: $header-width;
+    height: 60px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    border-bottom: 1px solid $header-border-color;
+    font-size: 20px;
+    text-align: center;
+    margin: 0;
+    line-height: 60px;
+  }
+
+  #tabs {
+    width: $header-width;
+    height: calc(100% - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    background-color: $left-menu-background;
+    border-right: 1px solid $header-border-color;
+
+    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: $left-menu-item-hover-background;
+        }
+      }
+
+      &.current {
+        a {
+          color: $primary-color;
+        }
+      }
+
+      &.has_nested {
+        ul {
+          border-top: 1px solid $header-border-color;
+          border-bottom: 1px solid $header-border-color;
+          background-color: $body-background;
+          padding: 10px 0;
+          cursor: auto;
+
+          a {
+            padding: 0px 15px 0px 40px;
+            color: $text-color;
+
+            &:hover {
+              background-color: $left-menu-item-nested-hover-background;
+            }
+          }
+
+          .current a {
+            color: $primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  #utility_nav {
+    height: 60px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    text-align: right;
+
+    li {
+      display: inline-block;
+      @include transition-button();
+
+      &:hover {
+        background-color: $left-menu-background;
+      }
+
+      &:active {
+        background-color: $left-menu-item-hover-background;
+      }
+    }
+
+    #current_user {
+      a {
+        visibility: hidden;
+        position: relative;
+        width: 60px;
+        height: 59px;
+        display: inline-block;
+
+        &:before {
+          @include icon("\f007");
+
+          display: inline;
+          visibility: visible;
+          cursor: pointer;
+          position: absolute;
+          top: 0;
+          right: 0;
+          color: $text-color;
+          padding: 20px 0;
+          text-align: center;
+          width: 60px;
+          font-size: 20px;
+        }
+      }
+      // a {
+      //   color: $text-color;
+      //   padding: 20px 10px;
+      //   display: inline-block;
+      // }
+    }
+
+    #logout {
+      min-width: 60px;
+      min-height: 59px;
+      float: right;
+
+      a {
+        visibility: hidden;
+        position: relative;
+
+        &:before {
+          @include icon("\f011");
+
+          display: inline;
+          visibility: visible;
+          cursor: pointer;
+          position: absolute;
+          top: 0;
+          right: 0;
+          color: $text-color;
+          padding: 20px 0;
+          text-align: center;
+          width: 60px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+
+#title_bar {
+  height: 60px;
+  width: $screen-header-width;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: $header-width;
+  border-bottom: 1px solid $header-border-color;
+  padding: 0 20px;
+  z-index: 2;
+
+  #titlebar_left {
+    padding-top: 6px;
+    display: inline-block;
+    float: left;
+  }
+
+  #titlebar_right {
+    display: inline-block;
+    margin-left: 20px;
+
+    .action_item a {
+      color: $text-color;
+      display: inline-block;
+      @include transition-button();
+      padding: 20px 12px;
+      float: left;
+
+      &:hover {
+        background-color: $left-menu-background;
+      }
+    }
+  }
+
+  #page_title {
+    margin: 0;
+  }
+}