_user-icon.scss 1.75 KB
Newer Older
1
2
3
4
5
6
7
.user-icon {
    @include border-radius(3px);
    background-color:#fff;
    padding: 5px;
    display: table;
    border: 1px solid $panel-default-border;
    overflow: hidden;
Naomi Guyer's avatar
Naomi Guyer committed
8
9
10
    z-index: 1;
    position: relative;

11

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    &.left {
        position:absolute;
        left: 5px;
        top: 5px;
        display: block;
        z-index: 5;
        width: 45px;
        height: 45px;

         &.small-icon {
            width: 35px;
            height: 35px;
        }
    }

27
28
29
30
31
    &.position-bottom {
        position:absolute;
        bottom:17%;
    }

32
33
34
35
36
37
38
39
40
41
42
43
44
45
    &.user-icon-larger{
        width: 85px;
        height: 85px;
    }


    .list-group-item &, &.small-icon {
        padding: 3px;
    }
    .list-group-item & {
        float: left;
        margin-top: -5px;
        margin-left: -5px;
        margin-right: 5px;
46
        max-width: 20%;
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
    }
    img {
        @include border-radius(3px);
        margin: 0;
        opacity: 0.9;
        position: relative;
        border-radius: 3px;
       //float:left;
        margin: 0;
        opacity: 0.9;
        position: relative;
    }
    p {
        margin-top: 3px;
        margin-bottom: 0;
    }
}

.user-icon-alt {
    @include border-radius(3px);
    .label &{
        margin: 1px 4px 0px -3px;
    }
}

.label .user-icon {
    display: inline-block;
}

76
77
78
79
.with-user-icon {
    max-width:80%;
}

80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.panel-heading {
    a.has-user-icon , a.has-user-icon.collapsed {
        padding-left:65px; //make room for user image
    }
}

a.user-icon, a .user-icon {
    &:hover,
    &:focus {
        opacity:1;
        background-color: darken(#f5f5f5, 1%);

        img {
            opacity: 1;
        }

        &:after {
            @include transition(opacity 0.5s);
            opacity:1;
            visiblity: visible;
        }
    }
}