lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/sldsUtilsSizing/sldsUtilsSizing.css

@@ -0,0 +1,1408 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/**
+ * Notes:
+ * - Some of the selectors available in SLDS were not included here, because they are unused in LBC
+ * - :host() is needed for `layout` and `layout-item` because classes are applied to the host element.
+ */
+
+/* Size + Order */
+
+.slds-size_xxx-small,
+:host(.slds-size_xxx-small) {
+    width: 3rem;
+}
+
+.slds-size_xx-small,
+:host(.slds-size_xx-small) {
+    width: 6rem;
+}
+
+.slds-size_x-small,
+:host(.slds-size_x-small) {
+    width: 12rem;
+}
+
+.slds-size_small,
+:host(.slds-size_small) {
+    width: 15rem;
+}
+
+.slds-size_medium,
+:host(.slds-size_medium) {
+    width: 20rem;
+}
+
+.slds-size_large,
+:host(.slds-size_large) {
+    width: 25rem;
+}
+
+.slds-size_x-large,
+:host(.slds-size_x-large) {
+    width: 40rem;
+}
+
+.slds-size_xx-large,
+:host(.slds-size_xx-large) {
+    width: 60rem;
+}
+
+.slds-size_full,
+:host(.slds-size_full) {
+    width: 100%;
+}
+
+.slds-size_1-of-1,
+:host(.slds-size_1-of-1) {
+    width: 100%;
+}
+
+.slds-size_1-of-2,
+:host(.slds-size_1-of-2) {
+    width: 50%;
+}
+
+.slds-size_2-of-2,
+:host(.slds-size_2-of-2) {
+    width: 100%;
+}
+
+.slds-size_1-of-3,
+:host(.slds-size_1-of-3) {
+    width: 33.3333333333%;
+}
+
+.slds-size_2-of-3,
+:host(.slds-size_2-of-3) {
+    width: 66.6666666667%;
+}
+
+.slds-size_3-of-3,
+:host(.slds-size_3-of-3) {
+    width: 100%;
+}
+
+.slds-size_1-of-4,
+:host(.slds-size_1-of-4) {
+    width: 25%;
+}
+
+.slds-size_2-of-4,
+:host(.slds-size_2-of-4) {
+    width: 50%;
+}
+
+.slds-size_3-of-4,
+:host(.slds-size_3-of-4) {
+    width: 75%;
+}
+
+.slds-size_4-of-4,
+:host(.slds-size_4-of-4) {
+    width: 100%;
+}
+
+.slds-size_1-of-5,
+:host(.slds-size_1-of-5) {
+    width: 20%;
+}
+
+.slds-size_2-of-5,
+:host(.slds-size_2-of-5) {
+    width: 40%;
+}
+
+.slds-size_3-of-5,
+:host(.slds-size_3-of-5) {
+    width: 60%;
+}
+
+.slds-size_4-of-5,
+:host(.slds-size_4-of-5) {
+    width: 80%;
+}
+
+.slds-size_5-of-5,
+:host(.slds-size_5-of-5) {
+    width: 100%;
+}
+
+.slds-size_1-of-6,
+:host(.slds-size_1-of-6) {
+    width: 16.6666666667%;
+}
+
+.slds-size_2-of-6,
+:host(.slds-size_2-of-6) {
+    width: 33.3333333333%;
+}
+
+.slds-size_3-of-6,
+:host(.slds-size_3-of-6) {
+    width: 50%;
+}
+
+.slds-size_4-of-6,
+:host(.slds-size_4-of-6) {
+    width: 66.6666666667%;
+}
+
+.slds-size_5-of-6,
+:host(.slds-size_5-of-6) {
+    width: 83.3333333333%;
+}
+
+.slds-size_6-of-6,
+:host(.slds-size_6-of-6) {
+    width: 100%;
+}
+
+.slds-size_1-of-7,
+:host(.slds-size_1-of-7) {
+    width: 14.2857142857%;
+}
+
+.slds-size_2-of-7,
+:host(.slds-size_2-of-7) {
+    width: 28.5714285714%;
+}
+
+.slds-size_3-of-7,
+:host(.slds-size_3-of-7) {
+    width: 42.8571428571%;
+}
+
+.slds-size_4-of-7,
+:host(.slds-size_4-of-7) {
+    width: 57.1428571429%;
+}
+
+.slds-size_5-of-7,
+:host(.slds-size_5-of-7) {
+    width: 71.4285714286%;
+}
+
+.slds-size_6-of-7,
+:host(.slds-size_6-of-7) {
+    width: 85.7142857143%;
+}
+
+.slds-size_7-of-7,
+:host(.slds-size_7-of-7) {
+    width: 100%;
+}
+
+.slds-size_1-of-8,
+:host(.slds-size_1-of-8) {
+    width: 12.5%;
+}
+
+.slds-size_2-of-8,
+:host(.slds-size_2-of-8) {
+    width: 25%;
+}
+
+.slds-size_3-of-8,
+:host(.slds-size_3-of-8) {
+    width: 37.5%;
+}
+
+.slds-size_4-of-8,
+:host(.slds-size_4-of-8) {
+    width: 50%;
+}
+
+.slds-size_5-of-8,
+:host(.slds-size_5-of-8) {
+    width: 62.5%;
+}
+
+.slds-size_6-of-8,
+:host(.slds-size_6-of-8) {
+    width: 75%;
+}
+
+.slds-size_7-of-8,
+:host(.slds-size_7-of-8) {
+    width: 87.5%;
+}
+
+.slds-size_8-of-8,
+:host(.slds-size_8-of-8) {
+    width: 100%;
+}
+
+.slds-size_1-of-12,
+:host(.slds-size_1-of-12) {
+    width: 8.3333333333%;
+}
+
+.slds-size_2-of-12,
+:host(.slds-size_2-of-12) {
+    width: 16.6666666667%;
+}
+
+.slds-size_3-of-12,
+:host(.slds-size_3-of-12) {
+    width: 25%;
+}
+
+.slds-size_4-of-12,
+:host(.slds-size_4-of-12) {
+    width: 33.3333333333%;
+}
+
+.slds-size_5-of-12,
+:host(.slds-size_5-of-12) {
+    width: 41.6666666667%;
+}
+
+.slds-size_6-of-12,
+:host(.slds-size_6-of-12) {
+    width: 50%;
+}
+
+.slds-size_7-of-12,
+:host(.slds-size_7-of-12) {
+    width: 58.3333333333%;
+}
+
+.slds-size_8-of-12,
+:host(.slds-size_8-of-12) {
+    width: 66.6666666667%;
+}
+
+.slds-size_9-of-12,
+:host(.slds-size_9-of-12) {
+    width: 75%;
+}
+
+.slds-size_10-of-12,
+:host(.slds-size_10-of-12) {
+    width: 83.3333333333%;
+}
+
+.slds-size_11-of-12,
+:host(.slds-size_11-of-12) {
+    width: 91.6666666667%;
+}
+
+.slds-size_12-of-12,
+:host(.slds-size_12-of-12) {
+    width: 100%;
+}
+
+.slds-order_1,
+:host(.slds-order_1) {
+    order: 1;
+}
+
+.slds-order_2,
+:host(.slds-order_2) {
+    order: 2;
+}
+
+.slds-order_3,
+:host(.slds-order_3) {
+    order: 3;
+}
+
+.slds-order_4,
+:host(.slds-order_4) {
+    order: 4;
+}
+
+.slds-order_5,
+:host(.slds-order_5) {
+    order: 5;
+}
+
+.slds-order_6,
+:host(.slds-order_6) {
+    order: 6;
+}
+
+.slds-order_7,
+:host(.slds-order_7) {
+    order: 7;
+}
+
+.slds-order_8,
+:host(.slds-order_8) {
+    order: 8;
+}
+
+.slds-order_9,
+:host(.slds-order_9) {
+    order: 9;
+}
+
+.slds-order_10,
+:host(.slds-order_10) {
+    order: 10;
+}
+
+.slds-order_11,
+:host(.slds-order_11) {
+    order: 11;
+}
+
+.slds-order_12,
+:host(.slds-order_12) {
+    order: 12;
+}
+
+/* Size Small + Order */
+
+@media (min-width: 30em) {
+
+    [class*=slds-small-size_],
+    :host([class*=slds-small-size_]) {
+        flex: none;
+    }
+
+    .slds-small-size_xxx-small,
+    :host(.slds-small-size_xxx-small) {
+        width: 3rem;
+    }
+
+    .slds-small-size_xx-small,
+    :host(.slds-small-size_xx-small) {
+        width: 6rem;
+    }
+
+    .slds-small-size_x-small,
+    :host(.slds-small-size_x-small) {
+        width: 12rem;
+    }
+
+    .slds-small-size_small,
+    :host(.slds-small-size_small) {
+        width: 15rem;
+    }
+
+    .slds-small-size_medium,
+    :host(.slds-small-size_medium) {
+        width: 20rem;
+    }
+
+    .slds-small-size_large,
+    :host(.slds-small-size_large) {
+        width: 25rem;
+    }
+
+    .slds-small-size_x-large,
+    :host(.slds-small-size_x-large) {
+        width: 40rem;
+    }
+
+    .slds-small-size_xx-large,
+    :host(.slds-small-size_xx-large) {
+        width: 60rem;
+    }
+
+    .slds-small-size_1-of-1,
+    :host(.slds-small-size_1-of-1) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-2,
+    :host(.slds-small-size_1-of-2) {
+        width: 50%;
+    }
+
+    .slds-small-size_2-of-2,
+    :host(.slds-small-size_2-of-2) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-3,
+    :host(.slds-small-size_1-of-3) {
+        width: 33.3333333333%;
+    }
+
+    .slds-small-size_2-of-3,
+    :host(.slds-small-size_2-of-3) {
+        width: 66.6666666667%;
+    }
+
+    .slds-small-size_3-of-3,
+    :host(.slds-small-size_3-of-3) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-4,
+    :host(.slds-small-size_1-of-4) {
+        width: 25%;
+    }
+
+    .slds-small-size_2-of-4,
+    :host(.slds-small-size_2-of-4) {
+        width: 50%;
+    }
+
+    .slds-small-size_3-of-4,
+    :host(.slds-small-size_3-of-4) {
+        width: 75%;
+    }
+
+    .slds-small-size_4-of-4,
+    :host(.slds-small-size_4-of-4) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-5,
+    :host(.slds-small-size_1-of-5) {
+        width: 20%;
+    }
+
+    .slds-small-size_2-of-5,
+    :host(.slds-small-size_2-of-5) {
+        width: 40%;
+    }
+
+    .slds-small-size_3-of-5,
+    :host(.slds-small-size_3-of-5) {
+        width: 60%;
+    }
+
+    .slds-small-size_4-of-5,
+    :host(.slds-small-size_4-of-5) {
+        width: 80%;
+    }
+
+    .slds-small-size_5-of-5,
+    :host(.slds-small-size_5-of-5) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-6,
+    :host(.slds-small-size_1-of-6) {
+        width: 16.6666666667%;
+    }
+
+    .slds-small-size_2-of-6,
+    :host(.slds-small-size_2-of-6) {
+        width: 33.3333333333%;
+    }
+
+    .slds-small-size_3-of-6,
+    :host(.slds-small-size_3-of-6) {
+        width: 50%;
+    }
+
+    .slds-small-size_4-of-6,
+    :host(.slds-small-size_4-of-6) {
+        width: 66.6666666667%;
+    }
+
+    .slds-small-size_5-of-6,
+    :host(.slds-small-size_5-of-6) {
+        width: 83.3333333333%;
+    }
+
+    .slds-small-size_6-of-6,
+    :host(.slds-small-size_6-of-6) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-7,
+    :host(.slds-small-size_1-of-7) {
+        width: 14.2857142857%;
+    }
+
+    .slds-small-size_2-of-7,
+    :host(.slds-small-size_2-of-7) {
+        width: 28.5714285714%;
+    }
+
+    .slds-small-size_3-of-7,
+    :host(.slds-small-size_3-of-7) {
+        width: 42.8571428571%;
+    }
+
+    .slds-small-size_4-of-7,
+    :host(.slds-small-size_4-of-7) {
+        width: 57.1428571429%;
+    }
+
+    .slds-small-size_5-of-7,
+    :host(.slds-small-size_5-of-7) {
+        width: 71.4285714286%;
+    }
+
+    .slds-small-size_6-of-7,
+    :host(.slds-small-size_6-of-7) {
+        width: 85.7142857143%;
+    }
+
+    .slds-small-size_7-of-7,
+    :host(.slds-small-size_7-of-7) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-8,
+    :host(.slds-small-size_1-of-8) {
+        width: 12.5%;
+    }
+
+    .slds-small-size_2-of-8,
+    :host(.slds-small-size_2-of-8) {
+        width: 25%;
+    }
+
+    .slds-small-size_3-of-8,
+    :host(.slds-small-size_3-of-8) {
+        width: 37.5%;
+    }
+
+    .slds-small-size_4-of-8,
+    :host(.slds-small-size_4-of-8) {
+        width: 50%;
+    }
+
+    .slds-small-size_5-of-8,
+    :host(.slds-small-size_5-of-8) {
+        width: 62.5%;
+    }
+
+    .slds-small-size_6-of-8,
+    :host(.slds-small-size_6-of-8) {
+        width: 75%;
+    }
+
+    .slds-small-size_7-of-8,
+    :host(.slds-small-size_7-of-8) {
+        width: 87.5%;
+    }
+
+    .slds-small-size_8-of-8,
+    :host(.slds-small-size_8-of-8) {
+        width: 100%;
+    }
+
+    .slds-small-size_1-of-12,
+    :host(.slds-small-size_1-of-12) {
+        width: 8.3333333333%;
+    }
+
+    .slds-small-size_2-of-12,
+    :host(.slds-small-size_2-of-12) {
+        width: 16.6666666667%;
+    }
+
+    .slds-small-size_3-of-12,
+    :host(.slds-small-size_3-of-12) {
+        width: 25%;
+    }
+
+    .slds-small-size_4-of-12,
+    :host(.slds-small-size_4-of-12) {
+        width: 33.3333333333%;
+    }
+
+    .slds-small-size_5-of-12,
+    :host(.slds-small-size_5-of-12) {
+        width: 41.6666666667%;
+    }
+
+    .slds-small-size_6-of-12,
+    :host(.slds-small-size_6-of-12) {
+        width: 50%;
+    }
+
+    .slds-small-size_7-of-12,
+    :host(.slds-small-size_7-of-12) {
+        width: 58.3333333333%;
+    }
+
+    .slds-small-size_8-of-12,
+    :host(.slds-small-size_8-of-12) {
+        width: 66.6666666667%;
+    }
+
+    .slds-small-size_9-of-12,
+    :host(.slds-small-size_9-of-12) {
+        width: 75%;
+    }
+
+    .slds-small-size_10-of-12,
+    :host(.slds-small-size_10-of-12) {
+        width: 83.3333333333%;
+    }
+
+    .slds-small-size_11-of-12,
+    :host(.slds-small-size_11-of-12) {
+        width: 91.6666666667%;
+    }
+
+    .slds-small-size_12-of-12,
+    :host(.slds-small-size_12-of-12) {
+        width: 100%;
+    }
+
+    .slds-small-order_1,
+    :host(.slds-small-order_1) {
+        order: 1;
+    }
+
+    .slds-small-order_2,
+    :host(.slds-small-order_2) {
+        order: 2;
+    }
+
+    .slds-small-order_3,
+    :host(.slds-small-order_3) {
+        order: 3;
+    }
+
+    .slds-small-order_4,
+    :host(.slds-small-order_4) {
+        order: 4;
+    }
+
+    .slds-small-order_5,
+    :host(.slds-small-order_5) {
+        order: 5;
+    }
+
+    .slds-small-order_6,
+    :host(.slds-small-order_6) {
+        order: 6;
+    }
+
+    .slds-small-order_7,
+    :host(.slds-small-order_7) {
+        order: 7;
+    }
+
+    .slds-small-order_8,
+    :host(.slds-small-order_8) {
+        order: 8;
+    }
+
+    .slds-small-order_9,
+    :host(.slds-small-order_9) {
+        order: 9;
+    }
+
+    .slds-small-order_10,
+    :host(.slds-small-order_10) {
+        order: 10;
+    }
+
+    .slds-small-order_11,
+    :host(.slds-small-order_11) {
+        order: 11;
+    }
+
+    .slds-small-order_12,
+    :host(.slds-small-order_12) {
+        order: 12;
+    }
+
+}
+
+/* Size Medium + Order */
+
+@media (min-width: 48em) {
+
+    [class*=slds-medium-size_],
+    :host([class*=slds-medium-size_]) {
+        flex: none;
+    }
+
+    .slds-medium-size_xxx-small,
+    :host(.slds-medium-size_xxx-small) {
+        width: 3rem;
+    }
+
+    .slds-medium-size_xx-small,
+    :host(.slds-medium-size_xx-small) {
+        width: 6rem;
+    }
+
+    .slds-medium-size_x-small,
+    :host(.slds-medium-size_x-small) {
+        width: 12rem;
+    }
+
+    .slds-medium-size_small,
+    :host(.slds-medium-size_small) {
+        width: 15rem;
+    }
+
+    .slds-medium-size_medium,
+    :host(.slds-medium-size_medium) {
+        width: 20rem;
+    }
+
+    .slds-medium-size_large,
+    :host(.slds-medium-size_large) {
+        width: 25rem;
+    }
+
+    .slds-medium-size_x-large,
+    :host(.slds-medium-size_x-large) {
+        width: 40rem;
+    }
+
+    .slds-medium-size_xx-large,
+    :host(.slds-medium-size_xx-large) {
+        width: 60rem;
+    }
+
+    .slds-medium-size_1-of-1,
+    :host(.slds-medium-size_1-of-1) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-2,
+    :host(.slds-medium-size_1-of-2) {
+        width: 50%;
+    }
+
+    .slds-medium-size_2-of-2,
+    :host(.slds-medium-size_2-of-2) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-3,
+    :host(.slds-medium-size_1-of-3) {
+        width: 33.3333333333%;
+    }
+
+    .slds-medium-size_2-of-3,
+    :host(.slds-medium-size_2-of-3) {
+        width: 66.6666666667%;
+    }
+
+    .slds-medium-size_3-of-3,
+    :host(.slds-medium-size_3-of-3) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-4,
+    :host(.slds-medium-size_1-of-4) {
+        width: 25%;
+    }
+
+    .slds-medium-size_2-of-4,
+    :host(.slds-medium-size_2-of-4) {
+        width: 50%;
+    }
+
+    .slds-medium-size_3-of-4,
+    :host(.slds-medium-size_3-of-4) {
+        width: 75%;
+    }
+
+    .slds-medium-size_4-of-4,
+    :host(.slds-medium-size_4-of-4) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-5,
+    :host(.slds-medium-size_1-of-5) {
+        width: 20%;
+    }
+
+    .slds-medium-size_2-of-5,
+    :host(.slds-medium-size_2-of-5) {
+        width: 40%;
+    }
+
+    .slds-medium-size_3-of-5,
+    :host(.slds-medium-size_3-of-5) {
+        width: 60%;
+    }
+
+    .slds-medium-size_4-of-5,
+    :host(.slds-medium-size_4-of-5) {
+        width: 80%;
+    }
+
+    .slds-medium-size_5-of-5,
+    :host(.slds-medium-size_5-of-5) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-6,
+    :host(.slds-medium-size_1-of-6) {
+        width: 16.6666666667%;
+    }
+
+    .slds-medium-size_2-of-6,
+    :host(.slds-medium-size_2-of-6) {
+        width: 33.3333333333%;
+    }
+
+    .slds-medium-size_3-of-6,
+    :host(.slds-medium-size_3-of-6) {
+        width: 50%;
+    }
+
+    .slds-medium-size_4-of-6,
+    :host(.slds-medium-size_4-of-6) {
+        width: 66.6666666667%;
+    }
+
+    .slds-medium-size_5-of-6,
+    :host(.slds-medium-size_5-of-6) {
+        width: 83.3333333333%;
+    }
+
+    .slds-medium-size_6-of-6,
+    :host(.slds-medium-size_6-of-6) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-7,
+    :host(.slds-medium-size_1-of-7) {
+        width: 14.2857142857%;
+    }
+
+    .slds-medium-size_2-of-7,
+    :host(.slds-medium-size_2-of-7) {
+        width: 28.5714285714%;
+    }
+
+    .slds-medium-size_3-of-7,
+    :host(.slds-medium-size_3-of-7) {
+        width: 42.8571428571%;
+    }
+
+    .slds-medium-size_4-of-7,
+    :host(.slds-medium-size_4-of-7) {
+        width: 57.1428571429%;
+    }
+
+    .slds-medium-size_5-of-7,
+    :host(.slds-medium-size_5-of-7) {
+        width: 71.4285714286%;
+    }
+
+    .slds-medium-size_6-of-7,
+    :host(.slds-medium-size_6-of-7) {
+        width: 85.7142857143%;
+    }
+
+    .slds-medium-size_7-of-7,
+    :host(.slds-medium-size_7-of-7) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-8,
+    :host(.slds-medium-size_1-of-8) {
+        width: 12.5%;
+    }
+
+    .slds-medium-size_2-of-8,
+    :host(.slds-medium-size_2-of-8) {
+        width: 25%;
+    }
+
+    .slds-medium-size_3-of-8,
+    :host(.slds-medium-size_3-of-8) {
+        width: 37.5%;
+    }
+
+    .slds-medium-size_4-of-8,
+    :host(.slds-medium-size_4-of-8) {
+        width: 50%;
+    }
+
+    .slds-medium-size_5-of-8,
+    :host(.slds-medium-size_5-of-8) {
+        width: 62.5%;
+    }
+
+    .slds-medium-size_6-of-8,
+    :host(.slds-medium-size_6-of-8) {
+        width: 75%;
+    }
+
+    .slds-medium-size_7-of-8,
+    :host(.slds-medium-size_7-of-8) {
+        width: 87.5%;
+    }
+
+    .slds-medium-size_8-of-8,
+    :host(.slds-medium-size_8-of-8) {
+        width: 100%;
+    }
+
+    .slds-medium-size_1-of-12,
+    :host(.slds-medium-size_1-of-12) {
+        width: 8.3333333333%;
+    }
+
+    .slds-medium-size_2-of-12,
+    :host(.slds-medium-size_2-of-12) {
+        width: 16.6666666667%;
+    }
+
+    .slds-medium-size_3-of-12,
+    :host(.slds-medium-size_3-of-12) {
+        width: 25%;
+    }
+
+    .slds-medium-size_4-of-12,
+    :host(.slds-medium-size_4-of-12) {
+        width: 33.3333333333%;
+    }
+
+    .slds-medium-size_5-of-12,
+    :host(.slds-medium-size_5-of-12) {
+        width: 41.6666666667%;
+    }
+
+    .slds-medium-size_6-of-12,
+    :host(.slds-medium-size_6-of-12) {
+        width: 50%;
+    }
+
+    .slds-medium-size_7-of-12,
+    :host(.slds-medium-size_7-of-12) {
+        width: 58.3333333333%;
+    }
+
+    .slds-medium-size_8-of-12,
+    :host(.slds-medium-size_8-of-12) {
+        width: 66.6666666667%;
+    }
+
+    .slds-medium-size_9-of-12,
+    :host(.slds-medium-size_9-of-12) {
+        width: 75%;
+    }
+
+    .slds-medium-size_10-of-12,
+    :host(.slds-medium-size_10-of-12) {
+        width: 83.3333333333%;
+    }
+
+    .slds-medium-size_11-of-12,
+    :host(.slds-medium-size_11-of-12) {
+        width: 91.6666666667%;
+    }
+
+    .slds-medium-size_12-of-12,
+    :host(.slds-medium-size_12-of-12) {
+        width: 100%;
+    }
+
+    .slds-medium-order_1,
+    :host(.slds-medium-order_1) {
+        order: 1;
+    }
+
+    .slds-medium-order_2,
+    :host(.slds-medium-order_2) {
+        order: 2;
+    }
+
+    .slds-medium-order_3,
+    :host(.slds-medium-order_3) {
+        order: 3;
+    }
+
+    .slds-medium-order_4,
+    :host(.slds-medium-order_4) {
+        order: 4;
+    }
+
+    .slds-medium-order_5,
+    :host(.slds-medium-order_5) {
+        order: 5;
+    }
+
+    .slds-medium-order_6,
+    :host(.slds-medium-order_6) {
+        order: 6;
+    }
+
+    .slds-medium-order_7,
+    :host(.slds-medium-order_7) {
+        order: 7;
+    }
+
+    .slds-medium-order_8,
+    :host(.slds-medium-order_8) {
+        order: 8;
+    }
+
+    .slds-medium-order_9,
+    :host(.slds-medium-order_9) {
+        order: 9;
+    }
+
+    .slds-medium-order_10,
+    :host(.slds-medium-order_10) {
+        order: 10;
+    }
+
+    .slds-medium-order_11,
+    :host(.slds-medium-order_11) {
+        order: 11;
+    }
+
+    .slds-medium-order_12,
+    :host(.slds-medium-order_12) {
+        order: 12;
+    }
+
+}
+
+/* Size Large + Order */
+
+@media (min-width: 64em) {
+
+    [class*=slds-large-size_],
+    :host([class*=slds-large-size_]) {
+        flex: none;
+    }
+
+    .slds-large-size_xxx-small,
+    :host(.slds-large-size_xxx-small) {
+        width: 3rem;
+    }
+
+    .slds-large-size_xx-small,
+    :host(.slds-large-size_xx-small) {
+        width: 6rem;
+    }
+
+    .slds-large-size_x-small,
+    :host(.slds-large-size_x-small) {
+        width: 12rem;
+    }
+
+    .slds-large-size_small,
+    :host(.slds-large-size_small) {
+        width: 15rem;
+    }
+
+    .slds-large-size_medium,
+    :host(.slds-large-size_medium) {
+        width: 20rem;
+    }
+
+    .slds-large-size_large,
+    :host(.slds-large-size_large) {
+        width: 25rem;
+    }
+
+    .slds-large-size_x-large,
+    :host(.slds-large-size_x-large) {
+        width: 40rem;
+    }
+
+    .slds-large-size_xx-large,
+    :host(.slds-large-size_xx-large) {
+        width: 60rem;
+    }
+
+    .slds-large-size_1-of-1,
+    :host(.slds-large-size_1-of-1) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-2,
+    :host(.slds-large-size_1-of-2) {
+        width: 50%;
+    }
+
+    .slds-large-size_2-of-2,
+    :host(.slds-large-size_2-of-2) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-3,
+    :host(.slds-large-size_1-of-3) {
+        width: 33.3333333333%;
+    }
+
+    .slds-large-size_2-of-3,
+    :host(.slds-large-size_2-of-3) {
+        width: 66.6666666667%;
+    }
+
+    .slds-large-size_3-of-3,
+    :host(.slds-large-size_3-of-3) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-4,
+    :host(.slds-large-size_1-of-4) {
+        width: 25%;
+    }
+
+    .slds-large-size_2-of-4,
+    :host(.slds-large-size_2-of-4) {
+        width: 50%;
+    }
+
+    .slds-large-size_3-of-4,
+    :host(.slds-large-size_3-of-4) {
+        width: 75%;
+    }
+
+    .slds-large-size_4-of-4,
+    :host(.slds-large-size_4-of-4) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-5,
+    :host(.slds-large-size_1-of-5) {
+        width: 20%;
+    }
+
+    .slds-large-size_2-of-5,
+    :host(.slds-large-size_2-of-5) {
+        width: 40%;
+    }
+
+    .slds-large-size_3-of-5,
+    :host(.slds-large-size_3-of-5) {
+        width: 60%;
+    }
+
+    .slds-large-size_4-of-5,
+    :host(.slds-large-size_4-of-5) {
+        width: 80%;
+    }
+
+    .slds-large-size_5-of-5,
+    :host(.slds-large-size_5-of-5) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-6,
+    :host(.slds-large-size_1-of-6) {
+        width: 16.6666666667%;
+    }
+
+    .slds-large-size_2-of-6,
+    :host(.slds-large-size_2-of-6) {
+        width: 33.3333333333%;
+    }
+
+    .slds-large-size_3-of-6,
+    :host(.slds-large-size_3-of-6) {
+        width: 50%;
+    }
+
+    .slds-large-size_4-of-6,
+    :host(.slds-large-size_4-of-6) {
+        width: 66.6666666667%;
+    }
+
+    .slds-large-size_5-of-6,
+    :host(.slds-large-size_5-of-6) {
+        width: 83.3333333333%;
+    }
+
+    .slds-large-size_6-of-6,
+    :host(.slds-large-size_6-of-6) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-7,
+    :host(.slds-large-size_1-of-7) {
+        width: 14.2857142857%;
+    }
+
+    .slds-large-size_2-of-7,
+    :host(.slds-large-size_2-of-7) {
+        width: 28.5714285714%;
+    }
+
+    .slds-large-size_3-of-7,
+    :host(.slds-large-size_3-of-7) {
+        width: 42.8571428571%;
+    }
+
+    .slds-large-size_4-of-7,
+    :host(.slds-large-size_4-of-7) {
+        width: 57.1428571429%;
+    }
+
+    .slds-large-size_5-of-7,
+    :host(.slds-large-size_5-of-7) {
+        width: 71.4285714286%;
+    }
+
+    .slds-large-size_6-of-7,
+    :host(.slds-large-size_6-of-7) {
+        width: 85.7142857143%;
+    }
+
+    .slds-large-size_7-of-7,
+    :host(.slds-large-size_7-of-7) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-8,
+    :host(.slds-large-size_1-of-8) {
+        width: 12.5%;
+    }
+
+    .slds-large-size_2-of-8,
+    :host(.slds-large-size_2-of-8) {
+        width: 25%;
+    }
+
+    .slds-large-size_3-of-8,
+    :host(.slds-large-size_3-of-8) {
+        width: 37.5%;
+    }
+
+    .slds-large-size_4-of-8,
+    :host(.slds-large-size_4-of-8) {
+        width: 50%;
+    }
+
+    .slds-large-size_5-of-8,
+    :host(.slds-large-size_5-of-8) {
+        width: 62.5%;
+    }
+
+    .slds-large-size_6-of-8,
+    :host(.slds-large-size_6-of-8) {
+        width: 75%;
+    }
+
+    .slds-large-size_7-of-8,
+    :host(.slds-large-size_7-of-8) {
+        width: 87.5%;
+    }
+
+    .slds-large-size_8-of-8,
+    :host(.slds-large-size_8-of-8) {
+        width: 100%;
+    }
+
+    .slds-large-size_1-of-12,
+    :host(.slds-large-size_1-of-12) {
+        width: 8.3333333333%;
+    }
+
+    .slds-large-size_2-of-12,
+    :host(.slds-large-size_2-of-12) {
+        width: 16.6666666667%;
+    }
+
+    .slds-large-size_3-of-12,
+    :host(.slds-large-size_3-of-12) {
+        width: 25%;
+    }
+
+    .slds-large-size_4-of-12,
+    :host(.slds-large-size_4-of-12) {
+        width: 33.3333333333%;
+    }
+
+    .slds-large-size_5-of-12,
+    :host(.slds-large-size_5-of-12) {
+        width: 41.6666666667%;
+    }
+
+    .slds-large-size_6-of-12,
+    :host(.slds-large-size_6-of-12) {
+        width: 50%;
+    }
+
+    .slds-large-size_7-of-12,
+    :host(.slds-large-size_7-of-12) {
+        width: 58.3333333333%;
+    }
+
+    .slds-large-size_8-of-12,
+    :host(.slds-large-size_8-of-12) {
+        width: 66.6666666667%;
+    }
+
+    .slds-large-size_9-of-12,
+    :host(.slds-large-size_9-of-12) {
+        width: 75%;
+    }
+
+    .slds-large-size_10-of-12,
+    :host(.slds-large-size_10-of-12) {
+        width: 83.3333333333%;
+    }
+
+    .slds-large-size_11-of-12,
+    :host(.slds-large-size_11-of-12) {
+        width: 91.6666666667%;
+    }
+
+    .slds-large-size_12-of-12,
+    :host(.slds-large-size_12-of-12) {
+        width: 100%;
+    }
+
+    .slds-large-order_1,
+    :host(.slds-large-order_1) {
+        order: 1;
+    }
+
+    .slds-large-order_2,
+    :host(.slds-large-order_2) {
+        order: 2;
+    }
+
+    .slds-large-order_3,
+    :host(.slds-large-order_3) {
+        order: 3;
+    }
+
+    .slds-large-order_4,
+    :host(.slds-large-order_4) {
+        order: 4;
+    }
+
+    .slds-large-order_5,
+    :host(.slds-large-order_5) {
+        order: 5;
+    }
+
+    .slds-large-order_6,
+    :host(.slds-large-order_6) {
+        order: 6;
+    }
+
+    .slds-large-order_7,
+    :host(.slds-large-order_7) {
+        order: 7;
+    }
+
+    .slds-large-order_8,
+    :host(.slds-large-order_8) {
+        order: 8;
+    }
+
+    .slds-large-order_9,
+    :host(.slds-large-order_9) {
+        order: 9;
+    }
+
+    .slds-large-order_10,
+    :host(.slds-large-order_10) {
+        order: 10;
+    }
+
+    .slds-large-order_11,
+    :host(.slds-large-order_11) {
+        order: 11;
+    }
+
+    .slds-large-order_12,
+    :host(.slds-large-order_12) {
+        order: 12;
+    }
+
+}