vendor/assets/stylesheets/furatto/_mixins.scss in furatto-0.0.1 vs vendor/assets/stylesheets/furatto/_mixins.scss in furatto-0.0.2
- old
+ new
@@ -7,12 +7,10 @@
* Designed and built @kurenn
*/
//Clears the float from any element
@mixin clearfix {
- *zoom: 1;
-
&:before, &:after {
display: table;
content: "";
}
@@ -25,18 +23,71 @@
display: inline-block;
zoom: 1;
*display: inline;
}
+@mixin center-block {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@mixin hyphens($mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode; // IE10+
+ -o-hyphens: $mode;
+ hyphens: $mode;
+}
+
+//Credits to bootstrap
+@mixin responsive-invisibility {
+ display: none !important;
+
+ tr, th, td {
+ display: none !important;
+ }
+}
+
+@mixin responsive-visibility {
+ display: block !important;
+
+ &.btn {
+ display: inline-block !important;
+ }
+
+ tr {
+ display: table-row !important;
+ }
+
+ th, td {
+ display: table-cell !important;
+ }
+}
+@mixin opacity ( $opacity ) {
+ opacity: $opacity;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $opacity * 100 ")";
+ filter: alpha(opacity= $opacity* 100 );
+ zoom: 1;
+}
+
+
+@mixin img-responsive {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
// FORMS
// --------------------------------------------------
// Block level inputs
@mixin input-block-level {
display: block;
width: 100%;
- min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ min-height: $input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
}
@mixin dropdown-arrow($color: $select-options-bg, $top: 5px, $left: 15px, $size: 9px) {
@@ -67,171 +118,10 @@
overflow: hidden;
background-color: $top;
border-bottom: 1px solid $bottom;
}
-// Grid System
-// -----------
-
-// Centered container element
-@mixin container-fixed() {
- margin-right: auto;
- margin-left: auto;
- @include clearfix();
-}
-
-// Table columns
-@mixin tableColumns($columnSpan: 1) {
- float: none; // undo default grid column styles
- width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
- margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-@mixin makeRow() {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
-}
-@mixin makeColumn($columns: 1, $offset: 0) {
- float: left;
- margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
- .row {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
- }
-
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: $gridGutterWidth;
- }
-
- // generate .spanX and .offsetX
- @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
- @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
- }
-}
-
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
- }
-}
-
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
-}
-
-@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
- .row-fluid {
- width: 100%;
- @include clearfix();
- [class*="span"] {
- @include input-block-level();
- float: left;
- margin-left: $fluidGridGutterWidth;
- *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
- }
-
- [class*="span"]:nth-of-type(1) {
- margin-left: 0px;
- }
-
- [class*="span"]:first-child {
- margin-left: 0px;
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $fluidGridGutterWidth;
- }
-
- // generate .spanX and .offsetX
- @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
- }
-}
-
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- }
-}
-
-@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- .offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
- }
-}
-
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
- *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
- *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: $gridGutterWidth;
- }
-
- // generate .spanX
- @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @for $i from 1 through $gridColumns {
- input.span#{$i},
- textarea.span#{$i},
- .uneditable-input.span#{$i} {
- @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
- }
- }
-}
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
-
-@mixin active-navbar-link-arrow($navbar-height: 40px) {
- $default-position: -6px;
- $default-navbar-height: 40px;
- top: ((($navbar-height - $default-navbar-height) / 5) * -3) + $default-position;
-}
-
@mixin touch-callout {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
@@ -278,6 +168,33 @@
.icon-stack-base {
font-size: $base-font-size;
*line-height: #{$height / $base-font-size}em;
}
}
+}
+
+@mixin build-column-grids($columns: 12) {
+ $unit-width: (100 / $columns);
+ $column-factor: 0.1833;
+
+
+ @for $i from 1 through $columns {
+ .col-#{$i} {
+ $current-width: ($unit-width * $i) - $column-factor;
+ width: percentage($current-width / 100);
+ margin-left: percentage($column-factor / 100);
+ }
+ }
+
+}
+
+@mixin backface-visibility($property: hidden) {
+ -webkit-backface-visibility: $property;
+ -moz-backface-visibility: $property;
+ backface-visibility: $property;
+}
+
+@mixin perspective($value: 1300px) {
+ -webkit-perspective: $value;
+ -moz-perspective: $value;
+ perspective: $value;
}