wirecss_rails 1.0.0

data/vendor/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,64 @@
+// ----------------------
+//
+// BUTTONS
+//
+// ----------------------
+
+// ----------------------
+// Button
+// ----------------------
+%button {
+	background-color: $wire-button-bg;
+	border: 0;
+	border-radius: $wire-border-radius;
+	color: $wire-button-color;
+	display: inline-block;
+	line-height: inherit;
+	padding: em(7, 10) em(14, 10);
+	text-align: center;
+	transition: background-color .2s ease-out;
+	vertical-align: bottom;
+	&:hover {
+		background-color: darken($wire-button-bg, 15%);
+		color: #ffffff;
+	}
+	&.small {
+		font-size: rem(12);
+	}
+	&.large {
+		font-size: rem(18);
+	}
+	&.x-large {
+		font-size: rem(24);
+	}
+	&.alt {
+		background-color: $wire-button-alt-bg;
+		color: $wire-button-alt-color;
+		&:hover {
+			background-color: darken($wire-button-alt-bg, 15%);
+		}
+	}
+}
+
+@if $wire-markup == true {
+	.#{$wire-namespace}button,
+	.#{$wire-namespace}btn,
+	input[type="submit"],
+	input[type="button"] {
+		@extend %button;
+	}
+	input[type="submit"][disabled],
+	input[type="button"][disabled],
+	.#{$wire-namespace}button[disabled],
+	.#{$wire-namespace}btn[disabled],
+	.#{$wire-namespace}button.disabled,
+	.#{$wire-namespace}btn.disabled {
+		background-color: lighten($wire-button-alt-bg, 5.5%);
+		color: lighten($wire-button-alt-color, 5.5%);
+		cursor: not-allowed;
+		&:hover {
+			background-color: lighten($wire-button-alt-bg, 5.5%);
+			color: lighten($wire-button-alt-color, 5.5%);
+		}
+	}
+}

data/vendor/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,84 @@
+// ----------------------
+//
+// Forms
+//
+// ----------------------
+
+@if $wire-markup == true {
+	.#{$wire-namespace}form {
+		&[data-form~="horizontal"] {
+			@include grid-va-bottom();
+			@include grid();
+			.field {
+				padding-right: $wire-base-gutter;
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+		}
+		ul {
+			@extend %list-unstyled;
+		}
+		.row {
+			@include grid();
+			.field {
+				@include mq(small) {
+					padding-left: 0;
+					padding-right: 0;
+				}
+
+				padding-left: $wire-base-gutter;
+				padding-right: $wire-base-gutter;
+				&:first-child {
+					padding-left: 0;
+				}
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+		}
+		.field {
+			margin-bottom: 1em;
+			label {
+				display: inline-block;
+				margin-bottom: .3rem;
+			}
+			input[type="email"],
+			input[type="password"],
+			input[type="search"],
+			input[type="text"],
+			input[type="tel"],
+			input[type="url"],
+			select {
+				background: $wire-form-input-bg;
+				border: 1px solid $wire-form-input-border;
+				border-radius: 3px;
+				height: rem(38);
+				padding: .5em;
+				transition: border-color .20s ease-in-out;
+				width: 100%;
+				&:focus {
+					border-color: darken($wire-form-input-border, 25%);
+					outline: none;
+				}
+			}
+			textarea {
+				@extend input[type="text"];
+
+				height: auto;
+			}
+			input[type="checkbox"],
+			input[type="radio"] {
+				&:focus {
+					border-color: darken($wire-form-input-border, 25%);
+					outline: none;
+				}
+				+ label {
+					margin-left: .25rem;
+					max-width: 88%;
+					vertical-align: top;
+				}
+			}
+		}
+	}
+}

data/vendor/assets/stylesheets/components/_grid.scss

@@ -0,0 +1,456 @@
+// ----------------------
+//
+// Grid
+//
+// Content:
+// - Core definition
+// - Direction
+// - Wrap
+// - Align
+// - column Align
+// ----------------------
+
+@mixin container() {
+  height: 100%;
+  width: 100%;
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after{
+    clear: both;
+  }
+}
+
+@if $wire-markup == true {
+  .#{$wire-namespace}container {
+    @include container();
+  }
+}
+
+[class*="col-"] {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+
+// $Grid
+// Core Grid
+@mixin grid() {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+@if $wire-markup == true {
+  .#{$wire-namespace}grid,
+  [data-grid] {
+    @include grid();
+  }
+}
+
+// $Direction
+// Row
+@mixin grid-row() {
+  flex-direction: row;
+}
+
+@if $wire-markup == true {
+  [data-grid~="row"],
+  .#{$wire-namespace}grid--row {
+    @include grid-row();
+  }
+}
+
+@mixin grid-row-reverse() {
+  flex-direction: row-reverse;
+}
+
+@if $wire-markup == true {
+  [data-grid~="row-reverse"],
+  .#{$wire-namespace}grid--row-reverse {
+    @include grid-row-reverse();
+  }
+}
+
+@mixin grid-column() {
+  flex-direction: column;
+}
+
+@if $wire-markup == true {
+  [data-grid~="column"],
+  .#{$wire-namespace}grid--column {
+    @include grid-column();
+  }
+}
+
+@mixin grid-column-reverse() {
+  flex-direction: column-reverse;
+}
+
+@if $wire-markup == true {
+  [data-grid~="column-reverse"],
+  .#{$wire-namespace}grid--column-reverse {
+    @include grid-column-reverse();
+  }
+}
+
+// $Wrap
+// Wrap
+@mixin grid-wrap() {
+  flex-wrap: wrap;
+}
+
+@if $wire-markup == true {
+  [data-grid~="wrap"],
+  .#{$wire-namespace}grid--wrap {
+    @include grid-wrap();
+  }
+}
+
+// Wrap Reverse
+@mixin grid-wrap-reverse() {
+  flex-wrap: wrap-reverse;
+}
+
+@if $wire-markup == true {
+  [data-grid~="wrap-reverse"],
+  .#{$wire-namespace}grid--wrap-reverse {
+    @include grid-wrap-reverse();
+  }
+}
+
+// Nowrap
+@mixin grid-nowrap() {
+  flex-wrap: nowrap;
+}
+
+@if $wire-markup == true {
+  [data-grid~="nowrap"],
+  .#{$wire-namespace}grid--nowrap {
+    @include grid-nowrap();
+  }
+}
+
+// $Align
+// Left
+@mixin grid-left() {
+  justify-content: flex-start;
+}
+
+@if $wire-markup == true {
+  [data-grid~="left"],
+  .#{$wire-namespace}grid--left {
+    @include grid-left();
+  }
+}
+
+// Right
+@mixin grid-right() {
+  justify-content: flex-end;
+}
+
+@if $wire-markup == true {
+  [data-grid~="right"],
+  .#{$wire-namespace}grid--right {
+    @include grid-right();
+  }
+}
+
+// Center
+@mixin grid-center() {
+  justify-content: center;
+}
+
+@if $wire-markup == true {
+  [data-grid~="center"],
+  .#{$wire-namespace}grid--center {
+    @include grid-center();
+  }
+}
+
+// Space Between
+@mixin grid-between() {
+  justify-content: space-between;
+}
+
+@if $wire-markup == true {
+  [data-grid~="space-between"],
+  .#{$wire-namespace}grid--between {
+    @include grid-between();
+  }
+}
+
+// Space Around
+@mixin grid-around() {
+  justify-content: space-around;
+}
+
+@if $wire-markup == true {
+  [data-grid~="space-around"],
+  .#{$wire-namespace}grid--around {
+    @include grid-around();
+  }
+}
+
+// $column Align
+// Top
+@mixin grid-va-top() {
+  align-items: flex-start;
+}
+
+@if $wire-markup == true {
+  [data-grid~="va-top"],
+  .#{$wire-namespace}grid--va-top {
+    @include grid-va-top();
+  }
+}
+
+// Bottom
+@mixin grid-va-bottom() {
+  align-items: flex-end;
+}
+
+@if $wire-markup == true {
+  [data-grid~="va-bottom"],
+  .#{$wire-namespace}grid--va-bottom {
+    @include grid-va-bottom();
+  }
+}
+
+// Center
+@mixin grid-va-center() {
+  align-items: center;
+}
+
+@if $wire-markup == true {
+  [data-grid~="va-center"],
+  .#{$wire-namespace}grid--va-center {
+    @include grid-va-center();
+  }
+}
+
+// Baseline
+@mixin grid-va-baseline() {
+  align-content: baseline;
+}
+
+@if $wire-markup == true {
+  [data-grid~="va-baseline"],
+  .#{$wire-namespace}grid--va-baseline {
+    @include grid-va-baseline();
+  }
+}
+
+// Stretch
+@mixin grid-va-stretch() {
+  align-content: stretch;
+}
+
+@if $wire-markup == true {
+  [data-grid~="va-stretch"],
+  .#{$wire-namespace}grid--va-stretch {
+    @include grid-va-stretch();
+  }
+}
+
+// $Content Align
+// Stretch
+@mixin grid-ca-stretch() {
+  align-content: stretch;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-stretch"],
+  .#{$wire-namespace}grid--ca-stretch {
+    @include grid-ca-stretch();
+  }
+}
+
+// Top
+@mixin grid-ca-top() {
+  align-content: flex-start;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-top"],
+  .#{$wire-namespace}grid--ca-top {
+    @include grid-ca-top();
+  }
+}
+
+// Bottom
+@mixin grid-ca-bottom() {
+  align-content: flex-end;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-bottom"],
+  .#{$wire-namespace}grid--ca-bottom {
+    @include grid-ca-bottom();
+  }
+}
+
+// Center
+@mixin grid-ca-center() {
+  align-content: center;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-center"],
+  .#{$wire-namespace}grid--ca-center {
+    @include grid-ca-center();
+  }
+}
+
+// Space Around
+@mixin grid-ca-space-around() {
+  align-content: space-around;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-space-around"],
+  .#{$wire-namespace}grid--ca-space-around {
+    @include grid-ca-space-around();
+  }
+}
+
+// Space Between
+@mixin grid-ca-space-between() {
+  align-content: space-between;
+}
+
+@if $wire-markup == true {
+  [data-grid~="ca-space-between"],
+  .#{$wire-namespace}grid--ca-space-between {
+    @include grid-ca-space-between();
+  }
+}
+
+
+// Grid Helpers
+// Center - Center
+// Center vertical and horizontal
+@mixin grid-center-center() {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  min-height: 100%;
+  > * {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@if $wire-markup == true {
+  [data-grid~="center-center"],
+  .#{$wire-namespace}grid--center-center {
+    @include grid-center-center();
+  }
+}
+
+// Order
+@mixin order($position, $force: false) {
+  @if $force == true {
+      order: $position !important;
+  } @else {
+      order: $position;
+  }
+}
+
+// Push Left
+@mixin push-left() {
+  @include order(-100, true);
+}
+
+%push-left {
+  @include push-left;
+}
+@if $wire-markup == true {
+  .push-left {
+      @extend %push-left;
+  }
+}
+
+// Push Right
+@mixin push-right() {
+  @include order(100, true);
+}
+
+%push-right {
+  @include push-right;
+}
+@if $wire-markup == true {
+  .push-right {
+      @extend %push-right;
+  }
+}
+
+// $Core Width
+@mixin columns($col) {
+  width: $col * 100% / $wire-max-columns;
+}
+@for $col from 1 through ($wire-max-columns) {
+  %col-#{$col} {
+    @include columns($col);
+  }
+  @if $wire-markup == true {
+    .#{$wire-namespace}col-#{$col},
+    [data-col~="#{$col}"] {
+      @include columns($col);
+      @include mq(small) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@for $col from 1 through ($wire-max-columns) {
+  @each $breakpoint, $value in $wire-breakpoints {
+    @include mq($breakpoint) {
+      @if $wire-markup == true {
+        .#{$wire-namespace}col-#{$breakpoint}-#{$col},
+        [data-col-#{$breakpoint}~="#{$col}"] {
+          @include columns($col);
+        }
+      }
+    }
+  }
+}
+
+@for $col from 1 through ($wire-max-columns) {
+  %col-offset-#{$col} {
+    margin-left: $col * 100% / $wire-max-columns;
+  }
+
+  @if $wire-markup == true {
+    .#{$wire-namespace}col-offset-#{$col} {
+      @extend %col-offset-#{$col};
+    }
+  }
+}
+
+@for $col from 1 through ($wire-max-columns) {
+  @each $breakpoint, $value in $wire-breakpoints {
+    @include mq($breakpoint) {
+      @if $wire-markup == true {
+        .#{$wire-namespace}col-#{$breakpoint}-offset-#{$col} {
+          margin-left: $col * 100% / $wire-max-columns;
+        }
+      }
+    }
+  }
+}
+
+// $Grid Row
+@mixin row() {
+  @include grid;
+}
+
+@if $wire-markup == true {
+  .#{$wire-namespace}row {
+    @include row();
+  }
+}