postboot - npm Package Compare versions

Comparing version 1.0.0-rc3 to 1.0.0-rc4

dist/css/postboot-grid.css

+/*!
+ * PostBoot v1.0.0-rc4 (https://tarkhov.github.io/postboot/)
+ * Copyright 2016-2019 Alexander Tarkhov
+ * Licensed under MIT
+ */
+
+@media (min-width: 768px) {
+  .container-md {
+    max-width: 720px; } }
+@media (min-width: 992px) {
+  .container-md {
+    max-width: 960px; } }
+@media (min-width: 1200px) {
+  .container-md {
+    max-width: 1140px; } }
+
+@media (min-width: 992px) {
+  .container-lg {
+    max-width: 960px; } }
+@media (min-width: 1200px) {
+  .container-lg {
+    max-width: 1140px; } }
+
+@media (min-width: 1200px) {
+  .container-xl {
+    max-width: 1140px; } }
+
+@media (min-width: 576px) {
+  .container-1 {
+    max-width: 540px; } }
+@media (min-width: 768px) {
+  .container-1 {
+    max-width: 540px; } }
+@media (min-width: 992px) {
+  .container-1 {
+    max-width: 540px; } }
+@media (min-width: 1200px) {
+  .container-1 {
+    max-width: 540px; } }
+
+@media (min-width: 576px) {
+  .container-2 {
+    max-width: 540px; } }
+@media (min-width: 768px) {
+  .container-2 {
+    max-width: 720px; } }
+@media (min-width: 992px) {
+  .container-2 {
+    max-width: 720px; } }
+@media (min-width: 1200px) {
+  .container-2 {
+    max-width: 720px; } }
+
+@media (min-width: 576px) {
+  .container-3 {
+    max-width: 540px; } }
+@media (min-width: 768px) {
+  .container-3 {
+    max-width: 720px; } }
+@media (min-width: 992px) {
+  .container-3 {
+    max-width: 960px; } }
+@media (min-width: 1200px) {
+  .container-3 {
+    max-width: 960px; } }
+
+@media (min-width: 768px) {
+  .container-md-2 {
+    max-width: 720px; } }
+@media (min-width: 992px) {
+  .container-md-2 {
+    max-width: 720px; } }
+@media (min-width: 1200px) {
+  .container-md-2 {
+    max-width: 720px; } }
+
+@media (min-width: 992px) {
+  .container-lg-3 {
+    max-width: 960px; } }
+@media (min-width: 1200px) {
+  .container-lg-3 {
+    max-width: 960px; } }
+
+.row-1 {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin-right: -5px;
+  margin-left: -5px; }
+  .row-1 > .col,
+  .row-1 > [class*="col-"] {
+    padding-right: 5px;
+    padding-left: 5px; }
+
+.row-2 {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin-right: -10px;
+  margin-left: -10px; }
+  .row-2 > .col,
+  .row-2 > [class*="col-"] {
+    padding-right: 10px;
+    padding-left: 10px; }
+
+.row-3 {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px; }
+  .row-3 > .col,
+  .row-3 > [class*="col-"] {
+    padding-right: 15px;
+    padding-left: 15px; }
+
+@media (min-width: 576px) {
+  .row-sm-1 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: -5px; }
+    .row-sm-1 > .col,
+    .row-sm-1 > [class*="col-"] {
+      padding-right: 5px;
+      padding-left: 5px; }
+
+  .row-sm-2 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -10px;
+    margin-left: -10px; }
+    .row-sm-2 > .col,
+    .row-sm-2 > [class*="col-"] {
+      padding-right: 10px;
+      padding-left: 10px; }
+
+  .row-sm-3 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px; }
+    .row-sm-3 > .col,
+    .row-sm-3 > [class*="col-"] {
+      padding-right: 15px;
+      padding-left: 15px; } }
+@media (min-width: 768px) {
+  .row-md-1 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: -5px; }
+    .row-md-1 > .col,
+    .row-md-1 > [class*="col-"] {
+      padding-right: 5px;
+      padding-left: 5px; }
+
+  .row-md-2 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -10px;
+    margin-left: -10px; }
+    .row-md-2 > .col,
+    .row-md-2 > [class*="col-"] {
+      padding-right: 10px;
+      padding-left: 10px; }
+
+  .row-md-3 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px; }
+    .row-md-3 > .col,
+    .row-md-3 > [class*="col-"] {
+      padding-right: 15px;
+      padding-left: 15px; } }
+@media (min-width: 992px) {
+  .row-lg-1 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: -5px; }
+    .row-lg-1 > .col,
+    .row-lg-1 > [class*="col-"] {
+      padding-right: 5px;
+      padding-left: 5px; }
+
+  .row-lg-2 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -10px;
+    margin-left: -10px; }
+    .row-lg-2 > .col,
+    .row-lg-2 > [class*="col-"] {
+      padding-right: 10px;
+      padding-left: 10px; }
+
+  .row-lg-3 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px; }
+    .row-lg-3 > .col,
+    .row-lg-3 > [class*="col-"] {
+      padding-right: 15px;
+      padding-left: 15px; } }
+@media (min-width: 1200px) {
+  .row-xl-1 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: -5px; }
+    .row-xl-1 > .col,
+    .row-xl-1 > [class*="col-"] {
+      padding-right: 5px;
+      padding-left: 5px; }
+
+  .row-xl-2 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -10px;
+    margin-left: -10px; }
+    .row-xl-2 > .col,
+    .row-xl-2 > [class*="col-"] {
+      padding-right: 10px;
+      padding-left: 10px; }
+
+  .row-xl-3 {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px; }
+    .row-xl-3 > .col,
+    .row-xl-3 > [class*="col-"] {
+      padding-right: 15px;
+      padding-left: 15px; } }
+.col-2-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+.col-2-5 {
+  -ms-flex: 0 0 20%;
+      flex: 0 0 20%;
+  max-width: 20%; }
+
+.col-sm-2-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+@media (min-width: 576px) {
+  .col-sm-2-5 {
+    -ms-flex: 0 0 20%;
+        flex: 0 0 20%;
+    max-width: 20%; } }
+.col-md-2-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+@media (min-width: 768px) {
+  .col-md-2-5 {
+    -ms-flex: 0 0 20%;
+        flex: 0 0 20%;
+    max-width: 20%; } }
+.col-lg-2-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+@media (min-width: 992px) {
+  .col-lg-2-5 {
+    -ms-flex: 0 0 20%;
+        flex: 0 0 20%;
+    max-width: 20%; } }
+.col-xl-2-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+@media (min-width: 1200px) {
+  .col-xl-2-5 {
+    -ms-flex: 0 0 20%;
+        flex: 0 0 20%;
+    max-width: 20%; } }
+.m-gutter {
+  margin: 30px !important; }
+
+.mt-gutter {
+  margin-top: 30px !important; }
+
+.mr-gutter {
+  margin-right: 30px !important; }
+
+.mb-gutter {
+  margin-bottom: 30px !important; }
+
+.ml-gutter {
+  margin-left: 30px !important; }
+
+.mx-gutter {
+  margin-right: 30px !important;
+  margin-left: 30px !important; }
+
+.my-gutter {
+  margin-top: 30px !important;
+  margin-bottom: 30px !important; }
+
+.p-gutter {
+  padding: 30px !important; }
+
+.pt-gutter {
+  padding-top: 30px !important; }
+
+.pr-gutter {
+  padding-right: 30px !important; }
+
+.pb-gutter {
+  padding-bottom: 30px !important; }
+
+.pl-gutter {
+  padding-left: 30px !important; }
+
+.px-gutter {
+  padding-right: 30px !important;
+  padding-left: 30px !important; }
+
+.py-gutter {
+  padding-top: 30px !important;
+  padding-bottom: 30px !important; }
+
+.m-gutter-1 {
+  margin: 10px !important; }
+
+.mt-gutter-1 {
+  margin-top: 10px !important; }
+
+.mr-gutter-1 {
+  margin-right: 10px !important; }
+
+.mb-gutter-1 {
+  margin-bottom: 10px !important; }
+
+.ml-gutter-1 {
+  margin-left: 10px !important; }
+
+.mx-gutter-1 {
+  margin-right: 10px !important;
+  margin-left: 10px !important; }
+
+.my-gutter-1 {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important; }
+
+.p-gutter-1 {
+  padding: 10px !important; }
+
+.pt-gutter-1 {
+  padding-top: 10px !important; }
+
+.pr-gutter-1 {
+  padding-right: 10px !important; }
+
+.pb-gutter-1 {
+  padding-bottom: 10px !important; }
+
+.pl-gutter-1 {
+  padding-left: 10px !important; }
+
+.px-gutter-1 {
+  padding-right: 10px !important;
+  padding-left: 10px !important; }
+
+.py-gutter-1 {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important; }
+
+.m-gutter-2 {
+  margin: 20px !important; }
+
+.mt-gutter-2 {
+  margin-top: 20px !important; }
+
+.mr-gutter-2 {
+  margin-right: 20px !important; }
+
+.mb-gutter-2 {
+  margin-bottom: 20px !important; }
+
+.ml-gutter-2 {
+  margin-left: 20px !important; }
+
+.mx-gutter-2 {
+  margin-right: 20px !important;
+  margin-left: 20px !important; }
+
+.my-gutter-2 {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important; }
+
+.p-gutter-2 {
+  padding: 20px !important; }
+
+.pt-gutter-2 {
+  padding-top: 20px !important; }
+
+.pr-gutter-2 {
+  padding-right: 20px !important; }
+
+.pb-gutter-2 {
+  padding-bottom: 20px !important; }
+
+.pl-gutter-2 {
+  padding-left: 20px !important; }
+
+.px-gutter-2 {
+  padding-right: 20px !important;
+  padding-left: 20px !important; }
+
+.py-gutter-2 {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important; }
+
+.m-gutter-3 {
+  margin: 30px !important; }
+
+.mt-gutter-3 {
+  margin-top: 30px !important; }
+
+.mr-gutter-3 {
+  margin-right: 30px !important; }
+
+.mb-gutter-3 {
+  margin-bottom: 30px !important; }
+
+.ml-gutter-3 {
+  margin-left: 30px !important; }
+
+.mx-gutter-3 {
+  margin-right: 30px !important;
+  margin-left: 30px !important; }
+
+.my-gutter-3 {
+  margin-top: 30px !important;
+  margin-bottom: 30px !important; }
+
+.p-gutter-3 {
+  padding: 30px !important; }
+
+.pt-gutter-3 {
+  padding-top: 30px !important; }
+
+.pr-gutter-3 {
+  padding-right: 30px !important; }
+
+.pb-gutter-3 {
+  padding-bottom: 30px !important; }
+
+.pl-gutter-3 {
+  padding-left: 30px !important; }
+
+.px-gutter-3 {
+  padding-right: 30px !important;
+  padding-left: 30px !important; }
+
+.py-gutter-3 {
+  padding-top: 30px !important;
+  padding-bottom: 30px !important; }
+
+@media (min-width: 576px) {
+  .m-gutter-sm {
+    margin: 30px !important; }
+
+  .mt-gutter-sm {
+    margin-top: 30px !important; }
+
+  .mr-gutter-sm {
+    margin-right: 30px !important; }
+
+  .mb-gutter-sm {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-sm {
+    margin-left: 30px !important; }
+
+  .mx-gutter-sm {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-sm {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-sm {
+    padding: 30px !important; }
+
+  .pt-gutter-sm {
+    padding-top: 30px !important; }
+
+  .pr-gutter-sm {
+    padding-right: 30px !important; }
+
+  .pb-gutter-sm {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-sm {
+    padding-left: 30px !important; }
+
+  .px-gutter-sm {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-sm {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; }
+
+  .m-gutter-sm-1 {
+    margin: 10px !important; }
+
+  .mt-gutter-sm-1 {
+    margin-top: 10px !important; }
+
+  .mr-gutter-sm-1 {
+    margin-right: 10px !important; }
+
+  .mb-gutter-sm-1 {
+    margin-bottom: 10px !important; }
+
+  .ml-gutter-sm-1 {
+    margin-left: 10px !important; }
+
+  .mx-gutter-sm-1 {
+    margin-right: 10px !important;
+    margin-left: 10px !important; }
+
+  .my-gutter-sm-1 {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important; }
+
+  .p-gutter-sm-1 {
+    padding: 10px !important; }
+
+  .pt-gutter-sm-1 {
+    padding-top: 10px !important; }
+
+  .pr-gutter-sm-1 {
+    padding-right: 10px !important; }
+
+  .pb-gutter-sm-1 {
+    padding-bottom: 10px !important; }
+
+  .pl-gutter-sm-1 {
+    padding-left: 10px !important; }
+
+  .px-gutter-sm-1 {
+    padding-right: 10px !important;
+    padding-left: 10px !important; }
+
+  .py-gutter-sm-1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important; }
+
+  .m-gutter-sm-2 {
+    margin: 20px !important; }
+
+  .mt-gutter-sm-2 {
+    margin-top: 20px !important; }
+
+  .mr-gutter-sm-2 {
+    margin-right: 20px !important; }
+
+  .mb-gutter-sm-2 {
+    margin-bottom: 20px !important; }
+
+  .ml-gutter-sm-2 {
+    margin-left: 20px !important; }
+
+  .mx-gutter-sm-2 {
+    margin-right: 20px !important;
+    margin-left: 20px !important; }
+
+  .my-gutter-sm-2 {
+    margin-top: 20px !important;
+    margin-bottom: 20px !important; }
+
+  .p-gutter-sm-2 {
+    padding: 20px !important; }
+
+  .pt-gutter-sm-2 {
+    padding-top: 20px !important; }
+
+  .pr-gutter-sm-2 {
+    padding-right: 20px !important; }
+
+  .pb-gutter-sm-2 {
+    padding-bottom: 20px !important; }
+
+  .pl-gutter-sm-2 {
+    padding-left: 20px !important; }
+
+  .px-gutter-sm-2 {
+    padding-right: 20px !important;
+    padding-left: 20px !important; }
+
+  .py-gutter-sm-2 {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important; }
+
+  .m-gutter-sm-3 {
+    margin: 30px !important; }
+
+  .mt-gutter-sm-3 {
+    margin-top: 30px !important; }
+
+  .mr-gutter-sm-3 {
+    margin-right: 30px !important; }
+
+  .mb-gutter-sm-3 {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-sm-3 {
+    margin-left: 30px !important; }
+
+  .mx-gutter-sm-3 {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-sm-3 {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-sm-3 {
+    padding: 30px !important; }
+
+  .pt-gutter-sm-3 {
+    padding-top: 30px !important; }
+
+  .pr-gutter-sm-3 {
+    padding-right: 30px !important; }
+
+  .pb-gutter-sm-3 {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-sm-3 {
+    padding-left: 30px !important; }
+
+  .px-gutter-sm-3 {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-sm-3 {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; } }
+@media (min-width: 768px) {
+  .m-gutter-md {
+    margin: 30px !important; }
+
+  .mt-gutter-md {
+    margin-top: 30px !important; }
+
+  .mr-gutter-md {
+    margin-right: 30px !important; }
+
+  .mb-gutter-md {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-md {
+    margin-left: 30px !important; }
+
+  .mx-gutter-md {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-md {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-md {
+    padding: 30px !important; }
+
+  .pt-gutter-md {
+    padding-top: 30px !important; }
+
+  .pr-gutter-md {
+    padding-right: 30px !important; }
+
+  .pb-gutter-md {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-md {
+    padding-left: 30px !important; }
+
+  .px-gutter-md {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-md {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; }
+
+  .m-gutter-md-1 {
+    margin: 10px !important; }
+
+  .mt-gutter-md-1 {
+    margin-top: 10px !important; }
+
+  .mr-gutter-md-1 {
+    margin-right: 10px !important; }
+
+  .mb-gutter-md-1 {
+    margin-bottom: 10px !important; }
+
+  .ml-gutter-md-1 {
+    margin-left: 10px !important; }
+
+  .mx-gutter-md-1 {
+    margin-right: 10px !important;
+    margin-left: 10px !important; }
+
+  .my-gutter-md-1 {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important; }
+
+  .p-gutter-md-1 {
+    padding: 10px !important; }
+
+  .pt-gutter-md-1 {
+    padding-top: 10px !important; }
+
+  .pr-gutter-md-1 {
+    padding-right: 10px !important; }
+
+  .pb-gutter-md-1 {
+    padding-bottom: 10px !important; }
+
+  .pl-gutter-md-1 {
+    padding-left: 10px !important; }
+
+  .px-gutter-md-1 {
+    padding-right: 10px !important;
+    padding-left: 10px !important; }
+
+  .py-gutter-md-1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important; }
+
+  .m-gutter-md-2 {
+    margin: 20px !important; }
+
+  .mt-gutter-md-2 {
+    margin-top: 20px !important; }
+
+  .mr-gutter-md-2 {
+    margin-right: 20px !important; }
+
+  .mb-gutter-md-2 {
+    margin-bottom: 20px !important; }
+
+  .ml-gutter-md-2 {
+    margin-left: 20px !important; }
+
+  .mx-gutter-md-2 {
+    margin-right: 20px !important;
+    margin-left: 20px !important; }
+
+  .my-gutter-md-2 {
+    margin-top: 20px !important;
+    margin-bottom: 20px !important; }
+
+  .p-gutter-md-2 {
+    padding: 20px !important; }
+
+  .pt-gutter-md-2 {
+    padding-top: 20px !important; }
+
+  .pr-gutter-md-2 {
+    padding-right: 20px !important; }
+
+  .pb-gutter-md-2 {
+    padding-bottom: 20px !important; }
+
+  .pl-gutter-md-2 {
+    padding-left: 20px !important; }
+
+  .px-gutter-md-2 {
+    padding-right: 20px !important;
+    padding-left: 20px !important; }
+
+  .py-gutter-md-2 {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important; }
+
+  .m-gutter-md-3 {
+    margin: 30px !important; }
+
+  .mt-gutter-md-3 {
+    margin-top: 30px !important; }
+
+  .mr-gutter-md-3 {
+    margin-right: 30px !important; }
+
+  .mb-gutter-md-3 {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-md-3 {
+    margin-left: 30px !important; }
+
+  .mx-gutter-md-3 {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-md-3 {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-md-3 {
+    padding: 30px !important; }
+
+  .pt-gutter-md-3 {
+    padding-top: 30px !important; }
+
+  .pr-gutter-md-3 {
+    padding-right: 30px !important; }
+
+  .pb-gutter-md-3 {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-md-3 {
+    padding-left: 30px !important; }
+
+  .px-gutter-md-3 {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-md-3 {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; } }
+@media (min-width: 992px) {
+  .m-gutter-lg {
+    margin: 30px !important; }
+
+  .mt-gutter-lg {
+    margin-top: 30px !important; }
+
+  .mr-gutter-lg {
+    margin-right: 30px !important; }
+
+  .mb-gutter-lg {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-lg {
+    margin-left: 30px !important; }
+
+  .mx-gutter-lg {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-lg {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-lg {
+    padding: 30px !important; }
+
+  .pt-gutter-lg {
+    padding-top: 30px !important; }
+
+  .pr-gutter-lg {
+    padding-right: 30px !important; }
+
+  .pb-gutter-lg {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-lg {
+    padding-left: 30px !important; }
+
+  .px-gutter-lg {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-lg {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; }
+
+  .m-gutter-lg-1 {
+    margin: 10px !important; }
+
+  .mt-gutter-lg-1 {
+    margin-top: 10px !important; }
+
+  .mr-gutter-lg-1 {
+    margin-right: 10px !important; }
+
+  .mb-gutter-lg-1 {
+    margin-bottom: 10px !important; }
+
+  .ml-gutter-lg-1 {
+    margin-left: 10px !important; }
+
+  .mx-gutter-lg-1 {
+    margin-right: 10px !important;
+    margin-left: 10px !important; }
+
+  .my-gutter-lg-1 {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important; }
+
+  .p-gutter-lg-1 {
+    padding: 10px !important; }
+
+  .pt-gutter-lg-1 {
+    padding-top: 10px !important; }
+
+  .pr-gutter-lg-1 {
+    padding-right: 10px !important; }
+
+  .pb-gutter-lg-1 {
+    padding-bottom: 10px !important; }
+
+  .pl-gutter-lg-1 {
+    padding-left: 10px !important; }
+
+  .px-gutter-lg-1 {
+    padding-right: 10px !important;
+    padding-left: 10px !important; }
+
+  .py-gutter-lg-1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important; }
+
+  .m-gutter-lg-2 {
+    margin: 20px !important; }
+
+  .mt-gutter-lg-2 {
+    margin-top: 20px !important; }
+
+  .mr-gutter-lg-2 {
+    margin-right: 20px !important; }
+
+  .mb-gutter-lg-2 {
+    margin-bottom: 20px !important; }
+
+  .ml-gutter-lg-2 {
+    margin-left: 20px !important; }
+
+  .mx-gutter-lg-2 {
+    margin-right: 20px !important;
+    margin-left: 20px !important; }
+
+  .my-gutter-lg-2 {
+    margin-top: 20px !important;
+    margin-bottom: 20px !important; }
+
+  .p-gutter-lg-2 {
+    padding: 20px !important; }
+
+  .pt-gutter-lg-2 {
+    padding-top: 20px !important; }
+
+  .pr-gutter-lg-2 {
+    padding-right: 20px !important; }
+
+  .pb-gutter-lg-2 {
+    padding-bottom: 20px !important; }
+
+  .pl-gutter-lg-2 {
+    padding-left: 20px !important; }
+
+  .px-gutter-lg-2 {
+    padding-right: 20px !important;
+    padding-left: 20px !important; }
+
+  .py-gutter-lg-2 {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important; }
+
+  .m-gutter-lg-3 {
+    margin: 30px !important; }
+
+  .mt-gutter-lg-3 {
+    margin-top: 30px !important; }
+
+  .mr-gutter-lg-3 {
+    margin-right: 30px !important; }
+
+  .mb-gutter-lg-3 {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-lg-3 {
+    margin-left: 30px !important; }
+
+  .mx-gutter-lg-3 {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-lg-3 {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-lg-3 {
+    padding: 30px !important; }
+
+  .pt-gutter-lg-3 {
+    padding-top: 30px !important; }
+
+  .pr-gutter-lg-3 {
+    padding-right: 30px !important; }
+
+  .pb-gutter-lg-3 {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-lg-3 {
+    padding-left: 30px !important; }
+
+  .px-gutter-lg-3 {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-lg-3 {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; } }
+@media (min-width: 1200px) {
+  .m-gutter-xl {
+    margin: 30px !important; }
+
+  .mt-gutter-xl {
+    margin-top: 30px !important; }
+
+  .mr-gutter-xl {
+    margin-right: 30px !important; }
+
+  .mb-gutter-xl {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-xl {
+    margin-left: 30px !important; }
+
+  .mx-gutter-xl {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-xl {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-xl {
+    padding: 30px !important; }
+
+  .pt-gutter-xl {
+    padding-top: 30px !important; }
+
+  .pr-gutter-xl {
+    padding-right: 30px !important; }
+
+  .pb-gutter-xl {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-xl {
+    padding-left: 30px !important; }
+
+  .px-gutter-xl {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-xl {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; }
+
+  .m-gutter-xl-1 {
+    margin: 10px !important; }
+
+  .mt-gutter-xl-1 {
+    margin-top: 10px !important; }
+
+  .mr-gutter-xl-1 {
+    margin-right: 10px !important; }
+
+  .mb-gutter-xl-1 {
+    margin-bottom: 10px !important; }
+
+  .ml-gutter-xl-1 {
+    margin-left: 10px !important; }
+
+  .mx-gutter-xl-1 {
+    margin-right: 10px !important;
+    margin-left: 10px !important; }
+
+  .my-gutter-xl-1 {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important; }
+
+  .p-gutter-xl-1 {
+    padding: 10px !important; }
+
+  .pt-gutter-xl-1 {
+    padding-top: 10px !important; }
+
+  .pr-gutter-xl-1 {
+    padding-right: 10px !important; }
+
+  .pb-gutter-xl-1 {
+    padding-bottom: 10px !important; }
+
+  .pl-gutter-xl-1 {
+    padding-left: 10px !important; }
+
+  .px-gutter-xl-1 {
+    padding-right: 10px !important;
+    padding-left: 10px !important; }
+
+  .py-gutter-xl-1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important; }
+
+  .m-gutter-xl-2 {
+    margin: 20px !important; }
+
+  .mt-gutter-xl-2 {
+    margin-top: 20px !important; }
+
+  .mr-gutter-xl-2 {
+    margin-right: 20px !important; }
+
+  .mb-gutter-xl-2 {
+    margin-bottom: 20px !important; }
+
+  .ml-gutter-xl-2 {
+    margin-left: 20px !important; }
+
+  .mx-gutter-xl-2 {
+    margin-right: 20px !important;
+    margin-left: 20px !important; }
+
+  .my-gutter-xl-2 {
+    margin-top: 20px !important;
+    margin-bottom: 20px !important; }
+
+  .p-gutter-xl-2 {
+    padding: 20px !important; }
+
+  .pt-gutter-xl-2 {
+    padding-top: 20px !important; }
+
+  .pr-gutter-xl-2 {
+    padding-right: 20px !important; }
+
+  .pb-gutter-xl-2 {
+    padding-bottom: 20px !important; }
+
+  .pl-gutter-xl-2 {
+    padding-left: 20px !important; }
+
+  .px-gutter-xl-2 {
+    padding-right: 20px !important;
+    padding-left: 20px !important; }
+
+  .py-gutter-xl-2 {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important; }
+
+  .m-gutter-xl-3 {
+    margin: 30px !important; }
+
+  .mt-gutter-xl-3 {
+    margin-top: 30px !important; }
+
+  .mr-gutter-xl-3 {
+    margin-right: 30px !important; }
+
+  .mb-gutter-xl-3 {
+    margin-bottom: 30px !important; }
+
+  .ml-gutter-xl-3 {
+    margin-left: 30px !important; }
+
+  .mx-gutter-xl-3 {
+    margin-right: 30px !important;
+    margin-left: 30px !important; }
+
+  .my-gutter-xl-3 {
+    margin-top: 30px !important;
+    margin-bottom: 30px !important; }
+
+  .p-gutter-xl-3 {
+    padding: 30px !important; }
+
+  .pt-gutter-xl-3 {
+    padding-top: 30px !important; }
+
+  .pr-gutter-xl-3 {
+    padding-right: 30px !important; }
+
+  .pb-gutter-xl-3 {
+    padding-bottom: 30px !important; }
+
+  .pl-gutter-xl-3 {
+    padding-left: 30px !important; }
+
+  .px-gutter-xl-3 {
+    padding-right: 30px !important;
+    padding-left: 30px !important; }
+
+  .py-gutter-xl-3 {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important; } }

dist/css/postboot-grid.min.css

+/*!
+ * PostBoot v1.0.0-rc4 (https://tarkhov.github.io/postboot/)
+ * Copyright 2016-2019 Alexander Tarkhov
+ * Licensed under MIT
+ */.row-1,.row-2{display:-ms-flexbox;-ms-flex-wrap:wrap}.pt-gutter,.py-gutter{padding-top:30px!important}@media (min-width:768px){.container-md{max-width:720px}}@media (min-width:992px){.container-md{max-width:960px}}@media (min-width:1200px){.container-md{max-width:1140px}}@media (min-width:992px){.container-lg{max-width:960px}}@media (min-width:1200px){.container-lg,.container-xl{max-width:1140px}.container-1{max-width:540px}}@media (min-width:992px){.container-1{max-width:540px}}@media (min-width:576px){.container-1,.container-2{max-width:540px}}@media (min-width:768px){.container-1{max-width:540px}.container-2{max-width:720px}}@media (min-width:992px){.container-2{max-width:720px}}@media (min-width:1200px){.container-2{max-width:720px}}@media (min-width:576px){.container-3{max-width:540px}}@media (min-width:768px){.container-3{max-width:720px}}@media (min-width:992px){.container-3{max-width:960px}}@media (min-width:1200px){.container-3{max-width:960px}.container-md-2{max-width:720px}}.row-1{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row-1>.col,.row-1>[class*=col-]{padding-right:5px;padding-left:5px}.row-2{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row-2>.col,.row-2>[class*=col-]{padding-right:10px;padding-left:10px}.row-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row-3>.col,.row-3>[class*=col-]{padding-right:15px;padding-left:15px}@media (min-width:576px){.row-sm-1,.row-sm-2{display:-ms-flexbox;-ms-flex-wrap:wrap}.row-sm-1{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row-sm-1>.col,.row-sm-1>[class*=col-]{padding-right:5px;padding-left:5px}.row-sm-2{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row-sm-2>.col,.row-sm-2>[class*=col-]{padding-right:10px;padding-left:10px}.row-sm-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row-sm-3>.col,.row-sm-3>[class*=col-]{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container-md-2{max-width:720px}.row-md-1,.row-md-2{-ms-flex-wrap:wrap}.row-md-1{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row-md-1>.col,.row-md-1>[class*=col-]{padding-right:5px;padding-left:5px}.row-md-2{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row-md-2>.col,.row-md-2>[class*=col-]{padding-right:10px;padding-left:10px}.row-md-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row-md-3>.col,.row-md-3>[class*=col-]{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container-md-2{max-width:720px}.container-lg-3{max-width:960px}.row-lg-1,.row-lg-2{-ms-flex-wrap:wrap}.row-lg-1{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row-lg-1>.col,.row-lg-1>[class*=col-]{padding-right:5px;padding-left:5px}.row-lg-2{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row-lg-2>.col,.row-lg-2>[class*=col-]{padding-right:10px;padding-left:10px}.row-lg-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row-lg-3>.col,.row-lg-3>[class*=col-]{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container-lg-3{max-width:960px}.row-xl-1,.row-xl-2{-ms-flex-wrap:wrap}.row-xl-1{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row-xl-1>.col,.row-xl-1>[class*=col-]{padding-right:5px;padding-left:5px}.row-xl-2{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row-xl-2>.col,.row-xl-2>[class*=col-]{padding-right:10px;padding-left:10px}.row-xl-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row-xl-3>.col,.row-xl-3>[class*=col-]{padding-right:15px;padding-left:15px}}.col-2-5,.col-lg-2-5,.col-md-2-5,.col-sm-2-5,.col-xl-2-5{position:relative;width:100%;padding-right:15px;padding-left:15px}.mr-gutter,.mx-gutter{margin-right:30px!important}.ml-gutter,.mx-gutter{margin-left:30px!important}.col-2-5{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.pr-gutter,.px-gutter{padding-right:30px!important}.pl-gutter,.px-gutter{padding-left:30px!important}.m-gutter{margin:30px!important}.mt-gutter{margin-top:30px!important}.mb-gutter{margin-bottom:30px!important}.mr-gutter-1,.mx-gutter-1{margin-right:10px!important}.ml-gutter-1,.mx-gutter-1{margin-left:10px!important}.my-gutter{margin-top:30px!important;margin-bottom:30px!important}.mt-gutter-1,.my-gutter-1{margin-top:10px!important}.mb-gutter-1,.my-gutter-1{margin-bottom:10px!important}.p-gutter{padding:30px!important}.pb-gutter{padding-bottom:30px!important}.pr-gutter-1,.px-gutter-1{padding-right:10px!important}.pl-gutter-1,.px-gutter-1{padding-left:10px!important}.py-gutter{padding-bottom:30px!important}.pt-gutter-1,.py-gutter-1{padding-top:10px!important}.pb-gutter-1,.py-gutter-1{padding-bottom:10px!important}.m-gutter-1{margin:10px!important}.ml-gutter-2,.mx-gutter-2{margin-left:20px!important}.mt-gutter-2,.my-gutter-2{margin-top:20px!important}.mb-gutter-2,.my-gutter-2{margin-bottom:20px!important}.p-gutter-1{padding:10px!important}.pl-gutter-2,.px-gutter-2{padding-left:20px!important}.pt-gutter-2,.py-gutter-2{padding-top:20px!important}.pb-gutter-2,.py-gutter-2{padding-bottom:20px!important}.m-gutter-2{margin:20px!important}.mr-gutter-2{margin-right:20px!important}.mx-gutter-2{margin-right:20px!important}.mr-gutter-3,.mx-gutter-3{margin-right:30px!important}.ml-gutter-3,.mx-gutter-3{margin-left:30px!important}.mt-gutter-3,.my-gutter-3{margin-top:30px!important}.mb-gutter-3,.my-gutter-3{margin-bottom:30px!important}.p-gutter-2{padding:20px!important}.pr-gutter-2{padding-right:20px!important}.px-gutter-2{padding-right:20px!important}.pr-gutter-3,.px-gutter-3{padding-right:30px!important}.pl-gutter-3,.px-gutter-3{padding-left:30px!important}.pt-gutter-3,.py-gutter-3{padding-top:30px!important}.pb-gutter-3,.py-gutter-3{padding-bottom:30px!important}.m-gutter-3{margin:30px!important}.p-gutter-3{padding:30px!important}@media (min-width:576px){.col-sm-2-5{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.mt-gutter-sm,.my-gutter-sm{margin-top:30px!important}.mr-gutter-sm,.mx-gutter-sm{margin-right:30px!important}.ml-gutter-sm,.mx-gutter-sm{margin-left:30px!important}.mb-gutter-sm,.my-gutter-sm{margin-bottom:30px!important}.pt-gutter-sm,.py-gutter-sm{padding-top:30px!important}.pr-gutter-sm,.px-gutter-sm{padding-right:30px!important}.pl-gutter-sm,.px-gutter-sm{padding-left:30px!important}.pb-gutter-sm,.py-gutter-sm{padding-bottom:30px!important}.m-gutter-sm{margin:30px!important}.mr-gutter-sm-1,.mx-gutter-sm-1{margin-right:10px!important}.ml-gutter-sm-1,.mx-gutter-sm-1{margin-left:10px!important}.mt-gutter-sm-1,.my-gutter-sm-1{margin-top:10px!important}.mb-gutter-sm-1,.my-gutter-sm-1{margin-bottom:10px!important}.p-gutter-sm{padding:30px!important}.pr-gutter-sm-1,.px-gutter-sm-1{padding-right:10px!important}.pl-gutter-sm-1,.px-gutter-sm-1{padding-left:10px!important}.pt-gutter-sm-1,.py-gutter-sm-1{padding-top:10px!important}.pb-gutter-sm-1,.py-gutter-sm-1{padding-bottom:10px!important}.m-gutter-sm-1{margin:10px!important}.ml-gutter-sm-2,.mx-gutter-sm-2{margin-left:20px!important}.mt-gutter-sm-2,.my-gutter-sm-2{margin-top:20px!important}.mb-gutter-sm-2,.my-gutter-sm-2{margin-bottom:20px!important}.p-gutter-sm-1{padding:10px!important}.pl-gutter-sm-2,.px-gutter-sm-2{padding-left:20px!important}.pt-gutter-sm-2,.py-gutter-sm-2{padding-top:20px!important}.pb-gutter-sm-2,.py-gutter-sm-2{padding-bottom:20px!important}.m-gutter-sm-2{margin:20px!important}.mr-gutter-sm-2,.mx-gutter-sm-2{margin-right:20px!important}.mr-gutter-sm-3,.mx-gutter-sm-3{margin-right:30px!important}.ml-gutter-sm-3,.mx-gutter-sm-3{margin-left:30px!important}.mt-gutter-sm-3,.my-gutter-sm-3{margin-top:30px!important}.mb-gutter-sm-3,.my-gutter-sm-3{margin-bottom:30px!important}.p-gutter-sm-2{padding:20px!important}.pr-gutter-sm-2,.px-gutter-sm-2{padding-right:20px!important}.pr-gutter-sm-3,.px-gutter-sm-3{padding-right:30px!important}.pl-gutter-sm-3,.px-gutter-sm-3{padding-left:30px!important}.pt-gutter-sm-3,.py-gutter-sm-3{padding-top:30px!important}.pb-gutter-sm-3,.py-gutter-sm-3{padding-bottom:30px!important}.m-gutter-sm-3{margin:30px!important}.p-gutter-sm-3{padding:30px!important}}@media (min-width:768px){.col-md-2-5{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.mt-gutter-md,.my-gutter-md{margin-top:30px!important}.mr-gutter-md,.mx-gutter-md{margin-right:30px!important}.ml-gutter-md,.mx-gutter-md{margin-left:30px!important}.mb-gutter-md,.my-gutter-md{margin-bottom:30px!important}.pt-gutter-md,.py-gutter-md{padding-top:30px!important}.pr-gutter-md,.px-gutter-md{padding-right:30px!important}.pl-gutter-md,.px-gutter-md{padding-left:30px!important}.pb-gutter-md,.py-gutter-md{padding-bottom:30px!important}.m-gutter-md{margin:30px!important}.mr-gutter-md-1,.mx-gutter-md-1{margin-right:10px!important}.ml-gutter-md-1,.mx-gutter-md-1{margin-left:10px!important}.mt-gutter-md-1,.my-gutter-md-1{margin-top:10px!important}.mb-gutter-md-1,.my-gutter-md-1{margin-bottom:10px!important}.p-gutter-md{padding:30px!important}.pr-gutter-md-1,.px-gutter-md-1{padding-right:10px!important}.pl-gutter-md-1,.px-gutter-md-1{padding-left:10px!important}.pt-gutter-md-1,.py-gutter-md-1{padding-top:10px!important}.pb-gutter-md-1,.py-gutter-md-1{padding-bottom:10px!important}.m-gutter-md-1{margin:10px!important}.ml-gutter-md-2,.mx-gutter-md-2{margin-left:20px!important}.mt-gutter-md-2,.my-gutter-md-2{margin-top:20px!important}.mb-gutter-md-2,.my-gutter-md-2{margin-bottom:20px!important}.p-gutter-md-1{padding:10px!important}.pl-gutter-md-2,.px-gutter-md-2{padding-left:20px!important}.pt-gutter-md-2,.py-gutter-md-2{padding-top:20px!important}.pb-gutter-md-2,.py-gutter-md-2{padding-bottom:20px!important}.m-gutter-md-2{margin:20px!important}.mr-gutter-md-2,.mx-gutter-md-2{margin-right:20px!important}.mr-gutter-md-3,.mx-gutter-md-3{margin-right:30px!important}.ml-gutter-md-3,.mx-gutter-md-3{margin-left:30px!important}.mt-gutter-md-3,.my-gutter-md-3{margin-top:30px!important}.mb-gutter-md-3,.my-gutter-md-3{margin-bottom:30px!important}.p-gutter-md-2{padding:20px!important}.pr-gutter-md-2,.px-gutter-md-2{padding-right:20px!important}.pr-gutter-md-3,.px-gutter-md-3{padding-right:30px!important}.pl-gutter-md-3,.px-gutter-md-3{padding-left:30px!important}.pt-gutter-md-3,.py-gutter-md-3{padding-top:30px!important}.pb-gutter-md-3,.py-gutter-md-3{padding-bottom:30px!important}.m-gutter-md-3{margin:30px!important}.p-gutter-md-3{padding:30px!important}}@media (min-width:992px){.col-lg-2-5{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.mt-gutter-lg,.my-gutter-lg{margin-top:30px!important}.mr-gutter-lg,.mx-gutter-lg{margin-right:30px!important}.ml-gutter-lg,.mx-gutter-lg{margin-left:30px!important}.mb-gutter-lg,.my-gutter-lg{margin-bottom:30px!important}.pt-gutter-lg,.py-gutter-lg{padding-top:30px!important}.pr-gutter-lg,.px-gutter-lg{padding-right:30px!important}.pl-gutter-lg,.px-gutter-lg{padding-left:30px!important}.pb-gutter-lg,.py-gutter-lg{padding-bottom:30px!important}.m-gutter-lg{margin:30px!important}.mr-gutter-lg-1,.mx-gutter-lg-1{margin-right:10px!important}.ml-gutter-lg-1,.mx-gutter-lg-1{margin-left:10px!important}.mt-gutter-lg-1,.my-gutter-lg-1{margin-top:10px!important}.mb-gutter-lg-1,.my-gutter-lg-1{margin-bottom:10px!important}.p-gutter-lg{padding:30px!important}.pr-gutter-lg-1,.px-gutter-lg-1{padding-right:10px!important}.pl-gutter-lg-1,.px-gutter-lg-1{padding-left:10px!important}.pt-gutter-lg-1,.py-gutter-lg-1{padding-top:10px!important}.pb-gutter-lg-1,.py-gutter-lg-1{padding-bottom:10px!important}.m-gutter-lg-1{margin:10px!important}.ml-gutter-lg-2,.mx-gutter-lg-2{margin-left:20px!important}.mt-gutter-lg-2,.my-gutter-lg-2{margin-top:20px!important}.mb-gutter-lg-2,.my-gutter-lg-2{margin-bottom:20px!important}.p-gutter-lg-1{padding:10px!important}.pl-gutter-lg-2,.px-gutter-lg-2{padding-left:20px!important}.pt-gutter-lg-2,.py-gutter-lg-2{padding-top:20px!important}.pb-gutter-lg-2,.py-gutter-lg-2{padding-bottom:20px!important}.m-gutter-lg-2{margin:20px!important}.mr-gutter-lg-2,.mx-gutter-lg-2{margin-right:20px!important}.mr-gutter-lg-3,.mx-gutter-lg-3{margin-right:30px!important}.ml-gutter-lg-3,.mx-gutter-lg-3{margin-left:30px!important}.mt-gutter-lg-3,.my-gutter-lg-3{margin-top:30px!important}.mb-gutter-lg-3,.my-gutter-lg-3{margin-bottom:30px!important}.p-gutter-lg-2{padding:20px!important}.pr-gutter-lg-2,.px-gutter-lg-2{padding-right:20px!important}.pr-gutter-lg-3,.px-gutter-lg-3{padding-right:30px!important}.pl-gutter-lg-3,.px-gutter-lg-3{padding-left:30px!important}.pt-gutter-lg-3,.py-gutter-lg-3{padding-top:30px!important}.pb-gutter-lg-3,.py-gutter-lg-3{padding-bottom:30px!important}.m-gutter-lg-3{margin:30px!important}.p-gutter-lg-3{padding:30px!important}}@media (min-width:1200px){.col-xl-2-5{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.mt-gutter-xl,.my-gutter-xl{margin-top:30px!important}.mr-gutter-xl,.mx-gutter-xl{margin-right:30px!important}.ml-gutter-xl,.mx-gutter-xl{margin-left:30px!important}.mb-gutter-xl,.my-gutter-xl{margin-bottom:30px!important}.pt-gutter-xl,.py-gutter-xl{padding-top:30px!important}.pr-gutter-xl,.px-gutter-xl{padding-right:30px!important}.pl-gutter-xl,.px-gutter-xl{padding-left:30px!important}.pb-gutter-xl,.py-gutter-xl{padding-bottom:30px!important}.m-gutter-xl{margin:30px!important}.mr-gutter-xl-1,.mx-gutter-xl-1{margin-right:10px!important}.ml-gutter-xl-1,.mx-gutter-xl-1{margin-left:10px!important}.mt-gutter-xl-1,.my-gutter-xl-1{margin-top:10px!important}.mb-gutter-xl-1,.my-gutter-xl-1{margin-bottom:10px!important}.p-gutter-xl{padding:30px!important}.pr-gutter-xl-1,.px-gutter-xl-1{padding-right:10px!important}.pl-gutter-xl-1,.px-gutter-xl-1{padding-left:10px!important}.pt-gutter-xl-1,.py-gutter-xl-1{padding-top:10px!important}.pb-gutter-xl-1,.py-gutter-xl-1{padding-bottom:10px!important}.m-gutter-xl-1{margin:10px!important}.ml-gutter-xl-2,.mx-gutter-xl-2{margin-left:20px!important}.mt-gutter-xl-2,.my-gutter-xl-2{margin-top:20px!important}.mb-gutter-xl-2,.my-gutter-xl-2{margin-bottom:20px!important}.p-gutter-xl-1{padding:10px!important}.pl-gutter-xl-2,.px-gutter-xl-2{padding-left:20px!important}.pt-gutter-xl-2,.py-gutter-xl-2{padding-top:20px!important}.pb-gutter-xl-2,.py-gutter-xl-2{padding-bottom:20px!important}.m-gutter-xl-2{margin:20px!important}.mr-gutter-xl-2,.mx-gutter-xl-2{margin-right:20px!important}.mr-gutter-xl-3,.mx-gutter-xl-3{margin-right:30px!important}.ml-gutter-xl-3,.mx-gutter-xl-3{margin-left:30px!important}.mt-gutter-xl-3,.my-gutter-xl-3{margin-top:30px!important}.mb-gutter-xl-3,.my-gutter-xl-3{margin-bottom:30px!important}.p-gutter-xl-2{padding:20px!important}.pr-gutter-xl-2,.px-gutter-xl-2{padding-right:20px!important}.pr-gutter-xl-3,.px-gutter-xl-3{padding-right:30px!important}.pl-gutter-xl-3,.px-gutter-xl-3{padding-left:30px!important}.pt-gutter-xl-3,.py-gutter-xl-3{padding-top:30px!important}.pb-gutter-xl-3,.py-gutter-xl-3{padding-bottom:30px!important}.m-gutter-xl-3{margin:30px!important}.p-gutter-xl-3{padding:30px!important}}

src/scss/_flex.scss

+// Flex center
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .flex#{$infix}-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .flex-x#{$infix}-center {
+      display: flex;
+      justify-content: center;
+    }
+    .flex-y#{$infix}-center {
+      display: flex;
+      align-items: center;
+    }
+    .flex#{$infix}-left {
+      display: flex !important;
+      justify-content: flex-start !important;
+    }
+    .flex#{$infix}-right {
+      display: flex !important;
+      justify-content: flex-end !important;
+    }
+    .flex#{$infix}-between {
+      display: flex !important;
+      justify-content: space-between !important;
+    }
+    .flex#{$infix}-around {
+      display: flex !important;
+      justify-content: space-around !important;
+    }
+    .flex#{$infix}-top {
+      display: flex !important;
+      align-items: flex-start !important;
+    }
+    .flex#{$infix}-bottom {
+      display: flex !important;
+      align-items: flex-end !important;
+    }
+    .flex#{$infix}-baseline {
+      display: flex !important;
+      align-items: baseline !important;
+    }
+    .flex#{$infix}-stretch {
+      display: flex !important;
+      align-items: stretch !important;
+    }
+
+    // Align
+    .flex-align#{$infix}-between {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: space-between !important;
+    }
+    .flex-align#{$infix}-around {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: space-around !important;
+    }
+    .flex-align#{$infix}-start {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: flex-start !important;
+    }
+    .flex-align#{$infix}-end {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: flex-end !important;
+    }
+    .flex-align#{$infix}-center {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: center !important;
+    }
+    .flex-align#{$infix}-stretch {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-content: stretch !important;
+    }
+  }
+}

src/scss/_pagination.scss

+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .pagination#{$infix}-1 {
+      @include pagination-size($pagination-padding-y-xs, $pagination-padding-x-xs, $font-size-xs, $line-height-xs, $border-radius-xs);
+    }
+    .pagination#{$infix}-2 {
+      @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
+    }
+    .pagination#{$infix}-3 {
+      @include pagination-size($pagination-padding-y, $pagination-padding-x, $font-size-base, $line-height-base, $border-radius);
+    }
+    .pagination#{$infix}-4 {
+      @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
+    }
+  }
+}

src/scss/_sizing.scss

+// Size
+@each $size, $length in $sizes {
+  .s-#{$size} {
+    width: $length !important;
+    height: $length !important;
+  }
+}
+
+.ms-100 {
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
+
+.min-vs-100 {
+  min-width: 100vw !important;
+  min-height: 100vh !important;
+}
+
+.vs-100 {
+  width: 100vw !important;
+  height: 100vh !important;
+}

src/scss/_svg.scss

+// Fill colors
+@each $color, $value in $theme-colors {
+  .fill-#{$color} {
+    fill: $value !important;
+  }
+}
+
+@each $color, $value in $custom-colors {
+  .fill-#{$color} {
+    fill: $value !important;
+  }
+}
+
+// Fill hover
+@each $color, $value in $theme-colors {
+  .fill-hover-#{$color} {
+    &:hover,
+    &:focus {
+      fill: $value !important;
+    }
+  }
+
+  @for $alpha from 1 through 9 {
+    .fill-hover-#{$color}-#{($alpha * 10)} {
+      &:hover,
+      &:focus {
+        fill: rgba($value, ($alpha * .1)) !important;
+      }
+    }
+  }
+}
+@each $color, $value in $custom-colors {
+  .fill-hover-#{$color} {
+    &:hover,
+    &:focus {
+      fill: $value !important;
+    }
+  }
+
+  @for $alpha from 1 through 9 {
+    .fill-hover-#{$color}-#{($alpha * 10)} {
+      &:hover,
+      &:focus {
+        fill: rgba($value, ($alpha * .1)) !important;
+      }
+    }
+  }
+}
+
+// Stroke colors
+@each $color, $value in $theme-colors {
+  .stroke-#{$color} {
+    stroke: $value !important;
+  }
+}
+
+@each $color, $value in $custom-colors {
+  .stroke-#{$color} {
+    stroke: $value !important;
+  }
+}
+
+// Stroke hover
+@each $color, $value in $theme-colors {
+  .stroke-hover-#{$color} {
+    &:hover,
+    &:focus {
+      stroke: $value !important;
+    }
+  }
+
+  @for $alpha from 1 through 9 {
+    .stroke-hover-#{$color}-#{($alpha * 10)} {
+      &:hover,
+      &:focus {
+        stroke: rgba($value, ($alpha * .1)) !important;
+      }
+    }
+  }
+}
+@each $color, $value in $custom-colors {
+  .stroke-hover-#{$color} {
+    &:hover,
+    &:focus {
+      stroke: $value !important;
+    }
+  }
+
+  @for $alpha from 1 through 9 {
+    .stroke-hover-#{$color}-#{($alpha * 10)} {
+      &:hover,
+      &:focus {
+        stroke: rgba($value, ($alpha * .1)) !important;
+      }
+    }
+  }
+}

src/scss/grid/main.scss

+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+@import "../functions";
+@import "../variables";
+@import "../mixins";
+@import "../grid";

src/scss/light/_variables.scss

+// Custom colors
+$custom-colors: ();
+
+// Opacity
+$enable-opacity: false;

src/scss/light/main.scss

+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+@import "../functions";
+@import "../variables";
+@import "../mixins";
+@import "variables";
+@import "../type";
+@import "../grid";
+@import "../form";
+@import "../button";
+@import "../collapse";
+@import "../dropdown";
+@import "../tribar";
+@import "../nav";
+@import "../navbar";
+@import "../card";
+@import "../breadcrumb";
+@import "../badge";
+@import "../progress";
+@import "../list-group";
+@import "../sidebar";
+@import "../background";
+@import "../border";
+@import "../flex";
+@import "../font";
+@import "../position";
+@import "../sizing";
+@import "../svg";
+@import "../text";

src/scss/mixins/_dropdown.scss

+// Sizes
+@mixin dropdown-menu-size($padding-y, $item-padding-y, $item-padding-x, $font-size) {
+  padding: $padding-y 0;
+  font-size: $font-size;
+
+  .dropdown-item {
+    padding: $item-padding-y $item-padding-x;
+  }
+}

src/scss/mixins/_grid.scss

+// Row sizes
+@mixin row-size($size) {
+  @include make-row($grid-gutter-width / $size);
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: $grid-gutter-width / 2 / $size;
+    padding-left: $grid-gutter-width / 2 / $size;
+  }
+}

dist/js/postboot.js

 /*!
- * PostBoot v1.0.0-rc3 (https://tarkhov.github.io/postboot/)
+ * PostBoot v1.0.0-rc4 (https://tarkhov.github.io/postboot/)
  * Copyright 2016-2019 Alexander Tarkhov
@@ -4,0 +4,0 @@ * Licensed under MIT

Gruntfile.js

@@ -65,3 +65,3 @@ module.exports = function (grunt) {
           'node_modules/prismjs/prism.js',
-          'node_modules/@fortawesome/fontawesome-free/js/all.min.js',
+          // 'node_modules/@fortawesome/fontawesome-free/js/all.min.js',
           'dist/js/<%= pkg.name %>.min.js'
@@ -92,3 +92,5 @@ ],
         files: {
-          'dist/css/<%= pkg.name %>.css': 'src/scss/main.scss'
+          'dist/css/<%= pkg.name %>.css': 'src/scss/main.scss',
+          'dist/css/<%= pkg.name %>-grid.css': 'src/scss/grid/main.scss',
+          'dist/css/<%= pkg.name %>-light.css': 'src/scss/light/main.scss'
         }
@@ -106,3 +108,5 @@ },
         files: {
-          'dist/css/<%= pkg.name %>.css': 'dist/css/<%= pkg.name %>.css'
+          'dist/css/<%= pkg.name %>.css': 'dist/css/<%= pkg.name %>.css',
+          'dist/css/<%= pkg.name %>-grid.css': 'dist/css/<%= pkg.name %>-grid.css',
+          'dist/css/<%= pkg.name %>-light.css': 'dist/css/<%= pkg.name %>-light.css'
         }
@@ -119,4 +123,7 @@ },
       dist: {
-        src: 'dist/css/<%= pkg.name %>.css',
-        dest: 'dist/css/<%= pkg.name %>.min.css'
+        files: {
+          'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
+          'dist/css/<%= pkg.name %>-grid.min.css': 'dist/css/<%= pkg.name %>-grid.css',
+          'dist/css/<%= pkg.name %>-light.min.css': 'dist/css/<%= pkg.name %>-light.css'
+        }
       },
@@ -127,3 +134,3 @@ docs: {
             'node_modules/bootstrap/dist/css/bootstrap.min.css',
-            '<%= cssmin.dist.dest %>',
+            'dist/css/<%= pkg.name %>.min.css',
             'node_modules/prismjs/themes/prism.css',
@@ -130,0 +137,0 @@ 'node_modules/@fortawesome/fontawesome-free/css/svg-with-js.min.css',

package.json

 {
   "name": "postboot",
   "description": "Web app prototyping library based on Bootstrap framework.",
-  "version": "1.0.0-rc3",
+  "version": "1.0.0-rc4",
   "keywords": [
@@ -6,0 +6,0 @@ "bootstrap",

README.md

@@ -29,7 +29,7 @@ # PostBoot
 
-[Download](https://github.com/tarkhov/postboot/releases/download/v1.0.0-rc3/postboot-1.0.0-rc3.zip) package and unpack it or use following commands:
+[Download](https://github.com/tarkhov/postboot/releases/download/v1.0.0-rc4/postboot-1.0.0-rc4.zip) package and unpack it or use following commands:
 
 ```bash
-wget -O https://github.com/tarkhov/postboot/releases/download/v1.0.0-rc3/postboot-1.0.0-rc3.zip
-unzip postboot-1.0.0-rc3.zip
+wget -O https://github.com/tarkhov/postboot/releases/download/v1.0.0-rc4/postboot-1.0.0-rc4.zip
+unzip postboot-1.0.0-rc4.zip
 ```
@@ -40,3 +40,3 @@
 ```bash
-npm install postboot@1.0.0-rc3
+npm install postboot@1.0.0-rc4
 ```
@@ -64,3 +64,3 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-<link rel="stylesheet" href="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc3/dist/css/postboot.min.css">
+<link rel="stylesheet" href="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc4/dist/css/postboot.min.css">
 
@@ -71,3 +71,3 @@ <!-- JS -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc3/dist/js/postboot.min.js"></script>
+<script src="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc4/dist/js/postboot.min.js"></script>
 ```
@@ -74,0 +74,0 @@

src/scss/_background.scss

@@ -9,11 +9,13 @@ // Custom
 // Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in $theme-colors {
-    .bg-#{$color}-#{($alpha * 10)} {
-      background-color: rgba($value, ($alpha * .1)) !important;
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in $theme-colors {
+      .bg-#{$color}-#{($alpha * 10)} {
+        background-color: rgba($value, ($alpha * .1)) !important;
+      }
     }
-  }
-  @each $color, $value in $custom-colors {
-    .bg-#{$color}-#{($alpha * 10)} {
-      background-color: rgba($value, ($alpha * .1)) !important;
+    @each $color, $value in $custom-colors {
+      .bg-#{$color}-#{($alpha * 10)} {
+        background-color: rgba($value, ($alpha * .1)) !important;
+      }
     }
@@ -31,6 +33,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .bg-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        background-color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .bg-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          background-color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -47,6 +51,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .bg-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        background-color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .bg-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          background-color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -53,0 +59,0 @@ }

src/scss/_badge.scss

@@ -12,16 +12,18 @@ // Custom
 // Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in $theme-colors {
-    .badge-#{$color}-#{($alpha * 10)} {
-      @include badge-variant(rgba($value, ($alpha * .1)));
-      @if $color == 'warning' {
-        color: $white;
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in $theme-colors {
+      .badge-#{$color}-#{($alpha * 10)} {
+        @include badge-variant(rgba($value, ($alpha * .1)));
+        @if $color == 'warning' {
+          color: $white;
+        }
       }
     }
-  }
-  @each $color, $value in $custom-colors {
-    .badge-#{$color}-#{($alpha * 10)} {
-      @include badge-variant(rgba($value, ($alpha * .1)));
-      @if $color == 'orange' {
-        color: $white;
+    @each $color, $value in $custom-colors {
+      .badge-#{$color}-#{($alpha * 10)} {
+        @include badge-variant(rgba($value, ($alpha * .1)));
+        @if $color == 'orange' {
+          color: $white;
+        }
       }
@@ -28,0 +30,0 @@ }

src/scss/_border.scss

@@ -0,1 +1,16 @@
+// Responsive
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @if $breakpoint != 'xs' {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .border#{$infix}        { border: $border-width solid $border-color !important; }
+      .border#{$infix}-top    { border-top: $border-width solid $border-color !important; }
+      .border#{$infix}-right  { border-right: $border-width solid $border-color !important; }
+      .border#{$infix}-bottom { border-bottom: $border-width solid $border-color !important; }
+      .border#{$infix}-left   { border-left: $border-width solid $border-color !important; }
+    }
+  }
+}
+
 // Custom
@@ -9,11 +24,13 @@ @each $color, $value in map-remove($custom-colors, "white") {
 // Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in $theme-colors {
-    .border-#{$color}-#{($alpha * 10)} {
-      border-color: rgba($value, ($alpha * .1)) !important;
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in $theme-colors {
+      .border-#{$color}-#{($alpha * 10)} {
+        border-color: rgba($value, ($alpha * .1)) !important;
+      }
     }
-  }
-  @each $color, $value in $custom-colors {
-    .border-#{$color}-#{($alpha * 10)} {
-      border-color: rgba($value, ($alpha * .1)) !important;
+    @each $color, $value in $custom-colors {
+      .border-#{$color}-#{($alpha * 10)} {
+        border-color: rgba($value, ($alpha * .1)) !important;
+      }
     }
@@ -31,6 +48,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .border-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        border-color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .border-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          border-color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -47,6 +66,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .border-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        border-color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .border-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          border-color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -67,8 +88,22 @@ }
 // Width
-@for $width from 1 through $border-widths {
-  .border-#{$width} { border-width: #{$width}px !important; }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-  @each $position in $position-properties {
-    .border-#{$position}-#{$width} { border-#{$position}-width: #{$width}px !important; }
+    @if $breakpoint != 'xs' {
+      .border#{$infix}-0 { border-width: 0 !important; }
+
+      @each $position in $position-properties {
+        .border-#{$position}#{$infix}-0 { border-#{$position}-width: 0 !important; }
+      }
+    }
+
+    @for $width from 1 through $border-widths {
+      .border#{$infix}-#{$width} { border-width: #{$width}px !important; }
+
+      @each $position in $position-properties {
+        .border-#{$position}#{$infix}-#{$width} { border-#{$position}-width: #{$width}px !important; }
+      }
+    }
   }
 }

src/scss/_breadcrumb.scss

@@ -22,1 +22,18 @@ // Colors
 }
+
+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .breadcrumb#{$infix}-1 {
+      @include breadcrumb-size($breadcrumb-padding-y-xs, $breadcrumb-padding-x-xs, $breadcrumb-font-size-xs, $breadcrumb-border-radius-xs, $breadcrumb-item-padding-xs);
+    }
+    .breadcrumb#{$infix}-2 {
+      @include breadcrumb-size($breadcrumb-padding-y-sm, $breadcrumb-padding-x-sm, $breadcrumb-font-size-sm, $breadcrumb-border-radius-sm, $breadcrumb-item-padding-sm);
+    }
+    .breadcrumb#{$infix}-3 {
+      @include breadcrumb-size($breadcrumb-padding-y, $breadcrumb-padding-x, $font-size-base, $breadcrumb-border-radius, $breadcrumb-item-padding);
+    }
+  }
+}

src/scss/_button.scss

@@ -1,9 +0,1 @@
-// Sizes
-.btn-xs {
-  @include button-size($input-btn-padding-y-xs, $input-btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs);
-}
-.btn-xl {
-  @include button-size($input-btn-padding-y-xl, $input-btn-padding-x-xl, $font-size-xl, $line-height-xl, $btn-border-radius-xl);
-}
-
 // Link
@@ -67,10 +59,20 @@ .btn-outline-link {
 // Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in $theme-colors {
-    .btn-#{$color}-#{($alpha * 10)} {
-      @include button-variant(rgba($value, ($alpha * .1)), transparent);
-      @if $color == 'warning' {
-        &,
-        &:hover,
-        &:focus {
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in $theme-colors {
+      .btn-#{$color}-#{($alpha * 10)} {
+        @include button-variant(rgba($value, ($alpha * .1)), transparent);
+        @if $color == 'warning' {
+          &,
+          &:hover,
+          &:focus {
+            color: $white;
+          }
+        }
+      }
+    }
+    @each $color, $value in $custom-colors {
+      .btn-#{$color}-#{($alpha * 10)} {
+        @include button-variant(rgba($value, ($alpha * .1)), transparent);
+        @if $color == 'orange' {
           color: $white;
@@ -81,12 +83,68 @@ }
   }
-  @each $color, $value in $custom-colors {
-    .btn-#{$color}-#{($alpha * 10)} {
-      @include button-variant(rgba($value, ($alpha * .1)), transparent);
-      @if $color == 'orange' {
-        color: $white;
-      }
+}
+
+// Hover
+@each $color, $value in $theme-colors {
+  .btn-hover-#{$color} {
+    @if $color == 'warning' {
+      @include button-hover-variant($value, $value, $white);
+    } @else {
+      @include button-hover-variant($value, $value);
     }
   }
 }
+@each $color, $value in $custom-colors {
+  .btn-hover-#{$color} {
+    @if $color == 'orange' {
+      @include button-hover-variant($value, $value, $white);
+    } @else {
+      @include button-hover-variant($value, $value);
+    }
+  }
+}
 
+// Active
+@each $color, $value in $theme-colors {
+  .btn-active-#{$color} {
+    @if $color == 'warning' {
+      @include button-active-variant($value, $value, $white);
+    } @else {
+      @include button-active-variant($value, $value);
+    }
+  }
+}
+@each $color, $value in $custom-colors {
+  .btn-active-#{$color} {
+    @if $color == 'orange' {
+      @include button-active-variant($value, $value, $white);
+    } @else {
+      @include button-active-variant($value, $value);
+    }
+  }
+}
+
+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .btn#{$infix}-1 {
+      @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-line-height-xs, $btn-border-radius-xs);
+    }
+    .btn#{$infix}-2 {
+      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+    }
+    .btn#{$infix}-3 {
+      @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+    }
+    .btn#{$infix}-4 {
+      @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+    }
+    .btn#{$infix}-5 {
+      @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $btn-font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
+    }
+  }
+}
+
+
 // Circle
@@ -99,16 +157,25 @@ .btn-circle {
 
-  @include button-circle-size($font-size-base);
+  @include button-circle-size($btn-font-size);
 
-  &.btn-xs {
-    @include button-circle-size($font-size-xs);
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      &.btn#{$infix}-1 {
+        @include button-circle-size($btn-font-size-xs);
+      }
+      &.btn#{$infix}-2 {
+        @include button-circle-size($btn-font-size-sm);
+      }
+      &.btn#{$infix}-3 {
+        @include button-circle-size($btn-font-size);
+      }
+      &.btn#{$infix}-4 {
+        @include button-circle-size($btn-font-size-lg);
+      }
+      &.btn#{$infix}-5 {
+        @include button-circle-size($btn-font-size-xl);
+      }
+    }
   }
-  &.btn-sm {
-    @include button-circle-size($font-size-sm);
-  }
-  &.btn-lg {
-    @include button-circle-size($font-size-lg);
-  }
-  &.btn-xl {
-    @include button-circle-size($font-size-xl);
-  }
 }
@@ -120,1 +187,13 @@
 }
+
+// Responsive block
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .btn#{$infix}-block {
+      display: block;
+      width: 100%;
+    }
+  }
+}

src/scss/_card.scss

@@ -24,3 +24,3 @@ // Image position
   margin-left: -($card-spacer-x / 2);
-  border-top: 0;
+  border-top: 0 !important;
 }
@@ -33,2 +33,19 @@
 
+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .card#{$infix}-1 {
+      @include card-size($card-spacer-y-xs, $card-spacer-x-xs, $font-size-xs, $nav-link-padding-y-xs, $nav-link-padding-x-xs);
+    }
+    .card#{$infix}-2 {
+      @include card-size($card-spacer-y-sm, $card-spacer-x-sm, $font-size-sm, $nav-link-padding-y-sm, $nav-link-padding-x-sm);
+    }
+    .card#{$infix}-3 {
+      @include card-size($card-spacer-y, $card-spacer-x, $font-size-base, $nav-link-padding-y, $nav-link-padding-x);
+    }
+  }
+}
+
 // Pill
@@ -70,21 +87,1 @@ .card-pill {
 }
-
-// Sizes
-.card-xs {
-  @include card-size($card-spacer-y-xs, $card-spacer-x-xs, $font-size-xs, $nav-link-padding-y-xs, $nav-link-padding-x-xs);
-
-  @include media-breakpoint-down(sm) {
-    &-down {
-      @include card-size($card-spacer-y-xs, $card-spacer-x-xs, $font-size-xs, $nav-link-padding-y-xs, $nav-link-padding-x-xs);
-    }
-  }
-}
-.card-sm {
-  @include card-size($card-spacer-y-sm, $card-spacer-x-sm, $font-size-sm, $nav-link-padding-y-sm, $nav-link-padding-x-sm);
-
-  @include media-breakpoint-down(md) {
-    &-down {
-      @include card-size($card-spacer-y-sm, $card-spacer-x-sm, $font-size-sm, $nav-link-padding-y-sm, $nav-link-padding-x-sm);
-    }
-  }
-}

src/scss/_dropdown.scss

@@ -165,1 +165,18 @@ // Position
 }
+
+// Size
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-1 {
+      @include dropdown-menu-size($dropdown-padding-y-xs, $dropdown-item-padding-y-xs, $dropdown-item-padding-x-xs, $dropdown-font-size-xs);
+    }
+    .dropdown-menu#{$infix}-2 {
+      @include dropdown-menu-size($dropdown-padding-y-sm, $dropdown-item-padding-y-sm, $dropdown-item-padding-x-sm, $dropdown-font-size-sm);
+    }
+    .dropdown-menu#{$infix}-3 {
+      @include dropdown-menu-size($dropdown-padding-y, $dropdown-item-padding-y, $dropdown-item-padding-x, $dropdown-font-size);
+    }
+  }
+}

src/scss/_form.scss

@@ -0,1 +1,21 @@
+// Input size
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .input#{$infix}-1 {
+      @include input-size($input-height-xs, $input-padding-y-xs, $input-padding-x-xs, $input-font-size-xs, $input-line-height-xs, $input-border-radius-xs);
+    }
+    .input#{$infix}-2 {
+      @include input-size($input-height-sm, $input-padding-y-sm, $input-padding-x-sm, $input-font-size-sm, $input-line-height-sm, $input-border-radius-sm);
+    }
+    .input#{$infix}-3 {
+      @include input-size($input-height, $input-padding-y, $input-padding-x, $input-font-size, $input-line-height, $input-border-radius);
+    }
+    .input#{$infix}-4 {
+      @include input-size($input-height-lg, $input-padding-y-lg, $input-padding-x-lg, $input-font-size-lg, $input-line-height-lg, $input-border-radius-lg);
+    }
+  }
+}
+
 // Input material
@@ -32,3 +52,3 @@ .input-material {
 
-// Dark
+// Dark input
 .input-dark {
@@ -63,2 +83,3 @@ &,
 
+// Input color
 @each $color, $value in map-remove($theme-colors, "dark", "light") {
@@ -75,14 +96,16 @@ .input-#{$color} {
 
-// Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in map-remove($theme-colors, "light") {
-    .input-#{$color}-#{($alpha * 10)} {
-      @include input-dark-variant(rgba($value, ($alpha * .1)));
+// Input opacity
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in map-remove($theme-colors, "light") {
+      .input-#{$color}-#{($alpha * 10)} {
+        @include input-dark-variant(rgba($value, ($alpha * .1)));
+      }
     }
-  }
-  @each $color, $value in $custom-colors {
-    .input-#{$color}-#{($alpha * 10)} {
-      @include input-dark-variant(rgba($value, ($alpha * .1)));
+    @each $color, $value in $custom-colors {
+      .input-#{$color}-#{($alpha * 10)} {
+        @include input-dark-variant(rgba($value, ($alpha * .1)));
+      }
     }
   }
 }

src/scss/_grid.scss

@@ -27,2 +27,34 @@ // Container breakpoints
 
+// Row sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .row#{$infix}-1 {
+      @include row-size(3);
+    }
+    .row#{$infix}-2 {
+      @include row-size(1.5);
+    }
+    .row#{$infix}-3 {
+      @include row-size(1);
+    }
+  }
+}
+
+// Column sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint);
+
+  .col#{$infix}-2-5 {
+    @include make-col-ready();
+  }
+
+  @include media-breakpoint-up($breakpoint) {
+    .col#{$infix}-2-5 {
+      @include make-col(2.4);
+    }
+  }
+}
+
 // Margin and padding
@@ -33,15 +65,21 @@ @each $breakpoint in map-keys($grid-breakpoints) {
 
-    @each $prop, $abbrev in (margin: m, padding: p) {
-      .#{$abbrev}#{$infix}-gutter  { #{$prop}:        $grid-gutter-width !important; }
-      .#{$abbrev}t#{$infix}-gutter { #{$prop}-top:    $grid-gutter-width !important; }
-      .#{$abbrev}r#{$infix}-gutter { #{$prop}-right:  $grid-gutter-width !important; }
-      .#{$abbrev}b#{$infix}-gutter { #{$prop}-bottom: $grid-gutter-width !important; }
-      .#{$abbrev}l#{$infix}-gutter { #{$prop}-left:   $grid-gutter-width !important; }
-      .#{$abbrev}x#{$infix}-gutter {
-        #{$prop}-right: $grid-gutter-width !important;
-        #{$prop}-left:  $grid-gutter-width !important;
+    @each $size, $width in $grid-gutter-widths {
+      @if $size != '' {
+        $size: "-#{$size}";
       }
-      .#{$abbrev}y#{$infix}-gutter {
-        #{$prop}-top:    $grid-gutter-width !important;
-        #{$prop}-bottom: $grid-gutter-width !important;
+
+      @each $prop, $abbrev in (margin: m, padding: p) {
+        .#{$abbrev}-gutter#{$infix}#{$size}  { #{$prop}:        $width !important; }
+        .#{$abbrev}t-gutter#{$infix}#{$size} { #{$prop}-top:    $width !important; }
+        .#{$abbrev}r-gutter#{$infix}#{$size} { #{$prop}-right:  $width !important; }
+        .#{$abbrev}b-gutter#{$infix}#{$size} { #{$prop}-bottom: $width !important; }
+        .#{$abbrev}l-gutter#{$infix}#{$size} { #{$prop}-left:   $width !important; }
+        .#{$abbrev}x-gutter#{$infix}#{$size} {
+          #{$prop}-right: $width !important;
+          #{$prop}-left:  $width !important;
+        }
+        .#{$abbrev}y-gutter#{$infix}#{$size} {
+          #{$prop}-top:    $width !important;
+          #{$prop}-bottom: $width !important;
+        }
       }
@@ -48,0 +86,0 @@ }

src/scss/_list-group.scss

@@ -1,57 +0,91 @@
-// Sizes
-.list-group-xs {
-  @include list-group-size($list-group-item-padding-y-xs, $list-group-item-padding-x-xs, $font-size-xs);
+// Striped
+.list-group-striped {
+  .list-group-item {
+    &:nth-child(even) {
+      background-color: $list-group-striped-bg;
+    }
+  }
 }
-.list-group-y-xs {
-  @include list-group-size-y($list-group-item-padding-y-xs);
-}
-.list-group-x-xs {
-  @include list-group-size-x($list-group-item-padding-x-xs);
-}
-.list-group-item-xs {
-  @include list-group-item-size($list-group-item-padding-y-xs, $list-group-item-padding-x-xs, $font-size-xs);
-}
-.list-group-item-y-xs {
-  @include list-group-item-size-y($list-group-item-padding-y-xs);
-}
-.list-group-item-x-xs {
-  @include list-group-item-size-x($list-group-item-padding-x-xs);
-}
 
-.list-group-sm {
-  @include list-group-size($list-group-item-padding-y-sm, $list-group-item-padding-x-sm, $font-size-sm);
-}
-.list-group-y-sm {
-  @include list-group-size-y($list-group-item-padding-y-sm);
-}
-.list-group-x-sm {
-  @include list-group-size-x($list-group-item-padding-x-sm);
-}
-.list-group-item-sm {
-  @include list-group-item-size($list-group-item-padding-y-sm, $list-group-item-padding-x-sm, $font-size-sm);
-}
-.list-group-item-y-sm {
-  @include list-group-item-size-y($list-group-item-padding-y-sm);
-}
-.list-group-item-x-sm {
-  @include list-group-item-size-x($list-group-item-padding-x-sm);
-}
+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-.list-group-lg {
-  @include list-group-size($list-group-item-padding-y-lg, $list-group-item-padding-x-lg, $font-size-lg);
+    .list-group#{$infix}-1 {
+      @include list-group-size($list-group-item-padding-y-xs, $list-group-item-padding-x-xs, $font-size-xs);
+    }
+    .list-group-y#{$infix}-1 {
+      @include list-group-size-y($list-group-item-padding-y-xs);
+    }
+    .list-group-x#{$infix}-1 {
+      @include list-group-size-x($list-group-item-padding-x-xs);
+    }
+    .list-group-item#{$infix}-1 {
+      @include list-group-item-size($list-group-item-padding-y-xs, $list-group-item-padding-x-xs, $font-size-xs);
+    }
+    .list-group-item-y#{$infix}-1 {
+      @include list-group-item-size-y($list-group-item-padding-y-xs);
+    }
+    .list-group-item-x#{$infix}-1 {
+      @include list-group-item-size-x($list-group-item-padding-x-xs);
+    }
+
+    .list-group#{$infix}-2 {
+      @include list-group-size($list-group-item-padding-y-sm, $list-group-item-padding-x-sm, $font-size-sm);
+    }
+    .list-group-y#{$infix}-2 {
+      @include list-group-size-y($list-group-item-padding-y-sm);
+    }
+    .list-group-x#{$infix}-2 {
+      @include list-group-size-x($list-group-item-padding-x-sm);
+    }
+    .list-group-item#{$infix}-2 {
+      @include list-group-item-size($list-group-item-padding-y-sm, $list-group-item-padding-x-sm, $font-size-sm);
+    }
+    .list-group-item-y#{$infix}-2 {
+      @include list-group-item-size-y($list-group-item-padding-y-sm);
+    }
+    .list-group-item-x#{$infix}-2 {
+      @include list-group-item-size-x($list-group-item-padding-x-sm);
+    }
+
+    .list-group#{$infix}-3 {
+      @include list-group-size($list-group-item-padding-y, $list-group-item-padding-x, $font-size-base);
+    }
+    .list-group-y#{$infix}-3 {
+      @include list-group-size-y($list-group-item-padding-y);
+    }
+    .list-group-x#{$infix}-3 {
+      @include list-group-size-x($list-group-item-padding-x);
+    }
+    .list-group-item#{$infix}-3 {
+      @include list-group-item-size($list-group-item-padding-y, $list-group-item-padding-x, $font-size-base);
+    }
+    .list-group-item-y#{$infix}-3 {
+      @include list-group-item-size-y($list-group-item-padding-y);
+    }
+    .list-group-item-x#{$infix}-3 {
+      @include list-group-item-size-x($list-group-item-padding-x);
+    }
+
+    .list-group#{$infix}-4 {
+      @include list-group-size($list-group-item-padding-y-lg, $list-group-item-padding-x-lg, $font-size-lg);
+    }
+    .list-group-y#{$infix}-4 {
+      @include list-group-size-y($list-group-item-padding-y-lg);
+    }
+    .list-group-x#{$infix}-4 {
+      @include list-group-size-x($list-group-item-padding-x-lg);
+    }
+    .list-group-item#{$infix}-4 {
+      @include list-group-item-size($list-group-item-padding-y-lg, $list-group-item-padding-x-lg, $font-size-lg);
+    }
+    .list-group-item-y#{$infix}-4 {
+      @include list-group-item-size-y($list-group-item-padding-y-lg);
+    }
+    .list-group-item-x#{$infix}-4 {
+      @include list-group-item-size-x($list-group-item-padding-x-lg);
+    }
+  }
 }
-.list-group-y-lg {
-  @include list-group-size-y($list-group-item-padding-y-lg);
-}
-.list-group-x-lg {
-  @include list-group-size-x($list-group-item-padding-x-lg);
-}
-.list-group-item-lg {
-  @include list-group-item-size($list-group-item-padding-y-lg, $list-group-item-padding-x-lg, $font-size-lg);
-}
-.list-group-item-y-lg {
-  @include list-group-item-size-y($list-group-item-padding-y-lg);
-}
-.list-group-item-x-lg {
-  @include list-group-item-size-x($list-group-item-padding-x-lg);
-}

src/scss/_mixins.scss

 @import "mixins/breadcrumb";
 @import "mixins/button";
 @import "mixins/card";
+@import "mixins/dropdown";
 @import "mixins/form";
+@import "mixins/grid";
 @import "mixins/list-group";
@@ -6,0 +8,0 @@ @import "mixins/nav";

src/scss/_nav.scss

@@ -122,39 +122,131 @@ // Active link
 
-// Sizes
-.nav-xs {
-  @include nav-size($nav-link-padding-y-xs, $nav-link-padding-x-xs, $font-size-xs);
-}
-.nav-y-xs {
-  @include nav-size-y($nav-link-padding-y-xs);
-}
-.nav-x-xs {
-  @include nav-size-x($nav-link-padding-x-xs);
-}
+// Tabs material
+.nav-tabs-material {
+  .nav-link {
+    border: none;
+    border-bottom: $nav-tabs-border-width solid transparent;
+    @include border-radius(0);
 
-.nav-sm {
-  @include nav-size($nav-link-padding-y-sm, $nav-link-padding-x-sm, $font-size-sm);
-}
-.nav-y-sm {
-  @include nav-size-y($nav-link-padding-y-sm);
-}
-.nav-x-sm {
-  @include nav-size-x($nav-link-padding-x-sm);
-}
+    &:hover,
+    &:focus {
+      border-bottom-color: $nav-tabs-link-active-color;
+    }
+  }
 
-.nav-lg {
-  @include nav-size($nav-link-padding-y-lg, $nav-link-padding-x-lg, $font-size-lg);
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-bottom-color: $nav-tabs-link-active-color;
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      &.nav-tabs#{$infix}-left {
+        .nav-link {
+          border: none;
+          border-right: $nav-tabs-border-width solid transparent;
+
+          &:hover,
+          &:focus {
+            border-right-color: $nav-tabs-link-active-color;
+          }
+        }
+
+        .nav-link.active,
+        .nav-item.show .nav-link {
+          border-right-color: $nav-tabs-link-active-color;
+        }
+      }
+
+      &.nav-tabs#{$infix}-right {
+        .nav-link {
+          border: none;
+          border-left: $nav-tabs-border-width solid transparent;
+
+          &:hover,
+          &:focus {
+            border-left-color: $nav-tabs-link-active-color;
+          }
+        }
+
+        .nav-link.active,
+        .nav-item.show .nav-link {
+          border-left-color: $nav-tabs-link-active-color;
+        }
+      }
+    }
+  }
+
+  &.nav-tabs-bottom {
+    .nav-link {
+      border: none;
+      border-top: $nav-tabs-border-width solid transparent;
+
+      &:hover,
+      &:focus {
+        border-top-color: $nav-tabs-link-active-color;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      border-top-color: $nav-tabs-link-active-color;
+    }
+  }
 }
-.nav-y-lg {
-  @include nav-size-y($nav-link-padding-y-lg);
-}
-.nav-x-lg {
-  @include nav-size-x($nav-link-padding-x-lg);
-}
 
-.nav-y-0 {
-  @include nav-size-y(0);
+// Sizes
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .nav-y#{$infix}-0 {
+      @include nav-size-y(0);
+    }
+    .nav-x#{$infix}-0 {
+      @include nav-size-x(0);
+    }
+
+    .nav#{$infix}-1 {
+      @include nav-size($nav-link-padding-y-xs, $nav-link-padding-x-xs, $font-size-xs);
+    }
+    .nav-y#{$infix}-1 {
+      @include nav-size-y($nav-link-padding-y-xs);
+    }
+    .nav-x#{$infix}-1 {
+      @include nav-size-x($nav-link-padding-x-xs);
+    }
+
+    .nav#{$infix}-2 {
+      @include nav-size($nav-link-padding-y-sm, $nav-link-padding-x-sm, $font-size-sm);
+    }
+    .nav-y#{$infix}-2 {
+      @include nav-size-y($nav-link-padding-y-sm);
+    }
+    .nav-x#{$infix}-2 {
+      @include nav-size-x($nav-link-padding-x-sm);
+    }
+
+    .nav#{$infix}-3 {
+      @include nav-size($nav-link-padding-y, $nav-link-padding-x, $font-size-base);
+    }
+    .nav-y#{$infix}-3 {
+      @include nav-size-y($nav-link-padding-y);
+    }
+    .nav-x#{$infix}-3 {
+      @include nav-size-x($nav-link-padding-x);
+    }
+
+    .nav#{$infix}-4 {
+      @include nav-size($nav-link-padding-y-lg, $nav-link-padding-x-lg, $font-size-lg);
+    }
+    .nav-y#{$infix}-4 {
+      @include nav-size-y($nav-link-padding-y-lg);
+    }
+    .nav-x#{$infix}-4 {
+      @include nav-size-x($nav-link-padding-x-lg);
+    }
+  }
 }
-.nav-x-0 {
-  @include nav-size-x(0);
-}
 
@@ -161,0 +253,0 @@ // Tree

src/scss/_navbar.scss

@@ -41,4 +41,4 @@ // Triple bar
     .nav-link {
-      padding-right: .5rem;
-      padding-left: .5rem;
+      padding-right: $navbar-nav-link-padding-x;
+      padding-left: $navbar-nav-link-padding-x;
     }
@@ -99,41 +99,136 @@ }
 // Sizes
-.navbar-sm {
-  @include navbar-size($navbar-padding-y-sm, $font-size-sm, $font-size-base, $navbar-brand-padding-y-sm, $navbar-nav-padding-y-sm, $navbar-text-padding-y-sm, $navbar-nav-height-sm);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .navbar#{$infix}-1 {
+      @include navbar-size($navbar-padding-y-xs, $font-size-xs, $font-size-sm, $navbar-brand-padding-y-xs, $navbar-nav-link-padding-y-xs, $navbar-nav-height-xs);
+    }
+
+    .navbar#{$infix}-2 {
+      @include navbar-size($navbar-padding-y-sm, $font-size-sm, $font-size-base, $navbar-brand-padding-y-sm, $navbar-nav-link-padding-y-sm, $navbar-nav-height-sm);
+    }
+    .navbar#{$infix}-3 {
+      @include navbar-size($navbar-padding-y, $font-size-base, $font-size-lg, $navbar-brand-padding-y, $navbar-nav-link-padding-y, $navbar-nav-height);
+    }
+    .navbar#{$infix}-4 {
+      @include navbar-size($navbar-padding-y-lg, $font-size-lg, $font-size-xl, $navbar-brand-padding-y-lg, $navbar-nav-link-padding-y-lg, $navbar-nav-height-lg);
+    }
+  }
 }
-.navbar-lg {
-  @include navbar-size($navbar-padding-y-lg, $font-size-lg, $font-size-xl, $navbar-brand-padding-y-lg, $navbar-nav-padding-y-lg, $navbar-text-padding-y-lg, $navbar-nav-height-lg);
+
+// Nav size
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .navbar-nav-y#{$infix}-0 {
+      @include navbar-nav-size-y(0);
+    }
+    .navbar-nav-x#{$infix}-0 {
+      @include navbar-nav-size-x(0);
+    }
+
+    .navbar-nav#{$infix}-1 {
+      @include navbar-nav-size($navbar-nav-link-padding-y-xs, $navbar-nav-link-padding-x-xs, $font-size-xs);
+    }
+    .navbar-nav-y#{$infix}-1 {
+      @include navbar-nav-size-y($navbar-nav-link-padding-y-xs);
+    }
+    .navbar-nav-x#{$infix}-1 {
+      @include navbar-nav-size-x($navbar-nav-link-padding-x-xs);
+    }
+
+    .navbar-nav#{$infix}-2 {
+      @include navbar-nav-size($navbar-nav-link-padding-y-sm, $navbar-nav-link-padding-x-sm, $font-size-sm);
+    }
+    .navbar-nav-y#{$infix}-2 {
+      @include navbar-nav-size-y($navbar-nav-link-padding-y-sm);
+    }
+    .navbar-nav-x#{$infix}-2 {
+      @include navbar-nav-size-x($navbar-nav-link-padding-x-sm);
+    }
+
+    .navbar-nav#{$infix}-3 {
+      @include navbar-nav-size($navbar-nav-link-padding-y, $navbar-nav-link-padding-x, $font-size-base);
+    }
+    .navbar-nav-y#{$infix}-3 {
+      @include navbar-nav-size-y($navbar-nav-link-padding-y);
+    }
+    .navbar-nav-x#{$infix}-3 {
+      @include navbar-nav-size-x($navbar-nav-link-padding-x);
+    }
+
+    .navbar-nav#{$infix}-4 {
+      @include navbar-nav-size($navbar-nav-link-padding-y-lg, $navbar-nav-link-padding-x-lg, $font-size-lg);
+    }
+    .navbar-nav-y#{$infix}-4 {
+      @include navbar-nav-size-y($navbar-nav-link-padding-y-lg);
+    }
+    .navbar-nav-x#{$infix}-4 {
+      @include navbar-nav-size-x($navbar-nav-link-padding-x-lg);
+    }
+  }
 }
 
 // Padding
-.py-navbar {
-  padding-top: $navbar-height;
-  padding-bottom: $navbar-height;
-}
-.pt-navbar {
-  padding-top: $navbar-height;
-}
-.pb-navbar {
-  padding-bottom: $navbar-height;
-}
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-.py-navbar-sm {
-  padding-top: $navbar-height-sm;
-  padding-bottom: $navbar-height-sm;
-}
-.pt-navbar-sm {
-  padding-top: $navbar-height-sm;
-}
-.pb-navbar-sm {
-  padding-bottom: $navbar-height-sm;
-}
+    .py-navbar#{$infix} {
+      padding-top: $navbar-height;
+      padding-bottom: $navbar-height;
+    }
+    .pt-navbar#{$infix} {
+      padding-top: $navbar-height;
+    }
+    .pb-navbar#{$infix} {
+      padding-bottom: $navbar-height;
+    }
 
-.py-navbar-lg {
-  padding-top: $navbar-height-lg;
-  padding-bottom: $navbar-height-lg;
+    .py-navbar#{$infix}-1 {
+      padding-top: $navbar-height-xs;
+      padding-bottom: $navbar-height-xs;
+    }
+    .pt-navbar#{$infix}-1 {
+      padding-top: $navbar-height-xs;
+    }
+    .pb-navbar#{$infix}-1 {
+      padding-bottom: $navbar-height-xs;
+    }
+
+    .py-navbar#{$infix}-2 {
+      padding-top: $navbar-height-sm;
+      padding-bottom: $navbar-height-sm;
+    }
+    .pt-navbar#{$infix}-2 {
+      padding-top: $navbar-height-sm;
+    }
+    .pb-navbar#{$infix}-2 {
+      padding-bottom: $navbar-height-sm;
+    }
+
+    .py-navbar#{$infix}-3 {
+      padding-top: $navbar-height;
+      padding-bottom: $navbar-height;
+    }
+    .pt-navbar#{$infix}-3 {
+      padding-top: $navbar-height;
+    }
+    .pb-navbar#{$infix}-3 {
+      padding-bottom: $navbar-height;
+    }
+
+    .py-navbar#{$infix}-4 {
+      padding-top: $navbar-height-lg;
+      padding-bottom: $navbar-height-lg;
+    }
+    .pt-navbar#{$infix}-4 {
+      padding-top: $navbar-height-lg;
+    }
+    .pb-navbar#{$infix}-4 {
+      padding-bottom: $navbar-height-lg;
+    }
+  }
 }
-.pt-navbar-lg {
-  padding-top: $navbar-height-lg;
-}
-.pb-navbar-lg {
-  padding-bottom: $navbar-height-lg;
-}

src/scss/_progress.scss

 // Sizes
-.progress-xs {
-  @include progress-size($progress-height-xs, $progress-font-size-xs);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .progress#{$infix}-1 {
+      @include progress-size($progress-height-xs, $progress-font-size-xs);
+    }
+    .progress#{$infix}-2 {
+      @include progress-size($progress-height, $progress-font-size);
+    }
+    .progress#{$infix}-3 {
+      @include progress-size($progress-height-md, $progress-font-size-md);
+    }
+    .progress#{$infix}-4 {
+      @include progress-size($progress-height-lg, $progress-font-size-lg);
+    }
+    .progress#{$infix}-5 {
+      @include progress-size($progress-height-xl, $progress-font-size-xl);
+    }
+  }
 }
-.progress-md {
-  @include progress-size($progress-height-md, $progress-font-size-md);
-}
-.progress-lg {
-  @include progress-size($progress-height-lg, $progress-font-size-lg);
-}
-.progress-xl {
-  @include progress-size($progress-height-xl, $progress-font-size-xl);
-}

src/scss/_text.scss

@@ -7,10 +7,12 @@ // Custom
 // Opacity
-@for $alpha from 1 through 9 {
-  @each $color, $value in $theme-colors {
-    @include text-opacity-variant('.text-#{$color}-#{($alpha * 10)}', $value, ($alpha * .1));
-  }
-  @each $color, $value in $custom-colors {
-    @if $color not in 'white', 'black' and $alpha != 5 {
+@if $enable-opacity {
+  @for $alpha from 1 through 9 {
+    @each $color, $value in $theme-colors {
       @include text-opacity-variant('.text-#{$color}-#{($alpha * 10)}', $value, ($alpha * .1));
     }
+    @each $color, $value in $custom-colors {
+      @if $color not in 'white', 'black' and $alpha != 5 {
+        @include text-opacity-variant('.text-#{$color}-#{($alpha * 10)}', $value, ($alpha * .1));
+      }
+    }
   }
@@ -27,6 +29,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .text-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .text-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -43,6 +47,8 @@ }
 
-  @for $alpha from 1 through 9 {
-    .text-hover-#{$color}-#{($alpha * 10)} {
-      @include hover-focus {
-        color: rgba($value, ($alpha * .1)) !important;
+  @if $enable-opacity {
+    @for $alpha from 1 through 9 {
+      .text-hover-#{$color}-#{($alpha * 10)} {
+        @include hover-focus {
+          color: rgba($value, ($alpha * .1)) !important;
+        }
       }
@@ -49,0 +55,0 @@ }

src/scss/_variables.scss

@@ -13,2 +13,5 @@ // Custom colors
 
+// Opacity
+$enable-opacity: true !default;
+
 // Fonts
@@ -25,3 +28,4 @@ $font-size-xs:  .75rem !default;
 
-$font-sizes: (
+$font-sizes: () !default;
+$font-sizes: map-merge((
   1: $font-size-xs,
@@ -39,5 +43,6 @@ 2: $font-size-sm,
   12: $font-size-8xl
-) !default;
+), $font-sizes);
 
-$font-weights: (
+$font-weights: () !default;
+$font-weights: map-merge((
   "100": 100,
@@ -52,3 +57,3 @@ "200": 200,
   "900": 900
-) !default;
+), $font-weights);
 
@@ -62,3 +67,4 @@ // Transition
 // Border
-$border-styles: (
+$border-styles: () !default;
+$border-styles: map-merge((
   dashed: dashed,
@@ -68,3 +74,3 @@ dotted: dotted,
   solid: solid
-) !default;
+), $border-styles);
 
@@ -74,3 +80,4 @@ $border-widths: 5 !default;
 // Grid containers
-$container-breakpoints: (
+$container-breakpoints: () !default;
+$container-breakpoints: map-merge((
   md: map-remove($container-max-widths, sm),
@@ -81,3 +88,3 @@ lg: map-remove($container-max-widths, sm, md),
   )
-) !default;
+), $container-breakpoints);
 
@@ -88,3 +95,4 @@ $container-max-width-sm: map-get($container-max-widths, sm);
 
-$container-sizes: (
+$container-sizes: () !default;
+$container-sizes: map-merge((
   1: (
@@ -108,9 +116,19 @@ sm: $container-max-width-sm,
   )
-) !default;
+), $container-sizes);
 
-$container-size-breakpoints: (
+$container-size-breakpoints: () !default;
+$container-size-breakpoints: map-merge((
   2: map-remove(map-get($container-sizes, 2), sm),
   3: map-remove(map-get($container-sizes, 3), sm, md)
-) !default;
+), $container-size-breakpoints);
 
+// Grid gutter spacing
+$grid-gutter-widths: () !default;
+$grid-gutter-widths: map-merge((
+  '': $grid-gutter-width,
+  1: $grid-gutter-width / 3,
+  2: $grid-gutter-width / 1.5,
+  3: $grid-gutter-width
+), $grid-gutter-widths);
+
 // Components
@@ -128,5 +146,9 @@ $border-radius-circle: 50% !default;
 $input-btn-padding-x-xs: .25rem !default;
+$input-btn-font-size-xs: $font-size-xs !default;
+$input-btn-line-height-xs: $line-height-xs !default;
 
 $input-btn-padding-y-xl: .625rem !default;
 $input-btn-padding-x-xl: 1.25rem !default;
+$input-btn-font-size-xl: $font-size-xl !default;
+$input-btn-line-height-xl: $line-height-xl !default;
 
@@ -136,2 +158,12 @@ $btn-border-radius-xs: $border-radius-xs !default;
 
+$btn-padding-y-xs: $input-btn-padding-y-xs !default;
+$btn-padding-x-xs: $input-btn-padding-x-xs !default;
+$btn-font-size-xs: $input-btn-font-size-xs !default;
+$btn-line-height-xs: $input-btn-line-height-xs !default;
+
+$btn-padding-y-xl: $input-btn-padding-y-xl !default;
+$btn-padding-x-xl: $input-btn-padding-x-xl !default;
+$btn-font-size-xl: $input-btn-font-size-xl !default;
+$btn-line-height-xl: $input-btn-line-height-xl !default;
+
 $btn-state-bg-level: -9 !default;
@@ -142,2 +174,9 @@ $btn-state-color-level: 6 !default;
 // Form
+$input-line-height-xs:   $input-btn-line-height-xs !default;
+$input-height-xs:        calc(#{$input-line-height-xs * 1em} + #{$input-btn-padding-y-xs * 2} + #{$input-height-border}) !default;
+$input-padding-y-xs:     $input-btn-padding-y-xs !default;
+$input-padding-x-xs:     $input-btn-padding-x-xs !default;
+$input-font-size-xs:     $input-btn-font-size-xs !default;
+$input-border-radius-xs: $border-radius-xs !default;
+
 $input-dark-color: $white !default;
@@ -159,13 +198,21 @@ $input-dark-bg: $dark !default;
 // Navbar
-$navbar-padding-y-sm:       ($spacer * .25) !default;
-$navbar-brand-padding-y-sm: .1rem !default;
-$navbar-nav-padding-y-sm:   .25rem !default;
-$navbar-text-padding-y-sm:  .25rem !default;
+$navbar-nav-link-padding-y: $nav-link-padding-y !default;
 
-$navbar-padding-y-lg:       ($spacer * .75) !default;
-$navbar-brand-padding-y-lg: .5rem !default;
-$navbar-nav-padding-y-lg:   .675rem !default;
-$navbar-text-padding-y-lg:  .675rem !default;
+$navbar-padding-y-xs:          ($spacer * .1) !default;
+$navbar-brand-padding-y-xs:    .05rem !default;
+$navbar-nav-link-padding-y-xs: .1rem !default;
+$navbar-nav-link-padding-x-xs: .25rem !default;
 
+$navbar-padding-y-sm:          ($spacer * .25) !default;
+$navbar-brand-padding-y-sm:    .1rem !default;
+$navbar-nav-link-padding-y-sm: .25rem !default;
+$navbar-nav-link-padding-x-sm: .375rem !default;
+
+$navbar-padding-y-lg:          ($spacer * .75) !default;
+$navbar-brand-padding-y-lg:    .5rem !default;
+$navbar-nav-link-padding-y-lg: .675rem !default;
+$navbar-nav-link-padding-x-lg: .75rem !default;
+
 $navbar-height:    3.5rem !default;
+$navbar-height-xs: 1.5625rem !default;
 $navbar-height-sm: 2.2rem !default;
@@ -175,2 +222,3 @@ $navbar-height-lg: 4.75rem !default;
 $navbar-nav-height:    2.5rem !default;
+$navbar-nav-height-xs: 1.3125rem !default;
 $navbar-nav-height-sm: 1.8125rem !default;
@@ -214,4 +262,19 @@ $navbar-nav-height-lg: 3.25rem !default;
 
+$list-group-striped-bg: $light !default;
+
 // Breadcrumb
-$breadcrumb-dividers: (
+$breadcrumb-padding-y-xs: .25rem !default;
+$breadcrumb-padding-x-xs: .5rem !default;
+$breadcrumb-item-padding-xs: .25rem !default;
+$breadcrumb-font-size-xs: $font-size-xs !default;
+$breadcrumb-border-radius-xs: $border-radius-xs !default;
+
+$breadcrumb-padding-y-sm: .5rem !default;
+$breadcrumb-padding-x-sm: .75rem !default;
+$breadcrumb-item-padding-sm: .375rem !default;
+$breadcrumb-font-size-sm: $font-size-sm !default;
+$breadcrumb-border-radius-sm: $border-radius-sm !default;
+
+$breadcrumb-dividers: () !default;
+$breadcrumb-dividers: map-merge((
   rang:   "27E9",
@@ -221,3 +284,3 @@ raquo:  "00BB",
   rsaquo: "203A"
-) !default;
+), $breadcrumb-dividers);
 
@@ -237,2 +300,14 @@ $breadcrumb-dark-color:         rgba($white,1) !default;
 // Dropdown
+$dropdown-padding-y-xs: .375rem !default;
+$dropdown-padding-y-sm: .25rem !default;
+
+$dropdown-font-size-xs: $font-size-xs !default;
+$dropdown-font-size-sm: $font-size-sm !default;
+
+$dropdown-item-padding-y-xs: .1rem !default;
+$dropdown-item-padding-x-xs: .5rem !default;
+
+$dropdown-item-padding-y-sm: .15rem !default;
+$dropdown-item-padding-x-sm: 1rem !default;
+
 $dropdown-arrow-position:    5px !default;
@@ -246,2 +321,6 @@ $dropdown-arrow-width:       1rem !default;
 
+// Pagination
+$pagination-padding-y-xs: .1rem !default;
+$pagination-padding-x-xs: .25rem !default;
+
 // Position
@@ -248,0 +327,0 @@ $position-properties: top, right, bottom, left;

src/scss/main.scss

@@ -19,2 +19,3 @@ @import "../../node_modules/bootstrap/scss/functions";
 @import "breadcrumb";
+@import "pagination";
 @import "badge";
@@ -26,4 +27,7 @@ @import "progress";
 @import "border";
+@import "flex";
 @import "font";
 @import "position";
+@import "sizing";
+@import "svg";
 @import "text";

src/scss/mixins/_breadcrumb.scss

@@ -0,1 +1,18 @@
+// Size
+@mixin breadcrumb-size($padding-y, $padding-x, $font-size, $border-radius, $item-padding) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  @include border-radius($border-radius);
+
+  .breadcrumb-item {
+    + .breadcrumb-item {
+      padding-left: $item-padding;
+
+      &::before {
+        padding-right: $item-padding;
+      }
+    }
+  }
+}
+
 // Divider
@@ -2,0 +19,0 @@ @mixin breadcrumb-divider($divider) {

src/scss/mixins/_button.scss

@@ -0,1 +1,23 @@
+// Active
+@mixin button-active-variant($background, $border, $color: color-yiq($background)) {
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $color;
+    background-color: $background;
+    @if $enable-gradients {
+      background-image: none;
+    }
+    border-color: $border;
+  }
+}
+
+// Hover
+@mixin button-hover-variant($background, $border, $color: color-yiq($background)) {
+  &:hover {
+    color: $color;
+    @include gradient-bg($background);
+    border-color: $border;
+  }
+}
+
 // 3D
@@ -2,0 +24,0 @@ @mixin button-3d-variant($background, $border) {

src/scss/mixins/_form.scss

@@ -0,1 +1,10 @@
+// Size
+@mixin input-size($height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  height: $height;
+  padding: $padding-y $padding-x;
+  @include font-size($font-size);
+  line-height: $line-height;
+  @include border-radius($border-radius);
+}
+
 // Validation state
@@ -2,0 +11,0 @@ @mixin form-validation-state-selector($state) {

src/scss/mixins/_navbar.scss

 // Size
-@mixin navbar-size($padding-y, $font-size, $brand-font-size, $brand-padding-y, $nav-padding-y, $text-padding-y, $nav-height) {
+@mixin navbar-size($padding-y, $font-size, $brand-font-size, $brand-padding-y, $nav-link-padding-y, $nav-height) {
   padding-top: $padding-y;
@@ -16,4 +16,4 @@ padding-bottom: $padding-y;
     .nav-link {
-      padding-top: $nav-padding-y;
-      padding-bottom: $nav-padding-y;
+      padding-top: $nav-link-padding-y;
+      padding-bottom: $nav-link-padding-y;
     }
@@ -24,2 +24,4 @@ }
     font-size: $font-size;
+    padding-top: $nav-link-padding-y;
+    padding-bottom: $nav-link-padding-y;
   }
@@ -29,4 +31,4 @@
     font-size: $font-size;
-    padding-top: $nav-padding-y;
-    padding-bottom: $nav-padding-y;
+    padding-top: $nav-link-padding-y;
+    padding-bottom: $nav-link-padding-y;
   }
@@ -42,1 +44,24 @@
 }
+
+// Nav size
+@mixin navbar-nav-size($link-padding-y, $link-padding-x, $font-size) {
+  font-size: $font-size;
+
+  .nav-link {
+    padding: $link-padding-y $link-padding-x !important;
+  }
+}
+
+@mixin navbar-nav-size-y($link-padding-y) {
+  .nav-link {
+    padding-top: $link-padding-y !important;
+    padding-bottom: $link-padding-y !important;
+  }
+}
+
+@mixin navbar-nav-size-x($link-padding-x) {
+  .nav-link {
+    padding-right: $link-padding-x !important;
+    padding-left: $link-padding-x !important;
+  }
+}

No alert changes

Improved metrics

Total package byte prevSize

1577687

86.4%

Number of package files

60

27.66%

Lines of code

24524

107.69%

No dependency changes