first commit

iadmin/themes/new-theme/scss/mixins/_breakpoints.scss

@@ -0,0 +1,95 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .00125em, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-between($name, $name, $breakpoints) {
+    @content;
+  }
+}

iadmin/themes/new-theme/scss/mixins/_cards.scss

@@ -0,0 +1,38 @@
+// Card variants
+
+@mixin card-variant($background, $border) {
+  background-color: $background;
+  border-color: $border;
+}
+
+@mixin card-outline-variant($color) {
+  background-color: transparent;
+  border-color: $color;
+}
+
+//
+// Inverse text within a card for use with dark backgrounds
+//
+
+@mixin card-inverse {
+  .card-header,
+  .card-footer {
+    border-bottom: $card-border-width solid rgba(255,255,255,.2);
+  }
+  .card-header,
+  .card-footer,
+  .card-title,
+  .card-blockquote {
+    color: #fff;
+  }
+  .card-link,
+  .card-text,
+  .card-blockquote > footer {
+    color: rgba(255,255,255,.65);
+  }
+  .card-link {
+    @include hover-focus {
+      color: $card-link-hover-color;
+    }
+  }
+}

iadmin/themes/new-theme/scss/mixins/_hover.scss

@@ -0,0 +1,59 @@
+@mixin hover {
+  @if $enable-hover-media-query {
+    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+    @media (hover: hover) {
+      &:hover { @content }
+    }
+  }
+  @else {
+    &:hover { @content }
+  }
+}
+
+@mixin hover-focus {
+  @if $enable-hover-media-query {
+    &:focus { @content }
+    @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin plain-hover-focus {
+  @if $enable-hover-media-query {
+    &,
+    &:focus {
+      @content
+    }
+    @include hover { @content }
+  }
+  @else {
+    &,
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin hover-focus-active {
+  @if $enable-hover-media-query {
+    &:focus,
+    &:active {
+      @content
+    }
+    @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:active,
+    &:hover {
+      @content
+    }
+  }
+}

iadmin/themes/new-theme/scss/mixins/_notification_container.scss

@@ -0,0 +1,6 @@
+@mixin notification_container($height) {
+  @include single-line-block($height);
+  cursor: pointer;
+  color: $medium-gray;
+  position: relative;
+}

iadmin/themes/new-theme/scss/mixins/_notification_counter.scss

@@ -0,0 +1,13 @@
+@mixin notification_counter() {
+  display: inline-block;
+  position: absolute;
+  top: 0.25rem;
+  right: 0;
+  color: #fff;
+  background: #f1b746;
+  font-size: 0.625rem;
+  line-height: .75rem;
+  padding: 0 .1875rem;
+  border-radius: 1rem;
+  border: .125rem solid #fff;
+}

iadmin/themes/new-theme/scss/mixins/_single_line_block.scss

@@ -0,0 +1,5 @@
+@mixin single-line-block($line-height) {
+  line-height: $line-height;
+  height: $line-height;
+  vertical-align: middle;
+}

iadmin/themes/new-theme/scss/mixins/_stars.scss

@@ -0,0 +1,58 @@
+// ==========================================================================
+// Extends
+// ==========================================================================
+
+@mixin m($modifier) {
+  &-#{$modifier} {
+    @content;
+  }
+}
+
+$ps-stars: (
+  "0":    "\E839",
+  "05":   "\E839",
+  "1":     "\E838",
+  "15":    "\E838\E839",
+  "2":     "\E838\E838",
+  "25":    "\E838\E838\E839",
+  "3":     "\E838\E838\E838",
+  "35":    "\E838\E838\E838\E838",
+  "4":     "\E838\E838\E838\E838",
+  "45":    "\E838\E838\E838\E838\E839",
+  "5":     "\E838\E838\E838\E838\E838"
+);
+
+// Generate modifier color classes
+@mixin stars($map) {
+  @each $theme, $stars in $map {
+    @include m($theme) {
+      display: inline-block;
+      position: absolute;
+      color: $gray-medium;
+      text-align: right;
+      left: 90px;
+      bottom: 50px;
+      &:before {
+        font-family: 'Material Icons';
+        content: "\E838\E838\E838\E838\E838";
+        color: $gray-light;
+        float: left;
+        font-size: 1.1em;
+        margin-right: 0.5em;
+        position: absolute;
+        left: -70px;
+        top: 0;
+      }
+
+      &:after {
+        position: absolute;
+        font-family: 'Material Icons';
+        content: $stars;
+        color: #FFD100;
+        font-size: 1.1em;
+        left: -70px;
+        top: 0;
+      }
+    }
+  }
+}