Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (6.13 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
        position: absolute !important; // this is a temporary fix for the issue https://dev.e-taxonomy.eu/redmine/issues/8035
97
    }
98
  }
99
  
100
  // ------------ NameRelationField ------------ //
101
  .v-name-relation-field {
102
      .toolbar {
103
            float: right;
104
            height: $v-unit-size;
105
      }
106
      .margin-wrapper {
107
          @include composite-field-wrapper;
108
      }
109
  }
110
  
111
  // ------------ v-person-field ------------ //
112
  .v-person-field {
113
    position: relative;
114
    .v-caption {
115
        display: block;
116
    }
117
    .cache-field, .details-fields  {
118
        padding-right: round($v-unit-size * 1.5);
119
    }
120
    .v-switch {
121
        z-index: 10;
122
        position: absolute;
123
        right: 3px; // boxshadow width (3px) from $v-shadow, TODO extract value from variable?
124
        top: 4px; // boxshadow width (3px) + 1 
125
    } 
126
  }
127
  .v-person-field-cache-mode {
128
        .cache-field {
129
            display: block;
130
        }
131
        .details-fields {
132
            display: none;
133
        }
134
    }
135
   .v-person-field-details-mode {
136
        .cache-field {
137
            display: none;
138
        }
139
        .details-fields {
140
            display: block;
141
        }
142
    }
143
    
144
   // ------------ team-or-person-field ------------ // 
145
   .v-team-or-person-field {
146
   
147
        .toolbar {
148
            float: right;
149
            height: $v-unit-size;
150
        }
151
        .margin-wrapper {
152
            @include composite-field-wrapper;
153
            
154
        }
155
    }
156
    
157
    // ------------ v-related-entity-list-select ------------ //
158

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