blaze-css-rails 0.0.1

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

@@ -0,0 +1,283 @@
+@import "mixins/components.inputs";
+
+// LABELS
+
+.c-label {
+  @include label;
+}
+
+// TEXT FIELDS
+
+.c-field {
+  @include field;
+}
+
+.c-label__field {
+  @include label__field;
+}
+
+.c-field--error {
+  @include field--error;
+}
+
+.c-field--success {
+  @include field--success;
+}
+
+.c-field--disabled, .c-field:disabled {
+  @include field--disabled;
+}
+
+.c-field--super {
+  @include field--super;
+}
+
+.c-field--xlarge {
+  @include field--xlarge;
+}
+
+.c-field--large {
+  @include field--large;
+}
+
+.c-field--medium {
+  @include field--medium;
+}
+
+.c-field--small {
+  @include field--small;
+}
+
+.c-field--xsmall {
+  @include field--xsmall;
+}
+
+// SELECTS, CHECKBOXES AND RADIOS
+
+.c-choice {
+  @include choice;
+}
+
+.c-choice--error {
+  @include choice--error;
+}
+
+.c-choice--success {
+  @include choice--success;
+}
+
+.c-choice--disabled, .c-choice:disabled {
+  @include choice--disabled;
+}
+
+.c-choice--super {
+  @include choice--super;
+}
+
+.c-choice--xlarge {
+  @include choice--xlarge;
+}
+
+.c-choice--large {
+  @include choice--large;
+}
+
+.c-choice--medium {
+  @include choice--medium;
+}
+
+.c-choice--small {
+  @include choice--small;
+}
+
+.c-choice--xsmall {
+  @include choice--xsmall;
+}
+
+// SELECTS
+
+select.c-choice {
+  @include field;
+}
+
+select:not([multiple]) {
+  &.c-choice {
+    @include select;
+  }
+
+  &.c-choice--super {
+    @include choice--super;
+  }
+
+  &.c-choice--xlarge {
+    @include choice--xlarge;
+  }
+
+  &.c-choice--large {
+    @include choice--large;
+  }
+
+  &.c-choice--medium {
+    @include choice--medium;
+  }
+
+  &.c-choice--small {
+    @include choice--small;
+  }
+
+  &.c-choice--xsmall {
+    @include choice--xsmall;
+  }
+}
+
+select.c-choice--error {
+  @include select--error;
+}
+
+select.c-choice--success {
+  @include select--success;
+}
+
+select.c-choice--disabled, select.c-choice:disabled {
+  @include select--disabled;
+}
+
+// CHECKBOXES and RADIOs
+
+.c-choice input {
+  @include checkbox;
+}
+
+.c-choice input:disabled {
+  @include choice--disabled;
+}
+
+// INPUT GROUP
+.c-input-group {
+  @include input-group;
+
+  .c-field {
+    @include input-group__field;
+    @include input--grouped;
+  }
+
+  .c-field:not(:first-child):not(:last-child) {
+    @include input-group__field--center;
+  }
+
+  .c-field:first-child {
+    @include input-group__field--left;
+  }
+
+  .c-field:last-child {
+    @include input-group__field--right;
+  }
+  
+  .c-button {
+    @include input--grouped;
+  }
+
+  .c-button:first-child {
+    @include input-group__button--left;
+  }
+
+  .c-button:last-child {
+    @include input-group__button--right;
+  }
+}
+
+.c-input-group--rounded {
+  .c-field:first-child,
+  .c-button:first-child {
+    @include input-group-rounded--left;
+  }
+
+  .c-field:last-child,
+  .c-button:last-child {
+    @include input-group-rounded--right;
+  }
+}
+
+.c-input-group--rounded-left {
+  .c-field:first-child,
+  .c-button:first-child {
+    @include input-group-rounded--left;
+  }
+}
+
+.c-input-group--rounded-right {
+  .c-field:last-child,
+  .c-button:last-child {
+    @include input-group-rounded--right;
+  }
+}
+
+.c-field-group {
+  @include field-group;
+
+  .c-field:not(:first-child) {
+    @include field-group__field;
+  }
+
+  .c-field:not(:first-child):not(:last-child) {
+    @include field-group__field--center;
+  }
+
+  .c-field:first-child {
+    @include field-group__field--top;
+  }
+
+  .c-field:last-child {
+    @include field-group__field--bottom;
+  }
+}
+
+.c-field-group-inline {
+  @include field-group-inline;
+
+  .c-field:not(:first-child) {
+    @include field-group-inline__field;
+  }
+
+  .c-field:not(:first-child):not(:last-child) {
+    @include field-group-inline__field--center;
+  }
+
+  .c-field:first-child {
+    @include field-group-inline__field--left;
+  }
+
+  .c-field:last-child {
+    @include field-group-inline__field--right;
+  }
+}
+
+// FIELDSETS - Groups of controls
+
+.c-fieldset {
+  @include fieldset;
+
+  &.c-list {
+    @include fieldset;
+  }
+}
+
+.c-fieldset__legend {
+  @include fieldset__legend;
+}
+
+.c-fieldset--disabled .c-field, .c-fieldset:disabled .c-field {
+  @include field--disabled;
+}
+
+.c-fieldset--disabled .c-choice, .c-fieldset:disabled .c-choice {
+  @include disabled;
+}
+
+.c-form-element {
+  @include form-element;
+
+  .c-label:first-child {
+    @include form-element-label;
+  }
+}

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

@@ -0,0 +1,10 @@
+@import "mixins/components.links";
+
+.c-link {
+  @include link;
+}
+
+.c-link--primary { @include link--primary; }
+.c-link--secondary { @include link--secondary; }
+.c-link--success { @include link--success; }
+.c-link--error { @include link--error; }

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

@@ -0,0 +1,57 @@
+@import "mixins/components.lists";
+
+.c-list {
+  @include list;
+}
+
+.c-list__item {
+  @include list__item;
+}
+
+.c-list__item--unstyled {
+  @include list__item--unstyled;
+}
+
+.c-list--unstyled {
+  @include list--unstyled;
+
+  .c-list, .c-list--unstyled {
+    @include list--nested;
+  }
+}
+
+.c-list--nested {
+  @include list--nested;
+}
+
+.c-list--ordered {
+  @include list--ordered;
+
+  .c-list__item {
+    @include list-ordered-item;
+  }
+}
+
+.c-list--ordered .c-list--ordered {
+  @include list--nested;
+}
+
+.c-list--inline {
+  @include list--inline;
+
+  .c-list--inline {
+    @include list--inline;
+  }
+
+  .c-list__item {
+    @include list-inline-item;
+  }
+
+  &:not(.c-list--unstyled) {
+    .c-list__item {
+      &:before {
+        @include list-inline-item-bullet;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+@import "mixins/components.menus";
+
+.c-menu {
+  @include menu;
+}
+
+.c-menu__item {
+  @include menu__item;
+
+  &:not(.c-menu__item--disabled):not(.c-menu__item--divider):hover {
+    @include menu__item--hover;
+  }
+}
+
+.c-menu__item--hover {
+  @include menu__item--hover;
+}
+
+.c-menu__item--disabled {
+  @include menu__item--disabled;
+}
+
+.c-menu__item--divider {
+  @include menu__item--divider;
+}
+
+.c-menu__item--active {
+  @include menu__item--active;
+}
+
+.c-menu--grouped {
+  .c-menu__item {
+    @include menu__item--borderless;
+  }
+}
+
+.c-menu__group-divider {
+  @include menu__group-divider;
+}
+
+.c-menu--high {
+  @include menu--high;
+}
+
+.c-menu--higher {
+  @include menu--higher;
+}
+
+.c-menu--highest {
+  @include menu--highest;
+}

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

@@ -0,0 +1,53 @@
+@import "mixins/components.modals";
+
+.c-modal {
+  @include modal;
+}
+
+.c-modal__header {
+  @include modal__header;
+}
+
+.c-modal__header .c-button--close {
+  @include modal__close;
+}
+
+.c-modal__body {
+  @include modal__body;
+}
+
+.c-modal__footer {
+  @include modal__footer;
+}
+
+.c-modal__footer--block {
+  @include modal__footer--block;
+
+  .c-button {
+    @include modal__footer-button--block;
+  }
+}
+
+.c-modal--ghost {
+  @include modal--ghost;
+
+  .c-modal__heading {
+    @include modal__heading--ghost;
+  }
+
+  .c-modal__footer {
+    @include modal__footer;
+  }
+}
+
+.c-modal--high {
+  @include modal--high;
+}
+
+.c-modal--higher {
+  @include modal--higher;
+}
+
+.c-modal--highest {
+  @include modal--highest;
+}