Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit dc5c238

Browse files
N6REJN6REJ
committed
Improve template 1265 with grid layout, responsive design, and enhanced hover effects for icons
1 parent a68682b commit dc5c238

File tree

1 file changed

+71
-16
lines changed

1 file changed

+71
-16
lines changed

‎css/1265.css‎

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@
6161
--bears-header-border: 1px solid rgba(0, 0, 0, .15);
6262

6363
/* Borders - Buttons */
64-
--bears-button-border-radius: 4px;
64+
--bears-button-border-radius: 40px;
6565

6666
/* Borders - Featured */
67-
--bears-featured-border-radius: 8px;
67+
--bears-featured-border-radius: 0;
6868
--bears-featured-border-width: 2px;
6969
--bears-featured-border-style: var(--bears-border-style);
7070
--bears-featured-border-color: rgba(255, 255, 255, 0.05);
@@ -74,8 +74,8 @@
7474
--bears-featured-accent-color: #ffffff;
7575
--bears-transition-speed: 0.25s;
7676
--bears-scale-amount: 1.1;
77-
--bears-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
78-
--bears-featured-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
77+
--bears-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
78+
--bears-featured-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
7979

8080
/* Icons */
8181
--bears-header-icon-color: #F39C12;
@@ -87,26 +87,47 @@
8787

8888
/* Template-specific styles */
8989
.template-1265 .bears_pricing_tables .price {
90-
display: flex;
90+
display: grid;
91+
grid-template-columns: auto 1fr auto;
9192
align-items: center;
9293
justify-content: center;
94+
width: 100%;
95+
max-width: 90%;
96+
margin: 0 auto;
9397
}
9498

95-
.template-1265 .bears_pricing_tables .price .plan-icon {
99+
.template-1265 .bears_pricing_tables header {
100+
padding: 20px 10px;
101+
}
102+
103+
.template-1265 .bears_pricing_tables .price .plan-icon.price-left {
96104
display: flex;
97105
align-items: center;
98-
margin-right: auto;
99-
margin-left: -8px;
100-
padding-right: .25em;
106+
grid-column: 1;
101107
}
102108

103109
.template-1265 .bears_pricing_tables .price .wrapper {
104110
display: block;
105111
text-align: left;
112+
grid-column: 2;
113+
min-width: 0; /* Allow text to wrap within the cell */
114+
overflow: hidden;
115+
}
116+
117+
.template-1265 .bears_pricing_tables .price .plan-icon.price-right {
118+
display: flex;
119+
align-items: center;
120+
grid-column: 3;
121+
margin-right: -8px;
122+
padding-left: .25em;
106123
}
107124

108125
.template-1265 .bears_pricing_tables .plan-title {
109126
text-align: left;
127+
margin-bottom: 5px;
128+
word-wrap: break-word;
129+
white-space: normal;
130+
word-break: break-word;
110131
}
111132

112133
.template-1265 .bears_pricing_tables .plan-cost {
@@ -115,6 +136,7 @@
115136
text-align: left;
116137
padding: 0;
117138
justify-content: flex-start;
139+
flex-wrap: wrap;
118140
}
119141

120142
.template-1265 .bears_pricing_tables .plan-price {
@@ -135,8 +157,10 @@
135157
border-bottom: none;
136158
}
137159

160+
.template-1265 .bears_pricing_tables .plan-select,
138161
.template-1265 .bears_pricing_tables .plan.featured .plan-select {
139162
border-top: 1px solid rgba(255, 255, 255, 0.1);
163+
background: #1E1E1E;
140164
}
141165

142166
.template-1265 .bears_pricing_tables .plan-select a:hover {
@@ -149,15 +173,10 @@
149173
background-color: #000 !important;
150174
}
151175

152-
.template-1265 .bears_pricing_tables .plan-select a,
153-
.template-1265 .bears_pricing_tables .plan-select a.btn {
154-
border-radius: 40px !important;
155-
}
156-
157176
.template-1265 .bears_pricing_tables .plan.featured .plan-select a,
158177
.template-1265 .bears_pricing_tables .plan.featured .plan-select a.btn {
159178
color: var(--bears-featured-button-text-color);
160-
border-radius: inherit;
179+
border-radius: var(--bears-button-border-radius);
161180
}
162181

163182
.template-1265 .bears_pricing_tables .plan.featured header {
@@ -173,7 +192,10 @@
173192

174193
.template-1265 .bears_pricing_tables [class*="price-left"],
175194
.template-1265 .bears_pricing_tables .plan header [class*="price-left"],
176-
.template-1265 .bears_pricing_tables .plan header div[class*="price-left"] {
195+
.template-1265 .bears_pricing_tables .plan header div[class*="price-left"],
196+
.template-1265 .bears_pricing_tables [class*="price-right"],
197+
.template-1265 .bears_pricing_tables .plan header [class*="price-right"],
198+
.template-1265 .bears_pricing_tables .plan header div[class*="price-right"] {
177199
color: var(--bears-button-background-color);
178200
float: none;
179201
}
@@ -221,3 +243,36 @@
221243
.template-1265 .bears_pricing_tables:hover .plan.featured .plan-features li:nth-child(even) {
222244
background-color: rgba(0, 0, 0, 0.9);
223245
}
246+
247+
/* Scale the price-left and price-right icons on hover */
248+
.template-1265 .bears_pricing_tables:hover .price-left,
249+
.template-1265 .bears_pricing_tables:hover .plan header .price-left,
250+
.template-1265 .bears_pricing_tables:hover .plan header div.price-left,
251+
.template-1265 .bears_pricing_tables:hover .price-right,
252+
.template-1265 .bears_pricing_tables:hover .plan header .price-right,
253+
.template-1265 .bears_pricing_tables:hover .plan header div.price-right {
254+
transform: scale(var(--bears-scale-amount));
255+
transition: transform var(--bears-transition-speed) ease;
256+
}
257+
258+
/* Also apply to the icons inside the price-left and price-right containers */
259+
.template-1265 .bears_pricing_tables:hover .price-left i,
260+
.template-1265 .bears_pricing_tables:hover .plan header .price-left i,
261+
.template-1265 .bears_pricing_tables:hover .plan header div.price-left i,
262+
.template-1265 .bears_pricing_tables:hover .price-right i,
263+
.template-1265 .bears_pricing_tables:hover .plan header .price-right i,
264+
.template-1265 .bears_pricing_tables:hover .plan header div.price-right i {
265+
transform: scale(var(--bears-scale-amount));
266+
transition: transform var(--bears-transition-speed) ease;
267+
}
268+
269+
/* Media queries for responsive behavior */
270+
@media (max-width: 768px) {
271+
.template-1265 .bears_pricing_tables .price {
272+
grid-template-columns: auto 1fr auto;
273+
}
274+
275+
.template-1265 .bears_pricing_tables .plan-title {
276+
font-size: 1.2rem;
277+
}
278+
}

0 commit comments

Comments
 (0)