suitcss-rails 1.0.0

data/app/assets/stylesheets/suitcss/utils/display.css

@@ -0,0 +1,53 @@
+/**
+ * @define utilities
+ * Display-type utilities
+ */
+
+.u-block {
+    display: block !important;
+}
+
+.u-hidden {
+    display: none !important;
+}
+
+/**
+ * Completely remove from the flow but leave available to screen readers.
+ */
+
+.u-hiddenVisually {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+}
+
+.u-inline {
+    display: inline !important;
+}
+
+/**
+ * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
+ * inline-block will display at its default size, and not limit its width to
+ * 100% of an ancestral container.
+ */
+
+.u-inlineBlock {
+    display: inline-block !important;
+    max-width: 100%; /* 1 */
+}
+
+.u-table {
+    display: table !important;
+}
+
+.u-tableCell {
+    display: table-cell !important;
+}
+
+.u-tableRow {
+    display: table-row !important;
+}

data/app/assets/stylesheets/suitcss/utils/flex.css

@@ -0,0 +1,4 @@
+@import "flex/index";
+@import "flex/sm";
+@import "flex/md";
+@import "flex/lg";

data/app/assets/stylesheets/suitcss/utils/flex/index.css

@@ -0,0 +1,253 @@
+/** @define utilities */
+
+/* Applies to flex container
+   ========================================================================== */
+
+/**
+ * Container
+ */
+
+.u-flex {
+    display: flex !important;
+}
+
+.u-flexInline {
+    display: inline-flex !important;
+}
+
+/**
+ * Direction: row
+ */
+
+.u-flexRow {
+    flex-direction: row !important;
+}
+
+.u-flexRowReverse {
+    flex-direction: row-reverse !important;
+}
+
+/**
+ * Direction: column
+ */
+
+.u-flexCol {
+    flex-direction: column !important;
+}
+
+.u-flexColReverse {
+    flex-direction: column-reverse !important;
+}
+
+/**
+ * Wrap
+ */
+
+.u-flexWrap {
+    flex-wrap: wrap !important;
+}
+
+.u-flexNoWrap {
+    flex-wrap: nowrap !important;
+}
+
+.u-flexWrapReverse {
+    flex-wrap: wrap-reverse !important;
+}
+
+/**
+ * Align items along the main axis of the current line of the flex container
+ */
+
+.u-flexJustifyStart {
+    justify-content: flex-start !important;
+}
+
+.u-flexJustifyEnd {
+    justify-content: flex-end !important;
+}
+
+.u-flexJustifyCenter {
+    justify-content: center !important;
+}
+
+.u-flexJustifyBetween {
+    justify-content: space-between !important;
+}
+
+.u-flexJustifyAround {
+    justify-content: space-around !important;
+}
+
+/**
+ * Align items in the cross axis of the current line of the flex container
+ * Similar to `justify-content` but in the perpendicular direction
+ */
+
+.u-flexAlignItemsStart {
+    align-items: flex-start !important;
+}
+
+.u-flexAlignItemsEnd {
+    align-items: flex-end !important;
+}
+
+.u-flexAlignItemsCenter {
+    align-items: center !important;
+}
+
+.u-flexAlignItemsStretch {
+    align-items: stretch !important;
+}
+
+.u-flexAlignItemsBaseline {
+    align-items: baseline !important;
+}
+
+/**
+ * Aligns items within the flex container when there is extra
+ * space in the cross-axis
+ *
+ * Has no effect when there is only one line of flex items.
+ */
+
+.u-flexAlignContentStart {
+    align-content: flex-start !important;
+}
+
+.u-flexAlignContentEnd {
+    align-content: flex-end !important;
+}
+
+.u-flexAlignContentCenter {
+    align-content: center !important;
+}
+
+.u-flexAlignContentStretch {
+    align-content: stretch !important;
+}
+
+.u-flexAlignContentBetween {
+    align-content: space-between !important;
+}
+
+.u-flexAlignContentAround {
+    align-content: space-around !important;
+}
+
+/**
+ * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
+ */
+
+/* postcss-bem-linter: ignore */
+
+.u-flex > *,
+.u-flexInline > * {
+    flex-shrink: 1; /* 1 */
+}
+
+/* Applies to flex items
+   ========================================================================== */
+
+/**
+ * Override default alignment of single item when specified by `align-items`
+ */
+
+.u-flexAlignSelfStart {
+    align-self: flex-start !important;
+}
+
+.u-flexAlignSelfEnd {
+    align-self: flex-end !important;
+}
+
+.u-flexAlignSelfCenter {
+    align-self: center !important;
+}
+
+.u-flexAlignSelfStretch {
+    align-self: stretch !important;
+}
+
+.u-flexAlignSelfBaseline {
+    align-self: baseline !important;
+}
+
+.u-flexAlignSelfAuto {
+    align-self: auto !important;
+}
+
+/**
+ * Change order without editing underlying HTML
+ */
+
+.u-flexOrderFirst {
+    order: -1 !important;
+}
+
+.u-flexOrderLast {
+    order: 1 !important;
+}
+
+.u-flexOrderNone {
+    order: 0 !important;
+}
+
+/**
+ * Specify the flex grow factor, which determines how much the flex item will
+ * grow relative to the rest of the flex items in the flex container.
+ *
+ * Supports 1-5 proportions
+ *
+ * 1. Provide all values to avoid IE10 bug with shorthand flex
+ *    - http://git.io/vllC7
+ *
+ *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
+ *    instead of `auto` as this matches what the default would be with `flex`
+ *    shorthand - http://git.io/vllWx
+ */
+
+.u-flexGrow1 {
+    flex: 1 1 0% !important; /* 1 */
+}
+
+.u-flexGrow2 {
+    flex: 2 1 0% !important;
+}
+
+.u-flexGrow3 {
+    flex: 3 1 0% !important;
+}
+
+.u-flexGrow4 {
+    flex: 4 1 0% !important;
+}
+
+.u-flexGrow5 {
+    flex: 5 1 0% !important;
+}
+
+/**
+ * Aligning with `auto` margins
+ * http://www.w3.org/TR/css-flexbox-1/#auto-margins
+ */
+
+.u-flexExpand {
+    margin: auto !important;
+}
+
+.u-flexExpandLeft {
+    margin-left: auto !important;
+}
+
+.u-flexExpandRight {
+    margin-right: auto !important;
+}
+
+.u-flexExpandTop {
+    margin-top: auto !important;
+}
+
+.u-flexExpandBottom {
+    margin-bottom: auto !important;
+}

data/app/assets/stylesheets/suitcss/utils/flex/lg.css

@@ -0,0 +1,259 @@
+/**
+ * @define utilities
+ * Size: breakpoint 1 (large)
+ */
+
+@media (--lg-viewport) {
+
+    /* Applies to flex container
+       ======================================================================== */
+
+    /**
+     * Container
+     */
+
+    .u-lg-flex {
+        display: flex !important;
+    }
+
+    .u-lg-flexInline {
+        display: inline-flex !important;
+    }
+
+    /**
+     * Direction: row
+     */
+
+    .u-lg-flexRow {
+        flex-direction: row !important;
+    }
+
+    .u-lg-flexRowReverse {
+        flex-direction: row-reverse !important;
+    }
+
+    /**
+     * Direction: column
+     */
+
+    .u-lg-flexCol {
+        flex-direction: column !important;
+    }
+
+    .u-lg-flexColReverse {
+        flex-direction: column-reverse !important;
+    }
+
+    /**
+     * Wrap
+     */
+
+    .u-lg-flexWrap {
+        flex-wrap: wrap !important;
+    }
+
+    .u-lg-flexNoWrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .u-lg-flexWrapReverse {
+        flex-wrap: wrap-reverse !important;
+    }
+
+    /**
+     * Align items along the main axis of the current line of the flex container
+     */
+
+    .u-lg-flexJustifyStart {
+        justify-content: flex-start !important;
+    }
+
+    .u-lg-flexJustifyEnd {
+        justify-content: flex-end !important;
+    }
+
+    .u-lg-flexJustifyCenter {
+        justify-content: center !important;
+    }
+
+    .u-lg-flexJustifyBetween {
+        justify-content: space-between !important;
+    }
+
+    .u-lg-flexJustifyAround {
+        justify-content: space-around !important;
+    }
+
+    /**
+     * Align items in the cross axis of the current line of the flex container
+     * Similar to `justify-content` but in the perpendicular direction
+     */
+
+    .u-lg-flexAlignItemsStart {
+        align-items: flex-start !important;
+    }
+
+    .u-lg-flexAlignItemsEnd {
+        align-items: flex-end !important;
+    }
+
+    .u-lg-flexAlignItemsCenter {
+        align-items: center !important;
+    }
+
+    .u-lg-flexAlignItemsStretch {
+        align-items: stretch !important;
+    }
+
+    .u-lg-flexAlignItemsBaseline {
+        align-items: baseline !important;
+    }
+
+    /**
+     * Aligns items within the flex container when there is extra
+     * space in the cross-axis
+     *
+     * Has no effect when there is only one line of flex items.
+     */
+
+    .u-lg-flexAlignContentStart {
+        align-content: flex-start !important;
+    }
+
+    .u-lg-flexAlignContentEnd {
+        align-content: flex-end !important;
+    }
+
+    .u-lg-flexAlignContentCenter {
+        align-content: center !important;
+    }
+
+    .u-lg-flexAlignContentStretch {
+        align-content: stretch !important;
+    }
+
+    .u-lg-flexAlignContentBetween {
+        align-content: space-between !important;
+    }
+
+    .u-lg-flexAlignContentAround {
+        align-content: space-around !important;
+    }
+
+    /**
+     * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
+     */
+
+    /* postcss-bem-linter: ignore */
+
+    .u-lg-flex > *,
+    .u-lg-flexInline > * {
+        flex-shrink: 1; /* 1 */
+    }
+
+    /* Applies to flex items
+       ======================================================================== */
+
+    /**
+     * Override default alignment of single item when specified by `align-items`
+     */
+
+    .u-lg-flexAlignSelfStart {
+        align-self: flex-start !important;
+    }
+
+    .u-lg-flexAlignSelfEnd {
+        align-self: flex-end !important;
+    }
+
+    .u-lg-flexAlignSelfCenter {
+        align-self: center !important;
+    }
+
+    .u-lg-flexAlignSelfStretch {
+        align-self: stretch !important;
+    }
+
+    .u-lg-flexAlignSelfBaseline {
+        align-self: baseline !important;
+    }
+
+    .u-lg-flexAlignSelfAuto {
+        align-self: auto !important;
+    }
+
+    /**
+     * Change order without editing underlying HTML
+     */
+
+    .u-lg-flexOrderFirst {
+        order: -1 !important;
+    }
+
+    .u-lg-flexOrderLast {
+        order: 1 !important;
+    }
+
+    .u-lg-flexOrderNone {
+        order: 0 !important;
+    }
+
+    /**
+     * Specify the flex grow factor, which determines how much the flex item will
+     * grow relative to the rest of the flex items in the flex container.
+     *
+     * Supports 1-5 proportions
+     *
+     * 1. Provide all values to avoid IE10 bug with shorthand flex
+     *    http://git.io/vllC7
+     *
+     *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
+     *    http://git.io/vllWx
+     */
+
+    .u-lg-flexGrow1 {
+        flex: 1 1 0% !important; /* 1 */
+    }
+
+    .u-lg-flexGrow2 {
+        flex: 2 1 0% !important;
+    }
+
+    .u-lg-flexGrow3 {
+        flex: 3 1 0% !important;
+    }
+
+    .u-lg-flexGrow4 {
+        flex: 4 1 0% !important;
+    }
+
+    .u-lg-flexGrow5 {
+        flex: 5 1 0% !important;
+    }
+
+    /**
+     * Aligning with `auto` margins
+     * http://www.w3.org/TR/css-flexbox-1/#auto-margins
+     */
+
+    .u-lg-flexExpand {
+        margin: auto !important;
+    }
+
+    .u-lg-flexExpandLeft {
+        margin-left: auto !important;
+    }
+
+    .u-lg-flexExpandRight {
+        margin-right: auto !important;
+    }
+
+    .u-lg-flexExpandTop {
+        margin-top: auto !important;
+    }
+
+    .u-lg-flexExpandBottom {
+        margin-bottom: auto !important;
+    }
+
+}