Project

General

Profile

« Previous | Next » 

Revision 93a60750

Added by Andreas Kohlbecker almost 7 years ago

ref #6759 using new dom style of switch

View differences:

src/main/webapp/VAADIN/themes/edit-valo/custom-fields.scss
88 88 
  // ------------ v-switchable-textfield ------------ //
89 89 
  .v-switchable-textfield {
90 90 
    @include icon-button-field('v-textfield', 'v-switch', 1, 'right');
91 
    .v-switch-icon{
92 
        height: 1.3em; // TODO fix in addon
93 
        font-size: $v-unit-size; // 40px
94 
        width: 54px;
95 
        top: 10px;
91 
    .v-switch {
92 
        top: round($v-unit-size * 0.75);
93 
        right: round($v-unit-size / 4);
96 94 
    }
97 95 
  }
98 96
......
106 104 
    }
107 105 
    .v-switch {
108 106 
        z-index: 10;
109 
        width: $v-unit-size;
110 107 
        position: absolute;
111 
        right: 1px;
112 
        bottom: 1px;
108 
        right: round($v-unit-size / 4) + 3px; // + boxshadow width from $v-shadow, TODO extract value from variable?
109 
        bottom: 15px;
113 110 
    }
114 111 
  }
115 112 
  .v-person-field-cache-mode {
......
168 165 
        }
169 166 
    }
170 167
168 
    // Switch
169
170 
    $widget-height: round($v-unit-size / 2);
171 
    $widget-width: $v-unit-size;
172 
    $widget-border-width: 1px; // must match the value as set in $v-border
173 
    $widget-border-radius: round($widget-height / 2);
174
175 
    $knob-border-width: 1px; // must match the value as set in $v-border
176 
    $slider-height: $widget-height - 2 * $widget-border-width;
177 
    $knob-inner-height: $slider-height - 2 * $knob-border-width;
178
179 
    $knob-border-width: 1px; // must match the value as set in $v-border
180 
    $slider-width: round($widget-width - 2 * $widget-border-width - $slider-height / 2) * 2;
181 
    $knob-border-radius: round($knob-height / 2);
182 
    $knob-left: round(($slider-width - $slider-height) / 2);
183
184 
    .v-switch-dom {
185 
        height: $widget-height;
186 
        width: $widget-width;
187 
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
188 
        border-radius: $v-border-radius;
189 
        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $background-color: $v-background-color, $gradient: $v-gradient));
190
191 
        .v-switch-slider {
192 
            height: $slider-height;
193 
            width: $slider-width;
194 
            background: none;
195 
        }
196
197 
        .v-switch-on-plate, .v-switch-off-plate {
198 
            position: absolute;
199 
            top: 0px;
200 
            left: 0px;
201 
            height: inherit;
202 
            width: round($slider-width / 2);
203 
            background-color: $v-focus-color;
204 
        }
205
206 
        .v-switch-off-plate {
207 
            left: round($slider-width / 2);
208 
            background-color: $v-textfield-background-color;
209 
        }
210
211 
        .v-switch-knob {
212 
            position: absolute;
213 
            top: 0px;
214 
            left: $knob-left;
215 
            height: $slider-height;
216 
            width: $slider-height;
217 
            background-color: $v-background-color;
218 
            border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
219 
            border-radius: $knob-border-radius;
220 
        }
221 
    }
222 

  		




  
  223
  
    
    


  		




  171
  224
  
    
} 


  		












Also available in:  Unified diff