|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Icon Box
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .icon-box {
|
|
|
8 header {
|
|
|
9 a {
|
|
|
10 font-size: em(20);
|
|
|
11 color: $body-color;
|
|
|
12 }
|
|
|
13 img {
|
|
|
14 @include size(em(50,30));
|
|
|
15 max-width: none;
|
|
|
16 }
|
|
|
17 }
|
|
|
18
|
|
|
19 section {
|
|
|
20 h5 {
|
|
|
21 margin-bottom: rem(20);
|
|
|
22 }
|
|
|
23 p {
|
|
|
24 line-height: em(25, 14);
|
|
|
25 font-size: em(14);
|
|
|
26 &:last-child {
|
|
|
27 margin-bottom: 0;
|
|
|
28 }
|
|
|
29 }
|
|
|
30 }
|
|
|
31 }
|
|
|
32
|
|
|
33 .icon-box-xs header a { font-size: rem(12) }
|
|
|
34 .icon-box-sm header a { font-size: rem(16) }
|
|
|
35 .icon-box-lg header a { font-size: rem(24) }
|
|
|
36 .icon-box-xl header a { font-size: rem(28) }
|
|
|
37
|
|
|
38 .icon-box-centered {
|
|
|
39 padding: em(40) em(20) em(30);
|
|
|
40 text-align: center;
|
|
|
41 header {
|
|
|
42 display: flex;
|
|
|
43 justify-content: center;
|
|
|
44 align-items: center;
|
|
|
45 }
|
|
|
46 section {
|
|
|
47 margin-top: em(30);
|
|
|
48 }
|
|
|
49 h5 {
|
|
|
50 margin-bottom: em(25,15);
|
|
|
51 }
|
|
|
52
|
|
|
53 }
|
|
|
54
|
|
|
55 .icon-box-side {
|
|
|
56 display: flex;
|
|
|
57 margin: em(30) 0;
|
|
|
58 header {
|
|
|
59 margin: 0 em(20);
|
|
|
60 }
|
|
|
61 a {
|
|
|
62 display: flex;
|
|
|
63 }
|
|
|
64 .icon-box-title {
|
|
|
65 margin-top: 0;
|
|
|
66 }
|
|
|
67 section {
|
|
|
68 flex: 1;
|
|
|
69 }
|
|
|
70 }
|
|
|
71
|
|
|
72 .icon-box-circle-bg {
|
|
|
73 header {
|
|
|
74 a {
|
|
|
75 color: #fff;
|
|
|
76 background: $body-color;
|
|
|
77 }
|
|
|
78 }
|
|
|
79 }
|
|
|
80
|
|
|
81 .icon-box-circle {
|
|
|
82 header a {
|
|
|
83 border-radius: 100px;
|
|
|
84 @include size(2em);
|
|
|
85 display: flex;
|
|
|
86 justify-content: center;
|
|
|
87 align-items: center;
|
|
|
88 }
|
|
|
89 &.icon-box-xs header a { font-size: rem(10) }
|
|
|
90 &.icon-box-sm header a { font-size: rem(14) }
|
|
|
91 &.icon-box-lg header a { font-size: rem(24) }
|
|
|
92 &.icon-box-xl header a { font-size: rem(30) }
|
|
|
93 }
|
|
|
94
|
|
|
95 .icon-box-outline {
|
|
|
96 header a {
|
|
|
97 padding: 1em;
|
|
|
98 border: 1px solid $body-color;
|
|
|
99 }
|
|
|
100 &-thick {
|
|
|
101 header a {
|
|
|
102 border: 2px solid $body-color;
|
|
|
103 }
|
|
|
104 }
|
|
|
105 &-thicker {
|
|
|
106 header a {
|
|
|
107 border: 3px solid $body-color;
|
|
|
108 }
|
|
|
109 }
|
|
|
110 &-thickest {
|
|
|
111 header a {
|
|
|
112 border: 4px solid $body-color;
|
|
|
113 }
|
|
|
114 }
|
|
|
115 &.icon-box-xs header a { font-size: rem(10) }
|
|
|
116 &.icon-box-sm header a { font-size: rem(14) }
|
|
|
117 &.icon-box-lg header a { font-size: rem(24) }
|
|
|
118 &.icon-box-xl header a { font-size: rem(30) }
|
|
|
119 }
|
|
|
120
|
|
|
121 .icon-box-circle-bg,
|
|
|
122 [class^='icon-box-outline'] {
|
|
|
123 header {
|
|
|
124 a, i {
|
|
|
125 display: flex;
|
|
|
126 justify-content: center;
|
|
|
127 align-items: center;
|
|
|
128 }
|
|
|
129 a {
|
|
|
130 font-size: em(20);
|
|
|
131 @include size( 2em );
|
|
|
132 text-align: center;
|
|
|
133 border-radius: 100%;
|
|
|
134 }
|
|
|
135 i { font-size: 1em; line-height: 1; }
|
|
|
136 }
|
|
|
137 &.icon-box-xs header a { font-size: rem(10) }
|
|
|
138 &.icon-box-sm header a { font-size: rem(14) }
|
|
|
139 &.icon-box-lg header a { font-size: rem(24) }
|
|
|
140 &.icon-box-xl header a { font-size: rem(30) }
|
|
|
141 }
|
