Project

General

Profile

1
/*** utils ***/
2

    
3
/* avatar */
4
.md-user-image {
5
    width: 34px;
6
    border-radius: 50%;
7
    &-large {
8
        width: 82px;
9
        border-radius: 50%;
10
    }
11
}
12
.md-user {
13
    &-placeholder {
14
        background-color: @background_color_default;
15
        width: 34px;
16
        height: 34px;
17
        border-radius: 50%;
18
    }
19
    &-letters {
20
        display: inline-block;
21
        line-height: 35px;
22
        width: 34px;
23
        height: 34px;
24
        border-radius: 50%;
25
        text-align: center;
26
        text-transform: uppercase;
27
        font-weight: 500;
28
        background-color: @background_color_default;
29
    }
30
}
31

    
32
/* icons */
33
.md-icon {
34
    font-size: 24px;
35
    line-height: 32px !important;
36
    height: 32px !important;
37
    color: @text_secondary_color;
38
    border-radius: 50%;
39
    cursor: pointer;
40
    transition: background 280ms ease-out,color 280ms ease-out;
41
    width: 32px !important;
42
    text-align: center;
43
    -webkit-tap-highlight-color: rgba(0,0,0,0);
44
    &:hover,
45
    &:focus,
46
    &:active,
47
    &.active {
48
        color: @text_primary_color;
49
        background: rgba(0,0,0,.08);
50
    }
51
    &-light {
52
        color: @white;
53
        &:hover,
54
        &:focus,
55
        &:active {
56
            color: @white;
57
            background: rgba(0,0,0,.2);
58
        }
59
    }
60
    &-dark {
61
        color: @text_primary_color;
62
        &:hover,
63
        &:focus,
64
        &:active {
65
            color: @text_primary_color;
66
            background: rgba(255,255,255,.6);
67
        }
68
    }
69
    & + & {
70
        margin-left: 4px;
71
    }
72
    &-btn {
73
        display: inline-block;
74
        &.active {
75
            .md-icon {
76
                color: @text_primary_color;
77
                background: rgba(0,0,0,.08);
78
            }
79
        }
80
    }
81
    button& {
82
        background: none;
83
        border: none;
84
        outline: none;
85
    }
86
}
87

    
88
.uk-open {
89
    .md-icon {
90
        color: @text_primary_color;
91
        background: rgba(0,0,0,.08);
92
        &-light {
93
            color: @white;
94
            background: rgba(0,0,0,.2);
95
        }
96
        &-dark {
97
            color: @text_primary_color;
98
            background: rgba(255,255,255,.6);
99
        }
100
    }
101
}
102

    
103

    
104
/* dropdown list */
105
.md-list-inputs {
106
    .reset_list();
107
    li {
108
        + li {
109
            margin-top: 8px;
110
        }
111
        .icheckbox_md {
112
            float: left;
113
        }
114
        label {
115
            overflow: hidden;
116
            padding-left: 8px;
117
            display: block;
118
            cursor: pointer;
119
        }
120
    }
121
}
122

    
123
/* hr */
124
.md-hr {
125
    margin: 32px 0;
126
    height: 0;
127
    border-top: 2px solid @border_color;
128
}
129

    
130
/* animated show */
131
@keyframes hierarchical_show {
132
    0% {
133
        opacity: 0;
134
        transform: scale3d(.2, .2, 2);
135
    }
136
    50% {
137
        opacity: 1;
138
    }
139
    100% {
140
        transform: scale3d(1, 1, 1);
141
    }
142
}
143

    
144
.hierarchical_show {
145
    will-change: transform, opacity;
146
    > * {
147
        visibility: hidden;
148
    }
149
    &_inView {
150
        > * {
151
            animation-fill-mode: both;
152
            animation-timing-function: @md_easing;
153
            animation-duration: 700ms;
154
            animation-name: hierarchical_show;
155
            visibility: visible;
156
        }
157
    }
158
}
159

    
160
@keyframes hierarchical_slide {
161
    0% {
162
        opacity: 0;
163
        transform: translate3d(0, 160%, 0);
164
    }
165
    33% {
166
        opacity: 1;
167
    }
168
    100% {
169
        transform: translate3d(0, 0, 0);
170
    }
171
}
172

    
173
.hierarchical_slide {
174
    will-change: transform, opacity;
175
    > * {
176
        visibility: hidden;
177
    }
178
    &_inView {
179
        > * {
180
            animation-fill-mode: both;
181
            animation-timing-function: @md_easing;
182
            animation-duration: 700ms;
183
            animation-name: hierarchical_slide;
184
            visibility: visible;
185
        }
186
    }
187
}
188

    
189
.fast_animation {
190
    animation-duration: 350ms;
191
}
(10-10/12)