wcc-styles 0.1.0

data/lib/assets/stylesheets/wcc/styles/snippets/_selectize.scss

@@ -0,0 +1,361 @@
+.selectize-control {
+  position: relative;
+  &.plugin-drag_drop {
+    .ui-sortable-placeholder::after {
+      content: '!';
+      visibility: hidden;
+    }
+    .ui-sortable-helper {
+      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+  }
+  &.plugin-remove_button {
+    [data-value] {
+      position: relative;
+      padding-right: 24px !important;
+      .remove {
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 17px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 12px;
+        color: inherit;
+        text-decoration: none;
+        vertical-align: middle;
+        display: inline-block;
+        padding: 2px 0 0;
+        border-left: 1px solid #EB7F4C;
+        -webkit-border-radius: 0 2px 2px 0;
+        -moz-border-radius: 0 2px 2px 0;
+        //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
+        border-radius: 0 2px 2px 0;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        //Instead of the line below you could use @includebox-sizing($bs)
+        box-sizing: border-box;
+        &:hover {
+          background: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+    .disabled [data-value] .remove {
+      border-left-color: #aaaaaa;
+      &:hover {
+        background: none;
+      }
+    }
+  }
+  &.multi .selectize-input {
+    [data-value] {
+      text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
+      -webkit-border-radius: 3px;
+      background-color: $orange;
+
+      &.active {
+        background-color: $dark-orange;
+      }
+    }
+    > div {
+      cursor: pointer;
+      margin: 0 3px 3px 0;
+      padding: 2px 6px;
+      background: #cc6e42;
+      color: #ffffff;
+      border: 1px solid #EB7F4C;
+      &.active {
+        background: #EB7F4C;
+        color: #ffffff;
+        border: 1px solid #cc6e42;
+      }
+    }
+  }
+  &.single .selectize-input {
+    cursor: pointer;
+    background-color: #fff;
+    padding: 15px;
+    font-size: 1.125em;
+    border: none;
+    box-shadow: none;
+    -webkit-appearance: none;
+
+    input {
+      cursor: pointer;
+    }
+
+    &:after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 50%;
+      right: 15px;
+      margin-top: -3px;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 5px 5px 0 5px;
+      border-color: #808080 transparent transparent transparent;
+    }
+  }
+  &.rtl .selectize-input > input {
+    margin: 0 4px 0 -2px !important;
+  }
+  .selectize-input.disabled {
+    opacity: 0.5;
+    background-color: #fafafa;
+  }
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
+  border-radius: 3px 3px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+  &:hover {
+    color: #000000;
+  }
+}
+.selectize-dropdown {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 25px;
+  -webkit-font-smoothing: inherit;
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: -1px 0 0;
+  border-top: 0 none;
+
+  &.plugin-optgroup_columns {
+    .optgroup {
+      border-right: 1px solid #f2f2f2;
+      border-top: 0 none;
+      float: left;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      &:last-child {
+        border-right: 0 none;
+      }
+      &:before {
+        display: none;
+      }
+    }
+    .optgroup-header {
+      border-top: 0 none;
+    }
+  }
+  [data-selectable] {
+    cursor: pointer;
+    overflow: hidden;
+    padding: 10px;
+
+    .highlight {
+      background: rgba(233, 127, 82, 0.2);
+    }
+  }
+  .optgroup-header {
+    padding: 5px 8px;
+    color: #303030;
+    background: #ffffff;
+    cursor: default;
+    padding-top: 7px;
+    font-weight: bold;
+    font-size: 0.85em;
+  }
+  .optgroup {
+    border-top: 1px solid #f0f0f0;
+    &:first-child {
+      border-top: 0 none;
+      .optgroup-header {
+        border-top: 0 none;
+      }
+    }
+  }
+  .active {
+    background-color: #FEF8F6;
+  }
+  .create {
+    color: rgba(48, 48, 48, 0.5);
+  }
+  &.single {
+    border-color: #b8b8b8;
+  }
+}
+.selectize-input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-font-smoothing: inherit;
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+  padding: 15px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  box-shadow: none;
+  background: transparent;
+  background-image: none;
+  -webkit-appearance: none;
+
+  input {
+    color: #303030;
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 18px;
+    -webkit-font-smoothing: inherit;
+  }
+  &.full {
+    background-color: #ffffff;
+  }
+  &.disabled {
+    cursor: default !important;
+    * {
+      cursor: default !important;
+    }
+  }
+  &.focus {
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+    //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+  &.dropdown-active {
+    -webkit-border-radius: 3px 3px 0 0;
+    -moz-border-radius: 3px 3px 0 0;
+    //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
+    border-radius: 3px 3px 0 0;
+  }
+  > {
+    * {
+      vertical-align: baseline;
+      display: inline-block;
+      zoom: 1;
+      *display: inline;
+    }
+    input {
+      display: inline-block !important;
+      padding: 0 !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      max-width: 100% !important;
+      margin: 0 1px !important;
+      text-indent: 0 !important;
+      border: 0 none !important;
+      background: none !important;
+      line-height: inherit !important;
+      -webkit-user-select: auto !important;
+      -webkit-box-shadow: none !important;
+      //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+      box-shadow: none !important;
+      &:focus {
+        outline: none !important;
+      }
+    }
+    input::-ms-clear {
+      display: none;
+    }
+  }
+  &.dropdown-active::before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    background: #f0f0f0;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+}
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+  //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #cc6e42;
+}
+.selectize-control.single .selectize-input {
+  &.input-active {
+    background: #ffffff;
+    cursor: text;
+    display: inline-block;
+    cursor: text;
+    input {
+      cursor: text;
+    }
+  }
+  &.dropdown-active:after {
+    margin-top: -4px;
+    border-width: 0 5px 5px 5px;
+    border-color: transparent transparent #808080 transparent;
+  }
+}
+.selectize-control.multi .selectize-input {
+  &.has-items {
+    padding: 15px 15px 6px 15px;
+  }
+  &.disabled {
+    [data-value] {
+      color: #999;
+      text-shadow: none;
+      background: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      border-color: #e6e6e6;
+      .remove {
+        border-color: #e6e6e6;
+        background: none;
+      }
+    }
+    > div {
+      color: #ffffff;
+      background: #d2d2d2;
+      border: 1px solid #aaaaaa;
+      &.active {
+        color: #ffffff;
+        background: #d2d2d2;
+        border: 1px solid #aaaaaa;
+      }
+    }
+  }
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}

data/lib/assets/stylesheets/wcc/styles/snippets/_sidebar_slideout.scss

@@ -0,0 +1,184 @@
+*,
+*:after,
+*::before {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html,
+body,
+.st-container,
+.st-pusher,
+.st-content {
+  height: 100%;
+}
+
+.st-content {
+  overflow-x: hidden;
+  background-color: #F8F8F8;
+  -webkit-overflow-scrolling: touch;
+}
+
+.st-content,
+.st-content-inner {
+  position: relative;
+}
+
+.st-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.st-pusher {
+  -webkit-transition: -webkit-transform 0.5s;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  right: 0;
+  transition: transform 0.5s;
+  z-index: 99999;
+}
+
+.st-pusher::after {
+  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  background: rgba(0,0,0,0.3);
+  content: '';
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  width: 0;
+  z-index: 2000;
+}
+
+.st-menu-open .st-pusher::after {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  -webkit-transition: opacity 0.5s;
+  transition: opacity 0.5s;
+}
+
+.st-menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  visibility: hidden;
+  width: 300px;
+  height: 100%;
+  background: #4F90BA;
+  -webkit-transition: all 0.5s;
+  overflow-y: auto;
+  color: white;
+  transition: all 0.5s;
+
+  .slideout-content {
+    padding: 40px;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    h2 {
+      font-size: 2em;
+      font-weight: 300;
+      line-height: 1em;
+      margin: 0;
+      margin-bottom: 20px;
+      text-shadow: 0 0 1px rgba(0,0,0,0.1);
+    }
+
+    form {
+
+      input {
+        margin-bottom: 20px;
+        height: 40px;
+      }
+
+      button {
+        background-color: $dark-grey;
+        font-size: 14px;
+        padding: 20px 10px;
+      }
+    }
+
+  }
+}
+
+.st-menu::after {
+  -webkit-transition: opacity 0.5s;
+  background: rgba(0,0,0,0.2);
+  content: '';
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.5s;
+  width: 100%;
+}
+
+.st-menu-open .st-menu::after {
+  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  width: 0;
+}
+
+/* content style */
+
+
+/* Individual effects */
+
+/* Profile Reveal */
+.st-effect-profile-reveal.st-menu-open .st-pusher {
+  -webkit-transform: translate3d(-300px, 0, 0);
+  transform: translate3d(-300px, 0, 0);
+}
+
+.st-effect-profile-reveal.st-menu {
+  z-index: 1;
+}
+
+.st-effect-profile-reveal.st-menu-open .st-effect-profile-reveal.st-menu {
+  visibility: visible;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.st-effect-profile-reveal.st-menu::after {
+  display: none;
+}
+
+/* Password Reveal */
+.st-effect-password-reveal.st-menu-open .st-pusher {
+  -webkit-transform: translate3d(-300px, 0, 0);
+  transform: translate3d(-300px, 0, 0);
+}
+
+.st-effect-password-reveal.st-menu {
+  z-index: 1;
+}
+
+.st-effect-password-reveal.st-menu-open .st-effect-password-reveal.st-menu {
+  visibility: visible;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.st-effect-password-reveal.st-menu::after {
+  display: none;
+}
+
+
+/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
+.no-csstransforms3d .st-pusher,
+.no-js .st-pusher {
+  padding-right: 300px;
+}