| <polymer-element name="sliding-checkbox"> |
| <template> |
| <style> |
| .switch { |
| position: relative; |
| width: 121px; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| } |
| .hide { |
| display: none; |
| } |
| .label { |
| display: block; |
| overflow: hidden; |
| cursor: pointer; |
| border: 2px solid #999999; |
| border-radius: 15px; |
| } |
| .content { |
| width: 200%; |
| margin-left: -100%; |
| -moz-transition: margin 0.3s ease-in 0s; |
| -webkit-transition: margin 0.3s ease-in 0s; |
| -o-transition: margin 0.3s ease-in 0s; |
| transition: margin 0.3s ease-in 0s; |
| } |
| .content:before, .content:after { |
| float: left; |
| width: 50%; |
| height: 30px; |
| padding: 0; |
| line-height: 30px; |
| color: white; |
| font: 400 14px 'Montserrat', sans-serif; |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| .content:before { |
| content: {{ checkedText }}; |
| padding-left: 10px; |
| background-color: #0489C3; |
| } |
| .content:after { |
| content: {{ uncheckedText }}; |
| padding-right: 10px; |
| background-color: #EEEEEE; |
| color: #999999; |
| text-align: right; |
| } |
| .dot { |
| width: 14px; |
| margin: 8px; |
| background: #FFFFFF; |
| border: 2px solid #999999; |
| border-radius: 15px; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 87px; |
| -moz-transition: all 0.3s ease-in 0s; |
| -webkit-transition: all 0.3s ease-in 0s; |
| -o-transition: all 0.3s ease-in 0s; |
| transition: all 0.3s ease-in 0s; |
| } |
| :checked + .label .content { |
| margin-left: 0; |
| } |
| :checked + .label .dot { |
| right: 0px; |
| } |
| </style> |
| <div class="switch"> |
| <input type="checkbox" |
| class="hide" |
| id="slide-switch" |
| on-change="{{ change }}"> |
| <label class="label" for="slide-switch"> |
| <div class="content"></div> |
| <div class="dot"></div> |
| </label> |
| </div> |
| </template> |
| <script type="application/dart" src="sliding_checkbox.dart"></script> |
| </polymer-element> |