| /* |
| * A set of styles to make buttons and select/options look more Material |
| * Design-ish. |
| */ |
| button { |
| min-width: 5.14em; |
| background-color: #fff; |
| color: #1f78b4; |
| text-align: center; |
| text-transform: uppercase; |
| outline: none; |
| border-radius: 3px; |
| padding: 0.6em 1.2em; |
| border: solid lightgray 1px; |
| margin: 0.6em; |
| height: 3em; |
| } |
| |
| button:hover { |
| background: #eee; |
| } |
| |
| button:focus { |
| background-color: #ddd; |
| transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1) ; |
| } |
| |
| button:active, |
| button.raised:active { |
| background-color: #999; |
| transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| button:disabled { |
| color: #999; |
| background-color: #fff; |
| } |
| |
| button.action:active { |
| background-color: #A6CEE3; |
| transition: background-color 0.1s color 0.1s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| button.action { |
| color: white; |
| background: #1f78b4; |
| border: none; |
| } |
| |
| button.action:disabled { |
| color: white; |
| background: #999; |
| border: none; |
| } |
| |
| button.raised { |
| transition: box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1); |
| box-shadow: 5px 5px 18px 0 rgba(0, 0, 0, 0.3); |
| } |
| |
| button.raised:active { |
| box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1); |
| } |
| |
| select, |
| option { |
| padding: 0.4em 1.2em; |
| background-color: white; |
| border: none; |
| outline: none; |
| line-height: 20px; |
| vertical-align: middle; |
| } |
| |
| select { |
| border: solid 1px #A6CEE3; |
| } |
| |
| option:hover { |
| background-color: #A6CEE3; |
| } |
| |
| option:checked { |
| background-color: #A6CEE3; |
| color: #1F78B4; |
| } |
| |
| select { |
| overflow-y: auto; |
| } |