@woosmap/ui 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Button/Button.js

@@ -94,6 +94,7 @@ Button.propTypes = {
         'tab',
         'tab--action',
         'tab--pills',
+        'sidebar-link',
     ]),
     isLoading: PropTypes.bool,
     active: PropTypes.bool,

package/src/components/Button/Button.stories.js

@@ -15,6 +15,9 @@ const Template = (args) => {
     return (
         <div className="flex-column mbib">
             <Button label={label} isLoading={isLoading} active={loading} />
+            <div className="flex mbi">
+                <Button active type="sidebar-link" icon="add" />
+            </div>
             <div className="flex mbi">
                 <Button icon="add" />
                 <Button label={label} />

package/src/styles/console/button.styl

@@ -6,7 +6,7 @@
 	&.active
 		cursor default
 	&--icon
-		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group)
+		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
 			sq()
 			btn()
 			justify-content center
@@ -147,7 +147,6 @@
 					color $light
 					.icon
 						fill $light
-
 	&--dropdown-item
 		flexBtn()
 		ellipsis()
@@ -301,10 +300,10 @@
 
 
 	&--has-icon
-		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab)
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
 			padding 0 $padding 0 $padding - .6
 	&--loading
-		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large)
+		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
 			padding-left $padding - .4
 			&:hover
 			&.btn--important
@@ -469,6 +468,23 @@
 			.btn
 				border-radius 0 $borderRadius $borderRadius 0 !important
 				border-left .1rem solid $light30 !important
+	&--sidebar-link
+		trans()
+		flexAxis()
+		sq($sidebarButtonSize)
+		.icon
+			fill $light
+		&:hover
+			background-color $dark15
+			.icon
+				fill $light
+		&.active
+			cursor default
+			background-color $dark20
+			&:hover
+				background-color $dark20
+				.icon
+					fill $light
 	&--small
 		buttonSmall()
 		&.btn--group

package/src/styles/console/variables.styl

@@ -4,6 +4,7 @@ $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
 $fontWeight = 400
 
+
 $title = $fontSize + .6
 $title2 = $fontSize + .4
 $title3 = $fontSize + .3
@@ -17,6 +18,8 @@ $borderRadius = .6rem
 
 $padding = 1.2rem
 
+$sidebarButtonSize = 5rem
+
 $buttonHeight = 3.8rem
 $buttonPadding = 0 $padding 0 $padding
 $buttonFontSize = $fontSize
@@ -71,7 +74,6 @@ $panelWidth = 36rem
 $panelpadding = 2.4rem
 $panelHeaderHeight = $contentHeaderHeight
 
-
 // modal
 $modalWidth = 70rem
 $modalPadding = 2.4rem