@steroidsjs/bootstrap 3.0.0-beta.120 → 3.0.0-beta.121

package/index.scss

@@ -5,6 +5,7 @@
 @include meta.load-css('scss/variables');
 @include meta.load-css('scss/mixins');
 @include meta.load-css('scss/fonts');
+@include meta.load-css('scss/bootstrap-classes');
 
 @include meta.load-css('content/Accordion/AccordionView');
 @include meta.load-css('content/Accordion/AccordionItemView');

package/list/FlexGrid/FlexGridView.scss

@@ -1,16 +1,9 @@
 @use "../../scss/variables";
 
-
-$justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
-$alignValues: center, end, start, stretch, flex-start, flex-end;
-$directionValues: column-reverse column row-reverse row;
-$colValues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
-$colMaxValue: 12;
-
 @mixin col($className, $root, $property: flex-basis) {
-  @each $colValue in $colValues {
+  @each $colValue in variables.$colValues {
     &_#{$className}_#{$colValue} {
-      #{$property}: calc((100% / $colMaxValue) * $colValue);
+      #{$property}: calc((100% / variables.$colMaxValue) * $colValue);
     }
   }
 }
@@ -25,19 +18,19 @@ $colMaxValue: 12;
     flex-wrap: wrap;
   }
 
-  @each $alignValue in $alignValues {
+  @each $alignValue in variables.$alignValues {
     &_align_#{$alignValue} {
         align-items: $alignValue;
     }
   }
 
-  @each $justifyValue in $justifyValues {
+  @each $justifyValue in variables.$justifyValues {
     &_justify_#{$justifyValue} {
         justify-content: $justifyValue;
     }
   }
 
-  @each $directionValue in $directionValues {
+  @each $directionValue in variables.$directionValues {
     &_direction_#{$directionValue} {
         flex-direction: $directionValue;
     }
@@ -57,4 +50,4 @@ $colMaxValue: 12;
       @include col(sm, $root);
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.120",
+    "version": "3.0.0-beta.121",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",

package/scss/bootstrap-classes/flex.scss

@@ -0,0 +1,42 @@
+@use "../variables";
+
+.flex {
+  display: flex;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.col {
+  @each $colValue in variables.$colValues {
+    &-#{$colValue} {
+      flex-basis: calc((100% / variables.$colMaxValue) * $colValue);
+    }
+  }
+}
+
+.justify-content {
+  @each $justifyValue in variables.$justifyValues {
+    &-#{$justifyValue} {
+      justify-content: $justifyValue;
+    }
+  }
+}
+
+.align-items {
+  @each $alignValue in variables.$alignValues {
+    &-#{$alignValue} {
+      align-items: $alignValue;
+    }
+  }
+}
+
+.flex-direction {
+  @each $directionValue in variables.$directionValues {
+    &-#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+}

package/scss/bootstrap-classes/index.scss

@@ -0,0 +1,4 @@
+@forward './spacing.scss';
+@forward './flex.scss';
+@forward './layout.scss';
+@forward './typography.scss';

package/scss/bootstrap-classes/layout.scss

@@ -0,0 +1,72 @@
+@use "../variables/common/colors.scss";
+
+$positions: absolute, sticky, relative, fixed, static;
+$borders: right, left, top, bottom;
+
+.border {
+  border: 1px solid colors.$element-border-color;
+
+  @each $border in $borders {
+    &-#{$border} {
+      border-#{$border}: 1px solid colors.$element-border-color;
+    }
+  }
+}
+
+// positions
+.position {
+  @each $position in $positions {
+    &-#{$position} {
+      position: $position;
+    }
+  }
+}
+
+.top-0 {
+  top: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+// width and height in percents
+.w-25 {
+  width: 25%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-75 {
+  width: 75%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-25 {
+  height: 25%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.h-75 {
+  height: 75%;
+}
+
+.h-100 {
+  height: 100%;
+}

package/scss/bootstrap-classes/spacing.scss

@@ -0,0 +1,97 @@
+// margin
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 1rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 1rem;
+}
+
+// padding
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 1rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 1rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-3 {
+  padding-right: 1rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-3 {
+  padding-left: 1rem;
+}

package/scss/bootstrap-classes/typography.scss

@@ -0,0 +1,25 @@
+$text-aligns: center, left, right, end, justify, start;
+
+.text {
+  @each $text-align in $text-aligns {
+    &-#{$text-align} {
+      text-align: $text-align;
+    }
+  }
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}

package/scss/variables/common/flex.scss

@@ -0,0 +1,5 @@
+$justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
+$alignValues: center, end, start, stretch, flex-start, flex-end;
+$directionValues: column-reverse column row-reverse row;
+$colValues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
+$colMaxValue: 12;

package/scss/variables/index.scss

@@ -4,6 +4,7 @@
 @forward 'common/radiuses';
 @forward 'common/old-variables';
 @forward 'common/variables';
+@forward 'common/flex';
 
 @forward 'components/button';
 @forward 'components/calendar';