Home | History | Annotate | Download | only in apps 
      1 /* Copyright 2013 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file. */
      4 
      5 button.white-button,
      6 button.blue-button {
      7   border: 5px solid transparent;
      8   box-sizing: content-box;
      9   cursor: default;
     10   height: 21px;
     11   line-height: 21px;
     12   margin: 0;
     13   min-height: 21px;
     14   min-width: 55px;
     15   padding: 0 10px;
     16   position: relative;
     17   outline: none;
     18   text-align: center;
     19   z-index: 1;
     20 }
     21 
     22 button.white-button {
     23   border-image: -webkit-image-set(
     24     url('chrome://resources/images/apps/button.png') 1x,
     25     url('chrome://resources/images/2x/apps/button.png')
     26         2x) 5 fill / 5px / 2px repeat;
     27 }
     28 
     29 button.white-button:hover {
     30   border-image: -webkit-image-set(
     31     url('chrome://resources/images/apps/button_hover.png') 1x,
     32     url('chrome://resources/images/2x/apps/button_hover.png')
     33         2x) 5 fill / 5px / 2px repeat;
     34 }
     35 
     36 button.white-button:active {
     37   border-image: -webkit-image-set(
     38     url('chrome://resources/images/apps/button_pressed.png') 1x,
     39     url('chrome://resources/images/2x/apps/button_pressed.png')
     40         2x) 5 fill / 5px / 2px repeat;
     41 }
     42 
     43 button.white-button:focus {
     44   border-image: -webkit-image-set(
     45     url('chrome://resources/images/apps/button_focused.png') 1x,
     46     url('chrome://resources/images/2x/apps/button_focused.png')
     47         2x) 5 fill / 5px / 2px repeat;
     48 }
     49 
     50 button.white-button:focus:hover {
     51   border-image: -webkit-image-set(
     52     url('chrome://resources/images/apps/button_focused_hover.png') 1x,
     53     url('chrome://resources/images/2x/apps/button_focused_hover.png')
     54         2x) 5 fill / 5px / 2px repeat;
     55 }
     56 
     57 button.white-button:focus:active {
     58   border-image: -webkit-image-set(
     59     url('chrome://resources/images/apps/button_focused_pressed.png') 1x,
     60     url('chrome://resources/images/2x/apps/button_focused_pressed.png')
     61         2x) 5 fill / 5px / 2px repeat;
     62 }
     63 
     64 button.white-button[disabled] {
     65   border-image: -webkit-image-set(
     66     url('chrome://resources/images/apps/button_inactive.png') 1x,
     67     url('chrome://resources/images/2x/apps/button_inactive.png')
     68         2x) 5 fill / 5px / 2px repeat;
     69 }
     70 
     71 button.blue-button {
     72   border-image: -webkit-image-set(
     73     url('chrome://resources/images/apps/blue_button.png') 1x,
     74     url('chrome://resources/images/2x/apps/blue_button.png')
     75         2x) 5 fill / 5px / 2px repeat;
     76 }
     77 
     78 button.blue-button:hover {
     79   border-image: -webkit-image-set(
     80     url('chrome://resources/images/apps/blue_button_hover.png') 1x,
     81     url('chrome://resources/images/2x/apps/blue_button_hover.png')
     82         2x) 5 fill / 5px / 2px repeat;
     83 }
     84 
     85 button.blue-button:active {
     86   border-image: -webkit-image-set(
     87     url('chrome://resources/images/apps/blue_button_pressed.png') 1x,
     88     url('chrome://resources/images/2x/apps/blue_button_pressed.png')
     89         2x) 5 fill / 5px / 2px repeat;
     90 }
     91 
     92 button.blue-button:focus {
     93   border-image: -webkit-image-set(
     94     url('chrome://resources/images/apps/blue_button_focused.png') 1x,
     95     url('chrome://resources/images/2x/apps/blue_button_focused.png')
     96         2x) 5 fill / 5px / 2px repeat;
     97 }
     98 
     99 button.blue-button:focus:hover {
    100   border-image: -webkit-image-set(
    101     url('chrome://resources/images/apps/blue_button_focused_hover.png') 1x,
    102     url('chrome://resources/images/2x/apps/blue_button_focused_hover.png')
    103         2x) 5 fill / 5px / 2px repeat;
    104 }
    105 
    106 button.blue-button:focus:active {
    107   border-image: -webkit-image-set(
    108     url('chrome://resources/images/apps/blue_button_focused_pressed.png') 1x,
    109     url('chrome://resources/images/2x/apps/blue_button_focused_pressed.png')
    110         2x) 5 fill / 5px / 2px repeat;
    111 }
    112 
    113 button.blue-button[disabled] {
    114   border-image: -webkit-image-set(
    115     url('chrome://resources/images/apps/blue_button_inactive.png') 1x,
    116     url('chrome://resources/images/2x/apps/blue_button_inactive.png')
    117         2x) 5 fill / 5px / 2px repeat;
    118 }
    119 
    120 input[type='checkbox'] {
    121   -webkit-appearance: none;
    122   border: none;
    123   outline: none;
    124 }
    125 
    126 input[type='checkbox']::after {
    127   content: '';
    128   display: block;
    129   height: 16px;
    130   left: -2px;
    131   top: -2px;
    132   width: 16px;
    133 }
    134 
    135 input[type='checkbox']:not(:checked)::after {
    136   background-image: -webkit-image-set(
    137     url('chrome://resources/images/apps/checkbox.png') 1x,
    138     url('chrome://resources/images/2x/apps/checkbox.png') 2x);
    139 }
    140 
    141 input[type='checkbox']:focus:not(:checked)::after {
    142   background-image: -webkit-image-set(
    143     url('chrome://resources/images/apps/checkbox_focused.png') 1x,
    144     url('chrome://resources/images/2x/apps/checkbox_focused.png') 2x);
    145 }
    146 
    147 input[type='checkbox']:disabled:not(:checked)::after {
    148   background-image: -webkit-image-set(
    149     url('chrome://resources/images/apps/checkbox_inactive.png') 1x,
    150     url('chrome://resources/images/2x/apps/checkbox_inactive.png') 2x);
    151 }
    152 
    153 input[type='checkbox']:checked::after {
    154   background-image: -webkit-image-set(
    155     url('chrome://resources/images/apps/checkbox_checked.png') 1x,
    156     url('chrome://resources/images/2x/apps/checkbox_checked.png') 2x);
    157 }
    158 
    159 input[type='checkbox']:focus:checked::after {
    160   background-image: -webkit-image-set(
    161     url('chrome://resources/images/apps/checkbox_focused_checked.png') 1x,
    162     url('chrome://resources/images/2x/apps/checkbox_focused_checked.png') 2x);
    163 }
    164 
    165 input[type='checkbox']:disabled:checked::after {
    166   background-image: -webkit-image-set(
    167     url('chrome://resources/images/apps/checkbox_checked_inactive.png') 1x,
    168     url('chrome://resources/images/2x/apps/checkbox_checked_inactive.png') 2x);
    169 }
    170