Normalize with the 0.6.5 release

- support size and skinless
MediaMath · Feb 18, 2016 · 55e52c2 · 55e52c2
1 parent c71deb4
commit 55e52c2
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 53 deletions.
diff --git a/src/mm-dropdown/doc.json b/src/mm-dropdown/doc.json
@@ -87,11 +87,19 @@
 		{
 			"name":"size",
 			"type":"String",
-			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
+			"description":"Instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large').",
 			"optional":true,
 			"default":"none",
 			"options":["normal","large", "small"],
 			"reflect":true
+		},
+		{
+			"name":"skinless",
+			"type":"String",
+			"description":"Instructs the component to be displayed without a background or border.",
+			"optional":true,
+			"default":"none",
+			"reflect":true
 		}
 	],
 	"methods": [

diff --git a/src/mm-dropdown/index.html b/src/mm-dropdown/index.html
@@ -237,7 +237,7 @@
 			<hr/>
 
 			<p><span class="bold">Dropdown:</span> List with overflow: overflowWidth set</p>
-			<mm-dropdown placeholder="Select One Please" overflow="visible" size="small">
+			<mm-dropdown placeholder="Select One Please" overflow="visible" overflow-width="250" size="small">
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 00</mm-list-item>
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 01</mm-list-item>
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 02</mm-list-item>
@@ -272,7 +272,26 @@
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 31</mm-list-item>
 			</mm-dropdown>
 			<hr/>
-
+			<p><span class="bold">Dropdown:</span> Dropdown small and skinless</p>
+			<mm-dropdown placeholder="Select" size="small" skinless overflow="visible" maxItems="7" unresolved>
+				<mm-input search="true" clear="true" size="small" placeholder="Search"></mm-input>
+				<mm-list-item>Clicks</mm-list-item>
+				<mm-list-item>CTC</mm-list-item>
+				<mm-list-item>CTR</mm-list-item>
+				<mm-list-item>Impressions</mm-list-item>
+				<mm-list-item>Post-Click Conversions</mm-list-item>
+				<mm-list-item>Post-View Conversions</mm-list-item>
+				<mm-list-item>Revenue</mm-list-item>
+				<mm-list-item>Response Rate/1K Imps</mm-list-item>
+				<mm-list-item>Total Conversions</mm-list-item>
+				<mm-list-item>Total Spend</mm-list-item>
+				<mm-list-item>eCPA</mm-list-item>
+				<mm-list-item>eCPC</mm-list-item>
+				<mm-list-item>eCPM</mm-list-item>
+				<mm-list-item>PC CPA</mm-list-item>
+				<mm-list-item>PV CPA</mm-list-item>
+			</mm-dropdown>
+			<hr/>
 			<p><span class="bold">Dropdown:</span> Dynamic jQuery test</p>
 			<mm-dropdown placeholder="select one" overflow="visible" fitparent="true" id="dynamic" max-items="10"></mm-dropdown>
 			<hr/>

diff --git a/src/mm-dropdown/mm-dropdown.js b/src/mm-dropdown/mm-dropdown.js
@@ -74,6 +74,10 @@
 				type: String,
 				reflectToAttribute: true
 			},
+			skinless: {
+				type: Boolean,
+				reflectToAttribute: true
+			},
 			_layout: String
 		},
 
@@ -317,7 +321,7 @@
 		},
 
 		_lockWidth: function() {
-			if (!this.fitparent && this.buttonWidth > 0) {
+			if (!this.fitparent && this.buttonWidth > 0 && !this.skinless) {
 				this.$.target.style.width = this.buttonWidth + 'px';
 			} else {
 				return;

diff --git a/src/shared/sass/_button.scss b/src/shared/sass/_button.scss
@@ -175,7 +175,7 @@
 
 		& > ::content label {
 			font-size: 15px !important;
-			line-height: 45px !important;
+			line-height: 46px !important;
 		}
 	}
 }
@@ -193,12 +193,12 @@
 
 :host([size='small']){
 	.button {
-		height: 20px !important;
-		padding: 0 7px;
+		height: 26px !important;
+		padding: 0 8px !important;
 
 		& > ::content label {
 			font-size: 11px!important;
-			line-height: 19px !important;
+			line-height: 26px !important;
 		}
 	}
 }
diff --git a/src/shared/sass/_dropdown.scss b/src/shared/sass/_dropdown.scss
@@ -7,49 +7,48 @@
 @import "_mixins";
 
 .button {
-	font-weight: 400;
 	display: block;
 	position: relative;
 	padding-right: 32px;
-}
 
-.button label {
-	pointer-events: none;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-transform: none;
-	display: block;
-	width: 100%;
-	font-weight: 400;
-}
+	label {
+		pointer-events: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-transform: none;
+		display: block;
+		width: 100%;
+		font-weight: 400 !important;
+	}
 
-.button mm-icon {
-	pointer-events: none;
-}
+	#caratIcon {
+		padding: 0 10px 0 13px;
+		position: absolute;
+		margin-top: -4px;
+		top: 50%;
+		right:0px;
+		display: block;
+	}
 
-.button .left-items {
-	display: flex;
-	align-items: center;
-	justify-content: start;
-	height: 100%;
-}
+	#caratIcon.closed {
+		transform: scaleY(1);
+	}
 
-#caratIcon {
-	padding: 0 10px 0 13px;
-	position: absolute;
-	margin-top: -4px;
-	top: 50%;
-	right:0px;
-	display: block;
-}
+	#caratIcon.opened {
+		transform: scaleY(-1);
+	}
 
-#caratIcon.closed {
-	transform: scaleY(1);
-}
+	mm-icon {
+		pointer-events: none;
+	}
 
-#caratIcon.opened {
-	transform: scaleY(-1);
+	.left-items {
+		display: flex;
+		align-items: center;
+		justify-content: start;
+		height: 100%;
+	}
 }
 
 .scroll-container {
@@ -61,7 +60,6 @@
 	height: 100%;
 }
 
-$arrow-size: 0;
 $bg-color: #fff !default;
 $border-color: $color-A18 !default;
 
@@ -98,36 +96,66 @@ $border-color: $color-A18 !default;
 // support multiple size configurations
 :host([size='large']){
 	.button {
-		height: 46px !important;
 		padding: 0 32px 0 15px;
 
 		label {
 			font-size: 15px !important;
-			line-height: 45px !important;
+			line-height: 46px !important;
 		}
 	}
 }
 
 :host([size='normal']){
 	.button {
-		height: 29px !important;
 		padding: 0 32px 0 10px;
 
 		label {
 			font-size: 13px!important;
-			line-height: 28px !important;
+			line-height: 29px !important;
 		}
 	}
 }
 
-:host([size='small']){
+:host([size='small']) {
 	.button {
-		height: 20px !important;
-		padding: 0 32px 0 7px;
+		padding: 0 26px 0 8px !important;
+		height: 26px;
 
 		label {
-			font-size: 11px!important;
-			line-height: 19px !important;
+			font-size: 11px !important;
+			line-height: 25px !important;
+		}
+
+		#caratIcon {
+			padding: 0 8px 0 10px;
+		}
+	}
+
+	#container > ::content mm-list-item,
+	mm-list-item {
+		font-size: 11px !important;
+		line-height: 13px !important;
+	}
+}
+
+:host([skinless]) {
+	.button {
+		border: none;
+		background: initial;
+		padding: 0 20px 0 8px !important;
+
+		label {
+			font-weight: 700 !important;
+		}
+
+		&:hover,
+		&:active {
+			background: initial;
+			box-shadow: none;
+		}
+
+		#caratIcon {
+			padding: 0 8px 0 4px;
 		}
 	}
 }
diff --git a/src/shared/sass/_mixins.scss b/src/shared/sass/_mixins.scss
@@ -11,7 +11,7 @@
 	font-family: "Arimo", sans-serif;
 	font-weight: 700;
 	font-size: 13px!important;
-	line-height: 28px !important;
+	line-height: 29px !important;
 	@include fontSmoothing();
 }