Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (4.57 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
// ===================== Styles ===================== //
60

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

    
137
    .v-related-entity-list-select {
138
        @include icon-button-field('v-select', 'v-button', 2, 'right', $v-unit-size);
139
    }
140
    
141
    // ------------ v-related-entity-combobox ------------ //
142
    .v-related-entity-combobox {
143
        @include icon-button-field('v-filterselect', 'v-button', 2, 'right', $v-unit-size);
144
        .v-filterselect-button {
145
            right: $v-unit-size * 2 + 1px;
146
        }
147
    }
148
    
149
    // ------------ minMaxTextField ------------ //
150
    .v-min-max-text-field {
151
        @include composite-field-wrapper;
152
    }
153
    
154
    // ------------ v-geolocation-field ------------- //
155
    .v-geolocation-field {
156
        .wrapper{
157
          @include composite-field-wrapper;
158
        }
159
    }
160
    
161
} 
Add picture from clipboard (Maximum size: 40 MB)