@nu-art/ts-styles 0.200.72 → 0.200.74

package/icons/icons.d.ts

@@ -67,6 +67,10 @@ export declare const TS_Icons: {
         component: (props: IconAttributes) => JSX.Element;
         url: any;
     };
+    menu: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
 };
 export declare const tsIconKeys: () => TSIcons[];
 export type TSIconsType = typeof TS_Icons;

package/icons/icons.js

@@ -17,10 +17,11 @@ const icon__information_svg_1 = require("./svgs/icon__information.svg");
 const icon__filter_stop_svg_1 = require("./svgs/icon__filter-stop.svg");
 const icon__clear_svg_1 = require("./svgs/icon__clear.svg");
 const icon__save_svg_1 = require("./svgs/icon__save.svg");
+const icon__menu_svg_1 = require("./svgs/icon__menu.svg");
 class RenderIcon extends React.Component {
     render() {
         var _a;
-        const className = 'icon--wrapper' + ((_a = this.props.className) !== null && _a !== void 0 ? _a : '');
+        const className = 'icon--wrapper ' + ((_a = this.props.className) !== null && _a !== void 0 ? _a : '');
         return React.createElement("div", Object.assign({}, this.props, { className: className, style: { WebkitMaskImage: `url(${this.props.icon})`, maskImage: `url(${this.props.icon})` } }));
     }
 }
@@ -31,7 +32,7 @@ exports.iconsRenderer = iconsRenderer;
 const genIcon = (Icon) => {
     return (props) => {
         var _a;
-        return React.createElement("div", Object.assign({}, props, { className: 'icon--wrapper' + ((_a = props.className) !== null && _a !== void 0 ? _a : '') }),
+        return React.createElement("div", Object.assign({}, props, { className: 'icon--wrapper ' + ((_a = props.className) !== null && _a !== void 0 ? _a : '') }),
             React.createElement(Icon, null));
     };
 };
@@ -50,6 +51,7 @@ exports.TS_Icons = {
     filterStop: { component: genIcon(icon__filter_stop_svg_1.ReactComponent), url: icon__filter_stop_svg_1.default },
     clear: { component: genIcon(icon__clear_svg_1.ReactComponent), url: icon__clear_svg_1.default },
     save: { component: genIcon(icon__save_svg_1.ReactComponent), url: icon__save_svg_1.default },
+    menu: { component: genIcon(icon__menu_svg_1.ReactComponent), url: icon__menu_svg_1.default },
 };
 const tsIconKeys = () => {
     return (0, ts_common_1._keys)(exports.TS_Icons);

package/icons/svgs/icon__menu.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path
+        d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/ts-styles",
-  "version": "0.200.72",
+  "version": "0.200.74",
   "author": "nu-art",
   "description": "Styles by Cipher",
   "main": "dist/index.js",
@@ -13,7 +13,7 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/ts-common": "0.200.72",
+    "@nu-art/ts-common": "0.200.74",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/styles/colors/elements.scss

@@ -0,0 +1,25 @@
+/// Sets backgrounds for element based on mouse interaction
+///
+/// @param $bg - base background
+/// @param $bgh - background when mouse hover
+/// @param $bga - background when mouse click
+///
+@mixin mouse-interactive-background($bg, $bg-h: $bg ,$bg-a: $bg-h) {
+  background: $bg;
+  &:hover {
+    background: $bg-h;
+  }
+  &:active {
+    background: $bg-a;
+  }
+}
+
+@mixin mouse-interactive-text($c,$c-h,$c-a) {
+  color: $c;
+  &:hover {
+    color: $c-h;
+  }
+  &:active {
+    color: $c-a;
+  }
+}

package/styles/colors/index.scss

@@ -0,0 +1,2 @@
+@forward "elements";
+@forward "svgs";

package/styles/{mouse-interaction/mouse-interactive-colors.scss → colors/svgs.scss}

@@ -1,18 +1,14 @@
 @use '../consts' as consts;
 
-/// Sets backgrounds for element based on mouse interaction
-///
-/// @param $bg - base background
-/// @param $bgh - background when mouse hover
-/// @param $bga - background when mouse click
-///
-@mixin mouse-interactive-background($bg, $bg-h: $bg ,$bg-a: $bg-h) {
-  background: $bg;
-  &:hover {
-    background: $bg-h;
+@mixin setIconProp($prop,$value) {
+  *:not([data-no-#{$prop}="true"]):not(g) {
+    #{$prop}: $value;
   }
-  &:active {
-    background: $bg-a;
+}
+
+@mixin color-svg($color) {
+  @each $rule in consts.$svg-prop-rules {
+    @include setIconProp($rule, $color);
   }
 }
 
@@ -36,10 +32,4 @@
       @include setIconProp($rule, $color-a);
     }
   }
-}
-
-@mixin setIconProp($prop,$value) {
-  *:not([data-no-#{$prop}="true"]):not(g) {
-    #{$prop}: $value;
-  }
 }

package/styles/index.scss

@@ -1,5 +1,5 @@
+@forward "colors";
 @forward "palette";
-@forward "mouse-interaction";
 @forward "scroll-bar";
 @forward "shapes";
 @forward "text";

package/styles/scroll-bar/general.scss

@@ -0,0 +1,7 @@
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none; // IE10+
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none; // Safari & Chrome
+  }
+}

package/styles/scroll-bar/index.scss

@@ -1 +1,2 @@
-@forward "custom-scroll-bar";
+@forward "custom-scroll-bar";
+@forward "general";

package/styles/mouse-interaction/index.scss

@@ -1 +0,0 @@
-@forward "mouse-interactive-colors";