1 | .icon-block {
|
---|
2 | width: 40px;
|
---|
3 | height: 40px;
|
---|
4 | line-height: 40px;
|
---|
5 | display: inline-flex;
|
---|
6 | justify-content: center;
|
---|
7 | align-items: center;
|
---|
8 | background: #e1e1e1;
|
---|
9 | border-radius: 3px;
|
---|
10 | text-align: center;
|
---|
11 | color: black;
|
---|
12 | font-size: $default-font-size + 4;
|
---|
13 |
|
---|
14 | &.icon-block-outline-white {
|
---|
15 | border: 2px solid white;
|
---|
16 | background: none;
|
---|
17 | color: white !important;
|
---|
18 | }
|
---|
19 |
|
---|
20 | &.icon-block-outline-primary {
|
---|
21 | border: 2px solid $color-primary;
|
---|
22 | color: $color-primary !important;
|
---|
23 | background: none;
|
---|
24 | }
|
---|
25 |
|
---|
26 | &.icon-block-outline-success {
|
---|
27 | border: 2px solid $color-success;
|
---|
28 | color: $color-success !important;
|
---|
29 | background: none;
|
---|
30 | }
|
---|
31 |
|
---|
32 | &.icon-block-outline-danger {
|
---|
33 | border: 2px solid $color-danger;
|
---|
34 | color: $color-danger !important;
|
---|
35 | background: none;
|
---|
36 | }
|
---|
37 |
|
---|
38 | &.icon-block-outline-info {
|
---|
39 | border: 2px solid $color-info;
|
---|
40 | color: $color-info !important;
|
---|
41 | background: none;
|
---|
42 | }
|
---|
43 |
|
---|
44 | &.icon-block-outline-warning {
|
---|
45 | border: 2px solid $color-warning;
|
---|
46 | color: $color-warning !important;
|
---|
47 | background: none;
|
---|
48 | }
|
---|
49 |
|
---|
50 | &.icon-block-outline-dark {
|
---|
51 | border: 2px solid $color-dark;
|
---|
52 | color: $color-dark !important;
|
---|
53 | background: none;
|
---|
54 | }
|
---|
55 |
|
---|
56 | &.icon-block-outline-secondary {
|
---|
57 | border: 2px solid $color-secondary;
|
---|
58 | color: $color-secondary !important;
|
---|
59 | background: none;
|
---|
60 | }
|
---|
61 |
|
---|
62 | &.icon-block-outline-facebook {
|
---|
63 | border: 2px solid $color-facebook;
|
---|
64 | color: $color-facebook !important;
|
---|
65 | background: none;
|
---|
66 | }
|
---|
67 |
|
---|
68 | &.icon-block-outline-twitter {
|
---|
69 | border: 2px solid $color-twitter;
|
---|
70 | color: $color-twitter !important;
|
---|
71 | background: none;
|
---|
72 | }
|
---|
73 |
|
---|
74 | &.icon-block-outline-linkedin {
|
---|
75 | border: 2px solid $color-linkedin;
|
---|
76 | color: $color-linkedin !important;
|
---|
77 | background: none;
|
---|
78 | }
|
---|
79 |
|
---|
80 | &.icon-block-outline-whatsapp {
|
---|
81 | border: 2px solid $color-whatsapp;
|
---|
82 | color: $color-whatsapp !important;
|
---|
83 | background: none;
|
---|
84 | }
|
---|
85 |
|
---|
86 | &.icon-block-outline-instagram {
|
---|
87 | border: 2px solid $color-instagram;
|
---|
88 | color: $color-instagram !important;
|
---|
89 | background: none;
|
---|
90 | }
|
---|
91 |
|
---|
92 | &.icon-block-outline-dribbble {
|
---|
93 | border: 2px solid $color-dribbble;
|
---|
94 | color: $color-dribbble !important;
|
---|
95 | background: none;
|
---|
96 | }
|
---|
97 |
|
---|
98 | &.icon-block-outline-google {
|
---|
99 | border: 2px solid $color-google;
|
---|
100 | color: $color-google !important;
|
---|
101 | background: none;
|
---|
102 | }
|
---|
103 |
|
---|
104 | &.icon-block-outline-youtube {
|
---|
105 | border: 2px solid $color-youtube;
|
---|
106 | color: $color-youtube !important;
|
---|
107 | background: none;
|
---|
108 | }
|
---|
109 |
|
---|
110 | &.icon-block-xl {
|
---|
111 | width: 70px;
|
---|
112 | height: 70px;
|
---|
113 | line-height: 70px;
|
---|
114 | font-size: $default-font-size + 14;
|
---|
115 | }
|
---|
116 |
|
---|
117 | &.icon-block-lg {
|
---|
118 | width: 50px;
|
---|
119 | height: 50px;
|
---|
120 | line-height: 50px;
|
---|
121 | font-size: $default-font-size + 8;
|
---|
122 | }
|
---|
123 |
|
---|
124 | &.icon-block-sm {
|
---|
125 | width: 30px;
|
---|
126 | height: 30px;
|
---|
127 | line-height: 30px;
|
---|
128 | font-size: $default-font-size;
|
---|
129 | }
|
---|
130 |
|
---|
131 | &.icon-block-xs {
|
---|
132 | width: 20px;
|
---|
133 | height: 20px;
|
---|
134 | line-height: 20px;
|
---|
135 | font-size: $default-font-size - 2;
|
---|
136 | }
|
---|
137 |
|
---|
138 | &.icon-block-floating {
|
---|
139 | border-radius: 50%;
|
---|
140 | }
|
---|
141 | } |
---|