Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (6 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: relative;
23
        @if $button-alignment == 'left' {
24
            left: $button-width + 1px;
25
        }
26
        @if $button-alignment == 'right' {
27
            right: $button-width * $button-count + 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
  
39
    position: relative; // needs to be a positioned element
40
    height: $v-line-height * 2;
41
    .v-caption {
42
        display: block;
43
    }   
44
    .#{$field-stylename} {
45
        @if $button-alignment == 'left' {
46
            padding-left: $button-count * $button-width; 
47
        }
48
        @if $button-alignment == 'right' {
49
            $more-padding: 0px;
50
            @if $field-stylename == 'v-select' {
51
                $more-padding: 8px;
52
            }
53
            padding-right: $button-count * $button-width + $more-padding; 
54
        }        
55
    }
56
    // recursive include
57
    @include icon-button-field-button($button-style-name, $button-count, $button-alignment, $button-width);
58
}
59

    
60

    
61
// ===================== Styles ===================== //
62

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

    
158
    .v-related-entity-list-select {
159
        @include icon-button-field('v-select', 'v-button', 2, 'right', $v-unit-size);
160
    }
161
    
162
    // ------------ v-related-entity-combobox ------------ //
163
    .v-related-entity-combobox {
164
        $buttons-count: 2;    
165
        @include icon-button-field('v-filterselect', 'v-button', $buttons-count, 'right', $v-unit-size);
166
        padding-right: $edit-v-shadow-spread-radius * 2 * $buttons-count;
167
        .v-filterselect-button {
168
            right: $v-unit-size * 2 + 1px;
169
        }
170
        .v-component-group {
171
          .v-required-field-indicator {
172
              // no not show the indicator of the nested select
173
              display: none;
174
          }
175
          .v-errorindicator {
176
             // no not show the indicator of the nested select
177
              display: none;
178
          }
179
        }
180
    }
181
    
182
    // ------------ minMaxTextField ------------ //
183
    .v-min-max-text-field {
184
        @include composite-field-wrapper;
185
    }
186
    
187
    // ------------ v-geolocation-field ------------- //
188
    .v-geolocation-field {
189
        .wrapper{
190
          @include composite-field-wrapper;
191
        }
192
        .map-wrapper {
193
            .v-label {
194
              position: absolute;
195
              color: black;
196
              margin-left: 60px;
197
              z-index: 1000;
198
              font-weight: bold;
199
              background-color: white;
200
              border-radius: $v-border-radius;
201
            }
202
            .v-leaflet{
203
              position: absolute;
204
              .leaflet-container{
205
                  border-radius: $v-border-radius;
206
                  margin-left: 10px;
207
              }
208
            }
209
          }
210
    }
211
} 
Add picture from clipboard (Maximum size: 40 MB)