@stejnar/toolbar - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/toolbar-item.component.js

@@ -25,52 +25,55 @@ "use strict";
         styles: [`
-        li {
-            display: inline-block;
-            float: left;
-            height: 100%;
-            padding: 0;
+        :host > /deep/ .drop-input {
+            display : none;
         }
+        /deep/ li {
+            display : inline-block;
+            float   : left;
+            height  : 100%;
+            padding : 0;
+        }
         /deep/ li > button {
-            display: inline;
-            width: auto;
-            height: 4em;
-            margin: 0;
-            padding: 0;
-            color: rgba(238, 238, 238, 1);
-            box-shadow: none;
-            box-sizing: border-box;
-            border-bottom: 3px solid transparent;
-            background-color: #4e5566;
-        }
+           display          : inline;
+           width            : auto;
+           height           : 4em;
+           margin           : 0;
+           padding          : 0;
+           color            : rgba(238, 238, 238, 1);
+           box-shadow       : none;
+           box-sizing       : border-box;
+           border-bottom    : 3px solid transparent;
+           background-color : #4e5566;
+       }
         /deep/ li > button > p {
-            height: 100%;
-            margin: 0;
-            padding: 0.8em;
-            font-size: 1.2em;
-        }
+           height    : 100%;
+           margin    : 0;
+           padding   : 0.8em;
+           font-size : 1.2em;
+       }
         /deep/ li > button > p > span.text {
-            padding: 0.2em;
-            font-size: 1em;
-            vertical-align: middle;
-        }
+           padding        : 0.2em;
+           font-size      : 1em;
+           vertical-align : middle;
+       }
         /deep/ li > button > p > span.icon,
         /deep/ li > button > p > span.glyphicon {
-            font-size: 1.2em;
-            vertical-align: middle;
-        }
+           font-size      : 1.2em;
+           vertical-align : middle;
+       }
         /deep/ li > button.active,
         /deep/ li > button:focus.active {
-            border-bottom-color: rgba(238, 238, 238, 1);
-        }
+           border-bottom-color : rgba(238, 238, 238, 1);
+       }
         /deep/ li > button:hover {
-            background-color: rgba(238, 238, 238, 0.1);
-        }
+           background-color : rgba(238, 238, 238, 0.1);
+       }
         /deep/ li > button[disabled] {
-            color: rgba(238, 238, 238, 0.25);
-            cursor: not-allowed;
-        }
+           color  : rgba(238, 238, 238, 0.25);
+           cursor : not-allowed;
+       }
         li.seperator {
-            width: 0;
-            height: 2.4em !important;
-            margin: 0.8em 5px;
-            border-left: 1px solid rgba(238, 238, 238, 0.25);
+            width       : 0;
+            height      : 2.4em !important;
+            margin      : 0.8em 5px;
+            border-left : 1px solid rgba(238, 238, 238, 0.25);
         }
@@ -77,0 +80,0 @@ `]

lib/toolbar-menu.component.js

@@ -34,25 +34,40 @@ "use strict";
         .menu {
-            height: 4em;
+            height : 4em;
         }
+
         .menu > table > ul {
-            display: block;
-            height: 100%;
-            margin: 0;
-            text-align: center;
+            display    : block;
+            height     : 100%;
+            margin     : 0;
+            text-align : center;
         }
-        @media (min-width: 767px) {
-    		.left { float: left; }
-    		.right { float: right; }
-    	}
-    	@media (max-width: 767px) {
-    		.menu {
-    			width: 100%;
-    		}
+
+        @media (min-width : 767px) {
+            .left {
+                float : left;
+            }
+
+            .right {
+                float : right;
+            }
+        }
+
+        @media (max-width : 767px) {
+            .menu {
+                width : 100%;
+            }
+
             .menu > table.center-table {
-                display: table;
-                margin: 0 auto;
+                display : table;
+                margin  : 0 auto;
             }
-    		.left { float: none; }
-    		.right { float: none; }
-    	}
+
+            .left {
+                float : none;
+            }
+
+            .right {
+                float : none;
+            }
+        }
     `]
@@ -59,0 +74,0 @@ }),

lib/toolbar-tab.component.js

@@ -61,51 +61,59 @@ "use strict";
         li {
-            display: inline-block;
-            float: left;
-            height: 100%;
-            padding: 0;
+            display : inline-block;
+            float   : left;
+            height  : 100%;
+            padding : 0;
         }
+
         li > button {
-            display: inline;
-            width: auto;
-            height: 4em;
-            margin: 0;
-            padding: 0;
-            color: rgba(238, 238, 238, 1);
-            box-shadow: none;
-            box-sizing: border-box;
-            border-bottom: 3px solid transparent;
-            background-color: #4e5566;
+            display          : inline;
+            width            : auto;
+            height           : 4em;
+            margin           : 0;
+            padding          : 0;
+            color            : rgba(238, 238, 238, 1);
+            box-shadow       : none;
+            box-sizing       : border-box;
+            border-bottom    : 3px solid transparent;
+            background-color : #4e5566;
         }
+
         li > button > p {
-            height: 100%;
-            margin: 0;
-            padding: 0.8em;
-            font-size: 1.2em;
+            height    : 100%;
+            margin    : 0;
+            padding   : 0.8em;
+            font-size : 1.2em;
         }
+
         li > button > p > span.text {
-            padding: 0.2em;
-            font-size: 1em;
-            vertical-align: middle;
+            padding        : 0.2em;
+            font-size      : 1em;
+            vertical-align : middle;
         }
+
         li > button > p > span.icon,
         li > button > p > span.glyphicon {
-            font-size: 1.2em;
-            vertical-align: middle;
+            font-size      : 1.2em;
+            vertical-align : middle;
         }
+
         li > button.active,
         li > button:focus.active {
-            border-bottom-color: rgba(238, 238, 238, 1);
+            border-bottom-color : rgba(238, 238, 238, 1);
         }
+
         li > button:hover {
-            background-color: rgba(238, 238, 238, 0.1);
+            background-color : rgba(238, 238, 238, 0.1);
         }
+
         li > button[disabled] {
-            color: rgba(238, 238, 238, 0.25);
-            cursor: not-allowed;
+            color  : rgba(238, 238, 238, 0.25);
+            cursor : not-allowed;
         }
+
         li.seperator {
-            width: 0;
-            height: 2.4em !important;
-            margin: 0.8em 5px;
-            border-left: 1px solid rgba(238, 238, 238, 0.25);
+            width       : 0;
+            height      : 2.4em !important;
+            margin      : 0.8em 5px;
+            border-left : 1px solid rgba(238, 238, 238, 0.25);
         }
@@ -112,0 +120,0 @@ `]

lib/toolbar.component.js

@@ -26,26 +26,17 @@ "use strict";
     `,
-        styleUrls: [`
+        styles: [`
         :host {
-        	flex: 1 1 auto;
-        	position: fixed;
-        	top: 4em;
-        	left: 0;
-        	width: 100%;
-        	height: 4em;
-        	background-color: #4e5566;
-        	box-shadow: 2px 2px 5px rgba(34, 37, 44, 0.2);
+            display          : block;
+            position         : fixed;
+            top              : 4em;
+            left             : 0;
+            width            : 100%;
+            height           : 4em;
+            background-color : #4e5566;
+            box-shadow       : 2px 2px 5px rgba(34, 37, 44, 0.2);
         }
-        :host > /deep/ .container {
-            padding: 0;
+
+        :host > .container {
+            padding : 0;
         }
-        :host > /deep/ .toolbar {
-            position: fixed;
-            flex: 0 1 4em;
-            width: 100%;
-            box-shadow: 2px 2px 5px rgba(34, 37, 44, 0.2);
-            background-color: #4e5566;
-        }
-        :host > /deep/ .drop-input {
-            display: none;
-        }
     `]
@@ -52,0 +43,0 @@ }),

package.json

 {
   "name": "@stejnar/toolbar",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Angular component library",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

18244

increased by5.21%

Lines of code

379

increased by1.88%

No dependency changes