blob: 3a5cb6d21d577158f9e833465d6e97dca7b68d7b [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<dom-module id="md-select">
<template>
<style>
:host {
--md-select-side-padding: 8px;
}
.md-select {
--md-arrow-width: 0.9em;
-webkit-appearance: none;
/* Ensures 3px space between text and arrow */
-webkit-padding-end: calc(var(--md-select-side-padding) +
var(--md-arrow-width) + 3px);
-webkit-padding-start: var(--md-select-side-padding);
background: url(chrome://resources/images/arrow_down.svg)
calc(100% - var(--md-select-side-padding))
center no-repeat;
background-color: var(--google-grey-refresh-100);
background-size: var(--md-arrow-width);
border: none;
border-radius: 4px;
color: var(--google-grey-900);
cursor: pointer;
font-family: inherit;
font-size: inherit;
line-height: inherit;
max-width: 100%;
outline: none;
padding-bottom: 6px;
padding-top: 6px;
width: var(--md-select-width, 200px);
}
/* Makes sure anything within the dropdown menu has white background. */
.md-select option,
.md-select optgroup {
background-color: white;
}
.md-select[disabled] {
opacity: var(--cr-disabled-opacity);
pointer-events: none;
}
.md-select:focus {
/* Google Blue 900 with 40% opacity. */
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4);
}
/* Should not have an outline if opened by mouse click. */
.md-select:active {
box-shadow: none;
}
:host-context([dir=rtl]) .md-select {
background-position-x: var(--md-select-side-padding);
}
</style>
</template>
</dom-module>