@bgord/design 0.27.60 → 0.27.62

package/README.md

@@ -478,9 +478,9 @@ Orange
 
 ## Object fits
 
-| Definition | Value      |
-| ---------- | ---------- |
-| data-fit   | object-fit |
+| Definition      | Value      |
+| --------------- | ---------- |
+| data-object-fit | object-fit |
 
 | Key        |   Value    |
 | ---------- | :--------: |
@@ -489,3 +489,30 @@ Orange
 | fill       |    fill    |
 | scale-down | scale-down |
 | none       |    none    |
+
+## Object positions
+
+| Definition           | Value           |
+| -------------------- | --------------- |
+| data-object-position | object-position |
+
+| Key    | Value  |
+| ------ | :----: |
+| top    |  top   |
+| bottom | bottom |
+| left   |  left  |
+| right  | right  |
+| center | center |
+
+## Rotates
+
+| Definition  | Value                    |
+| ----------- | ------------------------ |
+| data-rotate | transform: rotate(x deg) |
+
+| Key | Value |
+| --- | :---: |
+| 0   |   0   |
+| 90  |  90   |
+| 180 |  180  |
+| 270 |  270  |

package/dist/design.cjs.development.js

@@ -2411,13 +2411,13 @@ var ObjectFitsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
   var _proto = ObjectFitsGenerator.prototype;
 
   _proto.generateCss = function generateCss() {
-    var output = ''; // Regular display: data-fit="*"
+    var output = ''; // Regular display: data-object-fit="*"
 
     for (var _i = 0, _Object$entries = Object.entries(this.objectFits); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = _Object$entries[_i],
           key = _Object$entries$_i[0],
           value = _Object$entries$_i[1];
-      output += "*[data-fit='" + key + "'] {\n  object-fit: " + value + ";\n}\n";
+      output += "*[data-object-fit='" + key + "'] {\n  object-fit: " + value + ";\n}\n";
     }
 
     for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
@@ -2430,7 +2430,7 @@ var ObjectFitsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
         var _Object$entries3$_i = _Object$entries3[_i3],
             _key = _Object$entries3$_i[0],
             _value2 = _Object$entries3$_i[1];
-        output += "  *[data-" + name + "-fit='" + _key + "'] {\n    object-fit: " + _value2 + ";\n  }\n";
+        output += "  *[data-" + name + "-object-fit='" + _key + "'] {\n    object-fit: " + _value2 + ";\n  }\n";
       }
 
       output += "}\n";
@@ -2442,6 +2442,98 @@ var ObjectFitsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
   return ObjectFitsGenerator;
 }(AbstractGenerator);
 
+var ObjectPositionsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(ObjectPositionsGenerator, _AbstractGenerator);
+
+  function ObjectPositionsGenerator(config) {
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Object positions') || this;
+    _this.objectPositions = config.objectPositions;
+    _this.breakpoints = config.breakpoints;
+    return _this;
+  }
+
+  var _proto = ObjectPositionsGenerator.prototype;
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-object-position="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.objectPositions); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-object-position='" + key + "'] {\n  object-position: " + value + ";\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.objectPositions); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "  *[data-" + name + "-object-position='" + _key + "'] {\n    object-position: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  };
+
+  return ObjectPositionsGenerator;
+}(AbstractGenerator);
+
+var RotatesGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(RotatesGenerator, _AbstractGenerator);
+
+  function RotatesGenerator(config) {
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Rotates') || this;
+    _this.rotates = config.rotates;
+    _this.breakpoints = config.breakpoints;
+    return _this;
+  }
+
+  var _proto = RotatesGenerator.prototype;
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-rotate="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.rotates); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-rotate='" + key + "'] {\n  transform: rotate(" + value + "deg);\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.rotates); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "  *[data-" + name + "-rotate='" + _key + "'] {\n    transform: rotate(" + _value2 + "deg);\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  };
+
+  return RotatesGenerator;
+}(AbstractGenerator);
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -2467,6 +2559,13 @@ var ObjectFits = {
   'scale-down': 'scale-down',
   none: 'none'
 };
+var ObjectPositions = {
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  center: 'center'
+};
 var AxisPlacements = {
   start: 'flex-start',
   end: 'flex-end',
@@ -2654,6 +2753,12 @@ var Backdrops = {
   black: 'rgba(0, 0, 0, 0.75)',
   none: 'none'
 };
+var Rotates = {
+  '0': '0',
+  '90': '90',
+  '180': '180',
+  '270': '270'
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -2829,10 +2934,12 @@ function _main() {
               cursors: Cursors,
               pointerEvents: PointerEvents,
               backdrops: Backdrops,
-              objectFits: ObjectFits
+              objectFits: ObjectFits,
+              objectPositions: ObjectPositions,
+              rotates: Rotates
             };
             _context2.next = 3;
-            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new FlexShrinksGenerator(config), new GapGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator(config), new HeightsGenerator(config), new CursorsGenerator(config), new PointerEventsGenerator(config), new BackdropsGenerator(config), new ObjectFitsGenerator(config)]);
+            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new FlexShrinksGenerator(config), new GapGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator(config), new HeightsGenerator(config), new CursorsGenerator(config), new PointerEventsGenerator(config), new BackdropsGenerator(config), new ObjectFitsGenerator(config), new ObjectPositionsGenerator(config), new RotatesGenerator(config)]);
 
           case 3:
           case "end":