mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
added styles for mobile-header
This commit is contained in:
@@ -3,7 +3,6 @@
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
|
||||
gap: 0px 0px;
|
||||
grid-template-areas:
|
||||
"header-mobile header-mobile header-mobile header-mobile"
|
||||
"main-mobile main-mobile main-mobile main-mobile"
|
||||
@@ -15,9 +14,9 @@
|
||||
|
||||
.header-mobile {
|
||||
grid-area: header-mobile;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
border-radius: 20px;
|
||||
background: #17181C;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.main-mobile {
|
||||
@@ -32,4 +31,41 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #73ce36;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.header-mobile__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-mobile__nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-mobile__logo {
|
||||
padding: 23px 0 11px 17px;
|
||||
}
|
||||
|
||||
.header-mobile__logo img {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.balance-mobile__card {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-balance h2 {
|
||||
border-radius: 7px;
|
||||
background: #22252F;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 0.813em;
|
||||
}
|
||||
|
||||
/* /Header */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 774 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
@@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<div class="content-grid__mobile-home">
|
||||
<header class="header-mobile">
|
||||
<h1>header</h1>
|
||||
<div class="header-mobile__content">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="main-mobile">
|
||||
<h1>main</h1>
|
||||
|
||||
Reference in New Issue
Block a user