@st1myl/entrl-react - npm Package Compare versions

Comparing version 1.2.173 to 1.2.174

lib/components/Header/Header.js

@@ -42,3 +42,3 @@ "use strict";
     render() {
-        return (react_1.default.createElement("div", { className: classnames_1.default("header", { active: !this.state.hidden }, this.props.className) },
+        return (react_1.default.createElement("div", { className: classnames_1.default(this.props.className, { active: !this.state.hidden }) },
             react_1.default.createElement(Hamburger, { onClick: this.menuToggle }),
@@ -158,3 +158,127 @@ react_1.default.createElement(GenericPortal_1.default, { container: "header-out-menu" },
   }
+  .header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    max-width: calc(954px - 84px);
+    height: calc(124px - 24px);
+    transition: margin-left 250ms;
+  }
+  .header-title {
+    h1 {
+      color: #424242;
+      font-size: 24px;
+      font-weight: normal;
+    }
+  }
+  .header--submenu {
+    &-list {
+      display: flex;
+      list-style-type: none;
+
+      &-item {
+        position: relative;
+
+        &.active a {
+          font-weight: 500;
+          color: #424242;
+
+          &::after {
+            opacity: 1;
+          }
+        }
+      }
+
+      a {
+        display: block;
+        font-size: 14px;
+        padding: 8px 16px 10px 16px;
+        text-decoration: none;
+        color: #a1a4af;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: 2px;
+          border-radius: 4px 4px 0 0;
+          background-color: #5A8CF6;
+          opacity: 0;
+          transition: opacity 250ms;
+        }
+      }
+    }
+  }
+  .header-right {
+    display: flex;
+    align-items: center;
+
+    &-item + &-item {
+      margin-left: 16px;
+    }
+
+    &-item {
+      a {
+        font-size: 0;
+        display: block;
+      }
+    }
+
+    .pc-bg {
+      position: relative;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: #29AFA5;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
+
+      &-lt {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+        color: #ffffff;
+        pointer-events: none;
+        font-size: 18px;
+      }
+    }
+  }
+  .header-sidebar-menu {
+    position: fixed;
+    top: 0;
+    transform: translateX(-105%);
+    width: 240px;
+    height: 100%;
+    z-index: 999;
+    transition: 250ms ease-in-out;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
+    &.opened {
+      transform: translateY(0);
+    }
+  }
+  
+  .header-sidebar-wrapper {
+    padding: 24px 0 24px 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: #ffffff;
+  }
+
+  .header-sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    z-index: 998;
+  }
 `;
 //# sourceMappingURL=Header.js.map

package.json

 {
   "name": "@st1myl/entrl-react",
   "author": "St1myL",
-  "version": "1.2.173",
+  "version": "1.2.174",
   "repository": "st1myl/entrl-react",
@@ -6,0 +6,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

85305

increased by2.05%

Lines of code

787

increased by16.77%

No dependency changes