Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

cdm-vaadin / src / main / webapp / VAADIN / themes / edit-valo / custom-fields.scss @ 65ac8231

History | View | Annotate | Download (4.86 KB)

1
// styles for custom fields
2

    
3
// ===================== Mixins ==============================//
4

    
5
@mixin composite-field-wrapper() {
6
  border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
7
  border-radius: $v-border-radius;
8
  background-color: $v-app-background-color;
9
  padding: round($v-unit-size / 4);
10
}
11

    
12
@mixin icon-button-field-button($button-style-name, $button-count: 1, $button-alignment: 'right', $button-width: $v-unit-size, $button-index: 0){
13

    
14
   $sibling-selector:'';
15
   @if $button-index > 0 {
16
    $sibling-selector:'+';
17
   }
18
    
19
  #{$sibling-selector} .#{$button-style-name} {
20
        z-index: 10;
21
        width: $button-width;
22
        position: absolute;
23
        @if $button-alignment == 'left' {
24
            left: $button-width * $button-index + 1px;
25
        }
26
        @if $button-alignment == 'right' {
27
            right: $button-width * ($button-count - 1 - $button-index) + 1px;
28
        }
29
        @if $button-index < $button-count - 1 {
30
            $button-index: $button-index + 1;
31
            @include icon-button-field-button($button-style-name, $button-count, $button-alignment, $button-width, $button-index);
32
        }
33
    }
34
}
35

    
36

    
37
@mixin icon-button-field($field-stylename, $button-style-name, $button-count: 1, $button-alignment: 'right', $button-width: $v-unit-size) {
38
    position: relative; // needs to be a positioned element
39
    height: $v-line-height * 2;
40
    .v-caption {
41
        display: block;
42
    }   
43
    .#{$field-stylename} {
44
        @if $button-alignment == 'left' {
45
            padding-left: $button-count * $button-width; 
46
        }
47
        @if $button-alignment == 'right' {
48
            $more-padding: 0px;
49
            @if $field-stylename == 'v-select' {
50
                $more-padding: 8px;
51
            }
52
            padding-right: $button-count * $button-width + $more-padding; 
53
        }        
54
    }
55
    // recursive include
56
    @include icon-button-field-button($button-style-name, $button-count, $button-alignment, $button-width);
57
}
58

    
59

    
60
// ===================== Styles ===================== //
61

    
62
body .edit-valo { // increasing specifity to allow overriding the valo default field themes
63
  
64
  .composite-field-wrapper {
65
        @include composite-field-wrapper;
66
    }
67
  
68
  // ------------  TimePeriodField ------------ //
69
  .v-time-period-field {
70
      .margin-wrapper {
71
          @include composite-field-wrapper;
72
      }
73
      .to-label {
74
        padding: 0 round($v-unit-size / 2);
75
      }
76
  }
77
  
78
  .v-textfield-helper-field { 
79
          @if is-dark-color($v-background-color) {
80
              $helper-color: lighten($v-background-color, 20%);
81
          } @else {
82
              $helper-color: lighten($v-background-color, -20%);
83
          }
84
          color: $helper-color;
85
          background-color: valo-font-color($helper-color);
86
          border-radius: $v-border-radius;
87
   }
88
  
89
  // ------------ v-switchable-textfield ------------ //
90
  .v-switchable-textfield {
91
    @include icon-button-field('v-textfield', 'v-switch', 1, 'right');
92
    .v-switch {
93
        top: round($v-unit-size * 0.75);
94
        right: round($v-unit-size / 4);
95
    }
96
  }
97
  
98
  // ------------ v-person-field ------------ //
99
  .v-person-field {
100
    position: relative;
101
    .v-caption {
102
        display: block;
103
    }
104
    .cache-field, .details-fields  {
105
        padding-right: round($v-unit-size * 1.5);
106
    }
107
    .v-switch {
108
        z-index: 10;
109
        position: absolute;
110
        right: 3px; // boxshadow width (3px) from $v-shadow, TODO extract value from variable?
111
        top: 4px; // boxshadow width (3px) + 1 
112
    } 
113
  }
114
  .v-person-field-cache-mode {
115
        .cache-field {
116
            display: block;
117
        }
118
        .details-fields {
119
            display: none;
120
        }
121
    }
122
   .v-person-field-details-mode {
123
        .cache-field {
124
            display: none;
125
        }
126
        .details-fields {
127
            display: block;
128
        }
129
    }
130
    
131
   // ------------ team-or-person-field ------------ // 
132
   .v-team-or-person-field {
133
   
134
        .toolbar {
135
            float: right;
136
            height: $v-unit-size;
137
        }
138
        .margin-wrapper {
139
            @include composite-field-wrapper;
140
            
141
        }
142
    }
143
    
144
    // ------------ v-related-entity-list-select ------------ //
145

    
146
    .v-related-entity-list-select {
147
        @include icon-button-field('v-select', 'v-button', 2, 'right', $v-unit-size);
148
    }
149
    
150
    // ------------ v-related-entity-combobox ------------ //
151
    .v-related-entity-combobox {
152
        @include icon-button-field('v-filterselect', 'v-button', 2, 'right', $v-unit-size);
153
        .v-filterselect-button {
154
            right: $v-unit-size * 2 + 1px;
155
        }
156
    }
157
    
158
    // ------------ minMaxTextField ------------ //
159
    .v-min-max-text-field {
160
        @include composite-field-wrapper;
161
    }
162
    
163
    // ------------ v-geolocation-field ------------- //
164
    .v-geolocation-field {
165
        .wrapper{
166
          @include composite-field-wrapper;
167
        }
168
    }   
169
    
170
} 
Add picture from clipboard (Maximum size: 40 MB)