diff --git a/src/mm-dropdown/doc.json b/src/mm-dropdown/doc.json
index aa90062a..66a3325f 100644
--- 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
index 616f53bc..d2e5bd75 100644
--- a/src/mm-dropdown/index.html
+++ b/src/mm-dropdown/index.html
@@ -237,7 +237,7 @@
Dropdown: List with overflow: overflowWidth set
-
+
mm-list-item with an exremely long label or name in here 00
mm-list-item with an exremely long label or name in here 01
mm-list-item with an exremely long label or name in here 02
@@ -272,7 +272,26 @@
mm-list-item with an exremely long label or name in here 31
-
+ Dropdown: Dropdown small and skinless
+
+
+ Clicks
+ CTC
+ CTR
+ Impressions
+ Post-Click Conversions
+ Post-View Conversions
+ Revenue
+ Response Rate/1K Imps
+ Total Conversions
+ Total Spend
+ eCPA
+ eCPC
+ eCPM
+ PC CPA
+ PV CPA
+
+
Dropdown: Dynamic jQuery test
diff --git a/src/mm-dropdown/mm-dropdown.js b/src/mm-dropdown/mm-dropdown.js
index 7592a9d5..1f523efb 100644
--- 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
index 265b5c68..94661a20 100644
--- 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
index c968da9f..f70856f9 100644
--- 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
index 710ce825..0ea55db5 100644
--- 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();
}