PluginProbe
Bubble Menu – Floating Button Menu with Sticky Navigation / trunk
Bubble Menu – Floating Button Menu with Sticky Navigation vtrunk
trunk 1.3 2.0 2.2 2.2.1 3.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.1 3.1.1 4.0 4.0.1 4.0.2 4.0.3 4.0.4 4.0.5 4.0.6 4.0.7 4.1 4.1.1
bubble-menu / includes / assets / css / style.css

style.css in Bubble Menu – Floating Button Menu with Sticky Navigation trunk, at includes/assets/css/style.css

114 lines 1.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpie-page .about-wrap{
2 text-align: center;
3 }
4
5 .wpie-badge img {
6 width: 52px;
7 }
8
9 .wpie-page__header {
10 max-width: 750px;
11 margin: 50px auto;
12 text-align: center;
13 }
14
15 .wpie-page__header h1 {
16 letter-spacing: .25rem;
17 text-transform: uppercase;
18 font-size: 20px;
19 font-weight: normal;
20 }
21
22 .wpie-page__header .about-text {
23 color: rgba(35, 28, 51, 0.66);
24 font-size: 18px;
25 }
26
27 .wpie-page__content {
28 max-width: 1216px;
29 margin: 50px auto;
30 }
31
32 .wpie-page__content h2:before {
33 background-color: #E86E2C;
34 content: "";
35 display: inline-block;
36 height: 0.125rem;
37 margin-right: 1rem;
38 vertical-align: 0.3em;
39 width: 1.5rem;
40 }
41
42 .item-cards {
43 display: grid;
44 gap: 0.75rem;
45 margin-bottom: 48px;
46 }
47
48 .item-card {
49 margin: 0;
50 padding: 1.25rem;
51 border-radius: 4px;
52 border: 1px solid #c3c4c7;
53 background-color: #ffffff;
54
55 display: grid;
56 grid-template-columns: 48px 1fr;
57 grid-template-rows: repeat(2, 1fr);
58 grid-column-gap: 1rem;
59 grid-row-gap: 8px;
60 }
61
62 .item-card:hover {
63 box-shadow: 0 0 0 1px rgba(20, 16, 44, 0.05), 0 1px 0 0 rgba(20, 16, 44, 0.05), 0 0.2em 1.6em -0.8em rgba(20, 16, 44, 0.2), 0 0.4em 2.4em -1em rgba(20, 16, 44, 0.3), 0 0.4em 0.8em -1.2em rgba(20, 16, 44, 0.4), 0 0.8em 1.2em -1.6em rgba(20, 16, 44, 0.5), 0 1.2em 1.6em -2em rgba(20, 16, 44, 0.6);
64 }
65
66 .item-description {
67 grid-area: 2 / 1 / 3 / 3;
68 font-size: 15px;
69 font-weight: normal;
70 color: rgba(35, 28, 51, 0.73);
71 }
72
73
74 .item-img img {
75 width: 48px;
76 border-radius: 2px;
77 }
78
79 .item-title {
80 color: #363636;
81 font-weight: 600;
82 line-height: 1.125;
83 font-size: 1.125rem;
84 }
85
86 .item-links {
87 display: flex;
88 gap: 12px;
89 font-size: 14px;
90 padding-top: 8px;
91 }
92
93 @media (min-width: 769px) {
94 .item-cards {
95 grid-template-columns: repeat(2, minmax(0, 1fr));
96 gap: 0.75rem;
97 }
98 }
99
100 @media (min-width: 1024px) {
101 .item-cards {
102 grid-template-columns: repeat(3, minmax(0, 1fr));
103 gap: 1rem;
104 }
105 }
106
107 .wpie-page__footer {
108 max-width: 750px;
109 margin-inline: auto;
110 }
111 .wpie-page__footer p {
112 color: #14102C;
113 margin-bottom: 5px;
114 }