yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor styles for header in mobile

Browse Source
This commit is contained in:
Kostya
2023-11-27 14:33:50 +03:00
parent 1a3312c809
commit 7d2852552b
2 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
View File

@@ -41,10 +41,6 @@
justify-content: space-between;
}
.header-mobile__nav {
display: flex;
}
.header-mobile__logo {
padding: 23px 0 11px 17px;
}
@@ -53,19 +49,43 @@
width: 170px;
}
.balance-mobile__card {
align-self: start;
.header-mobile__balance--content {
display: flex;
align-items: center;
}
.card-balance h2 {
.header-mobile__card {
border-radius: 7px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.card-display h2 {
display: flex;
text-align: center;
align-items: center;
font-size: 0.813em;
align-items: flex-end;
padding: 6px 15px 6px 5px;
}
.card-img img {
width: 100%;
height: 100%;
}
.card-text {
color: #FFF;
font-weight: 700;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 13px;
}
.btn-card img {
width: 40px;
height: 40px;
}
.btn-card__margin {
margin-left: -10px;
}
/* /Header */

13
luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
View File

@@ -1,3 +1,4 @@
<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
<template>
<div class="content-grid__mobile-home">
<header class="header-mobile">
@@ -5,10 +6,14 @@
<div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div>
<div class="header-mobile__nav">
<div class="balance-mobile__card card-balance">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
<div class="header-mobile__balance">
<div class="header-mobile__balance--content">
<div class="header-mobile__card card-display card-text card-img">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div>
<div class="header-mobile__btn--balance btn-card btn-card__margin">
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
</div>
</div>
</div>
</div>