blaze-css-rails 0.0.1

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

@@ -0,0 +1,21 @@
+@import "mixins/components.tooltips";
+
+.c-tooltip {
+  @include tooltip;
+}
+
+.c-tooltip--top {
+  @include tooltip--top;
+}
+
+.c-tooltip--right {
+  @include tooltip--right;
+}
+
+.c-tooltip--bottom {
+  @include tooltip--bottom;
+}
+
+.c-tooltip--left {
+  @include tooltip--left;
+}

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

@@ -0,0 +1,21 @@
+@import "mixins/components.trees";
+
+.c-tree {
+  @include tree;
+
+  .c-tree {
+    @include tree--nested;
+  }
+}
+
+.c-tree__item {
+  @include tree__item;
+}
+
+.c-tree__item--expandable {
+  @include tree__item--expandable;
+}
+
+.c-tree__item--expanded {
+  @include tree__item--expanded;
+}

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

@@ -0,0 +1,73 @@
+@import "mixins/components.typography";
+
+.c-text {
+  @include text;
+}
+
+.c-text--mono {
+  @include text--mono;
+}
+
+.c-text--highlight {
+  @include text--highlight;
+}
+
+.c-text--quiet {
+  @include text--quiet;
+}
+
+.c-text--loud {
+  @include text--loud;
+}
+
+.c-text--help[title] {
+  @include text--help;
+}
+
+.c-pre {
+  margin: 0;
+}
+
+.c-code {
+  @include code;
+}
+
+.c-code--multiline {
+  @include code--multiline;
+}
+
+.c-kbd {
+  @include keyboard-keys;
+}
+
+.c-blockquote {
+  @include quotation;
+}
+
+.c-blockquote--primary {
+  @include quotation--primary;
+}
+
+.c-blockquote--secondary {
+  @include quotation--secondary;
+}
+
+.c-blockquote--success {
+  @include quotation--success;
+}
+
+.c-blockquote--error {
+  @include quotation--error;
+}
+
+.c-blockquote__body {
+  @include quotation__body;
+}
+
+.c-blockquote__footer {
+  @include quotation__footer;
+}
+
+.c-paragraph {
+  @include paragraph;
+}

data/app/assets/stylesheets/generic.global.scss

@@ -0,0 +1,3 @@
+@import "mixins/generic.global";
+
+@include ground-zero;

data/app/assets/stylesheets/mixins/_animations.alerts.scss

@@ -0,0 +1,54 @@
+@import "settings.animations";
+
+@mixin alert-keyframes {
+  @keyframes alert {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    50% {
+      transform: scale(1.02);
+    }
+
+    80% {
+      transform: scale(0.95);
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin alert {
+  animation-name: alert;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin alert--top {
+  transform-origin: center top;
+}
+
+@mixin alert--bottom {
+  transform-origin: center bottom;
+}
+
+@mixin alert--left {
+  transform-origin: left center;
+}
+
+@mixin alert--right {
+  transform-origin: right center;
+}
+
+@mixin alert--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin alert--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.bubbles.scss

@@ -0,0 +1,54 @@
+@import "settings.animations";
+
+@mixin bubble-keyframes {
+  @keyframes bubble {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    50% {
+      transform: scale(1.02);
+    }
+
+    80% {
+      transform: scale(0.95);
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin bubble {
+  animation-name: bubble;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin bubble--top {
+  transform-origin: center bottom;
+}
+
+@mixin bubble--bottom {
+  transform-origin: center top;
+}
+
+@mixin bubble--left {
+  transform-origin: right center;
+}
+
+@mixin bubble--right {
+  transform-origin: left center;
+}
+
+@mixin bubble--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin bubble--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.calendars.scss

@@ -0,0 +1,46 @@
+@import "settings.animations";
+
+@mixin calendar-keyframes {
+  @keyframes menu {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin calendar {
+  animation-name: menu;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin calendar--top {
+  transform-origin: top;
+}
+
+@mixin calendar--bottom {
+  transform-origin: bottom;
+}
+
+@mixin calendar--left {
+  transform-origin: left;
+}
+
+@mixin calendar--right {
+  transform-origin: right;
+}
+
+@mixin calendar--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin calendar--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.drawers.scss

@@ -0,0 +1,15 @@
+@import "settings.animations";
+
+@mixin drawer {
+  transition: transform;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin drawer--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin drawer--fast {
+  transition-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.hints.scss

@@ -0,0 +1,5 @@
+@import "settings.animations";
+
+@mixin hint {
+  transition: all $animation-duration-fast $animation-easing;
+}

data/app/assets/stylesheets/mixins/_animations.menus.scss

@@ -0,0 +1,46 @@
+@import "settings.animations";
+
+@mixin menu-keyframes {
+  @keyframes menu {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin menu {
+  animation-name: menu;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin menu--top {
+  transform-origin: top;
+}
+
+@mixin menu--bottom {
+  transform-origin: bottom;
+}
+
+@mixin menu--left {
+  transform-origin: left;
+}
+
+@mixin menu--right {
+  transform-origin: right;
+}
+
+@mixin menu--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin menu--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.modals.scss

@@ -0,0 +1,54 @@
+@import "settings.animations";
+
+@mixin modal-keyframes {
+  @keyframes modal {
+    from {
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
+    }
+
+    50% {
+      transform: translate(-50%, -50%) scale(1.02);
+    }
+
+    80% {
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+
+    to {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin modal {
+  animation-name: modal;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin modal--top {
+  transform-origin: center top;
+}
+
+@mixin modal--bottom {
+  transform-origin: center bottom;
+}
+
+@mixin modal--left {
+  transform-origin: left center;
+}
+
+@mixin modal--right {
+  transform-origin: right center;
+}
+
+@mixin modal--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin modal--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.navs.scss

@@ -0,0 +1,15 @@
+@import "settings.animations";
+
+@mixin nav__item {
+  transition: background-color, color;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin nav__item--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin nav__item--fast {
+  transition-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.overlays.scss

@@ -0,0 +1,28 @@
+@import "settings.animations";
+
+@mixin overlay-keyframes {
+  @keyframes overlay {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin overlay {
+  animation-name: overlay;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin overlay--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin overlay--fast {
+  animation-duration: $animation-duration-fast;
+}