Project

General

Profile

1
// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
2

    
3
//
4
// Component: Form
5
//
6
// ========================================================================
7

    
8

    
9
// Variables
10
// ========================================================================
11

    
12
@form-height:                                   @global-height;
13
@form-padding:                                  4px 0;
14
@form-border:                                   @global-border;
15
@form-background:                               rgba(0,0,0,0);
16
@form-color:                                    @global-color;
17

    
18
@form-focus-border:                             @global-primary-background;
19
@form-focus-background:                         rgba(0,0,0,0);
20
@form-focus-color:                              @global-color;
21

    
22
@form-disabled-border:                          lighten(@global-border, 10%);
23
@form-disabled-background:                      rgba(0,0,0,0);
24
@form-disabled-color:                           lighten(@global-muted-color, 10%);
25

    
26
@form-placeholder-color:                        @global-muted-color;
27

    
28
@form-gutter:                                   @global-margin;
29

    
30
@form-legend-border:                            rgba(0,0,0,0);
31
@form-legend-font-size:                         round((@global-font-size * 1.2)); // 18px
32
@form-legend-line-height:                       round((@form-legend-font-size * 1.68)); // 30px
33

    
34
@form-small-height:                             @global-height-small;
35
@form-large-height:                             @global-height-large;
36
@form-small-padding:                            3px 0;
37
@form-large-padding:                            8px 0;
38
@form-small-font-size:                          round((@global-font-size * 0.8)); // 12px
39
@form-large-font-size:                          round((@global-font-size * 1.333)); // 16px
40

    
41
@form-danger-border:                            @global-danger-background;
42
@form-danger-background:                        rgba(0,0,0,0);
43
@form-danger-color:                             @global-danger-color;
44

    
45
@form-success-border:                           @global-success-background;
46
@form-success-background:                       rgba(0,0,0,0);
47
@form-success-color:                            @global-success-color;
48

    
49
@form-blank-border:                             @global-border;
50

    
51
@form-icon-font-size:                           @global-font-size;
52
@form-icon-color:                               @global-muted-color;
53

    
54
//
55
// New
56
//
57

    
58
@form-focus-box-shadow:                         0 1px 0 0 @global-primary-background;
59
@form-danger-focus-box-shadow:                  0 1px 0 0 @global-danger-background;
60
@form-success-focus-box-shadow:                 0 1px 0 0 @global-success-background;
61

    
62

    
63
// Component
64
// ========================================================================
65

    
66
.hook-form() { border-width: 0 0 @form-border-width 0; }
67

    
68
// Focus state
69
.hook-form-focus() { box-shadow: @form-focus-box-shadow; }
70

    
71
// Disabled state
72
.hook-form-disabled() {}
73

    
74
// Legend
75
.hook-form-legend() {}
76

    
77

    
78
// Validation states
79
// ========================================================================
80

    
81
//
82
// Error state
83
//
84

    
85
.hook-form-danger() { &:focus { box-shadow: @form-danger-focus-box-shadow !important; } }
86

    
87
//
88
// Success state
89
//
90

    
91
.hook-form-success() { &:focus { box-shadow: @form-success-focus-box-shadow !important; } }
92

    
93

    
94
// Style modifiers
95
// ========================================================================
96

    
97
.hook-form-blank() { &:focus { box-shadow: none !important; } }
98

    
99
.hook-form-blank-focus() {}
100

    
101

    
102
// Sub-object: `uk-form-label`
103
// ========================================================================
104

    
105
.hook-form-stacked-label() {}
106

    
107
.hook-form-horizontal-label() {}
108

    
109

    
110
// Miscellaneous
111
// ========================================================================
112

    
113
.hook-form-misc() {}
(20-20/49)