1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
This commit is contained in:
muerwre 2019-07-26 17:10:04 +07:00
parent b245cd0640
commit 10a6548d39
5 changed files with 24 additions and 10 deletions

View file

@ -4,7 +4,7 @@
display: flex; display: flex;
flex: 0 0; flex: 0 0;
background: $cell_bg; background: $cell_bg;
border-radius: 4px; border-radius: $cell_radius;
position: relative; position: relative;
&:global(.is_hero) { &:global(.is_hero) {
@ -12,6 +12,7 @@
font-size: 48px; font-size: 48px;
} }
} }
@include outer_shadow(); @include outer_shadow();
} }

View file

@ -29,7 +29,7 @@ export const TestGrid = () => (
<Cell <Cell
width={Math.floor(Math.random() * 3)} width={Math.floor(Math.random() * 3)}
height={Math.floor(Math.random() * 3)} height={Math.floor(Math.random() * 3)}
title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell " title={`Cell ${el}`}
/> />
)) ))
} }

View file

@ -12,32 +12,43 @@
.group { .group {
width: 54px; width: 54px;
border-radius: 4px; border-radius: $panel_radius;
margin: ($gap / 2) 0; margin: ($gap / 2) 0;
background: #191919; background: #191919;
box-sizing: border-box; box-sizing: border-box;
box-shadow: #111111 0 0 0 1px; box-shadow: #222222 0 0 0 1px;
&:global(.logo) { &:global(.logo) {
color: white; color: white;
height: (54px * 1.5) + $gap / 2; height: (54px * 1.5) + $gap / 2;
//background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919;
background: white; background: white;
// #c1543d
background-size: 140px; background-size: 140px;
font-weight: 600; font-weight: 600;
font-family: Raleway;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding-top: 66px; padding-top: 66px;
box-shadow: inset #111111 0 -1px, inset #222222 0 1px; box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
} }
.btn {
border-radius: 0;
&:first-child {
border-top-left-radius: $panel_radius;
border-top-right-radius: $panel_radius;
}
&:last-child {
border-bottom-left-radius: $panel_radius;
border-bottom-right-radius: $panel_radius;
}
}
} }
.btn { .btn {
height: 54px; height: 54px;
box-shadow: inset #111111 0 -1px, inset #222222 0 1px; box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
border-radius: 4px; border-radius: $panel_radius;
} }
.flexy { .flexy {

View file

@ -1,6 +1,6 @@
.wrapper { .wrapper {
width: 100%; width: 100%;
padding: $gap $gap 0 74px; padding: $gap $gap $gap 74px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;

View file

@ -4,7 +4,9 @@ $cell: 256px;
$content_width: $cell * 4; $content_width: $cell * 4;
$gap: 10px; $gap: 10px;
$spc: $gap * 2; $spc: $gap * 2;
$panel_radius: 1px;
$cell_radius: 4px;
$panel_radius: 4px;
$grid_line: 4px; $grid_line: 4px;