Mercurial > nebulaweb3

comparison default/assets/scss/components/_icon-box.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }