Merge pull request #24 from amzrk2/dev

v2 pre-release

1 files changed, 87 insertions, 0 deletions

diff --git a/assets/scss/_primer/utilities/layout.scss b/assets/scss/_primer/utilities/layout.scss
new file mode 100644
index 0000000..1b4da95
--- /dev/null
+++ b/assets/scss/_primer/utilities/layout.scss
@@ -0,0 +1,87 @@
+// Layout
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
+
+// Loop through the breakpoint values
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $position in $responsive-positions {
+      .position#{$variant}-#{$position} {
+        position: $position !important;
+      }
+    }
+  }
+}
+
+/* Set top 0 */
+.top-0    { top: 0 !important; }
+/* Set right 0 */
+.right-0  { right: 0 !important; }
+/* Set bottom 0 */
+.bottom-0 { bottom: 0 !important; }
+/* Set left 0 */
+.left-0   { left: 0 !important; }
+
+/* Vertical align middle */
+.v-align-middle      { vertical-align: middle !important; }
+/* Vertical align top */
+.v-align-top         { vertical-align: top !important; }
+/* Vertical align bottom */
+.v-align-bottom      { vertical-align: bottom !important; }
+/* Vertical align to the top of the text */
+.v-align-text-top    { vertical-align: text-top !important; }
+/* Vertical align to the bottom of the text */
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+/* Vertical align to the parent's baseline */
+.v-align-baseline    { vertical-align: baseline !important; }
+
+// Overflow utilities
+@each $overflow in (visible, hidden, auto, scroll) {
+  .overflow-#{$overflow} { overflow: $overflow !important; }
+  .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
+  .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
+}
+
+// Clear floats
+/* Clear floats around the element */
+.clearfix {
+  @include clearfix;
+}
+
+// Floats
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Float to the left */
+    .float#{$variant}-left  { float: left !important; }
+    /* Float to the right */
+    .float#{$variant}-right  { float: right !important; }
+    /* No float */
+    .float#{$variant}-none { float: none !important; }
+  }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+/* Max width 100% */
+.width-fit   { max-width: 100% !important; }
+/* Set the width to 100% */
+.width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
+/* Set the height to 100% */
+.height-full { height: 100% !important; }
+
+/* Remove min-width from element */
+.min-width-0 { min-width: 0 !important; }
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+
+    // Auto varients
+    .width#{$variant}-auto { width: auto !important; }
+
+    /* Set the direction to rtl */
+    .direction#{$variant}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr */
+    .direction#{$variant}-ltr { direction: ltr !important; }
+  }
+}