mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
radius
This commit is contained in:
parent
b245cd0640
commit
10a6548d39
5 changed files with 24 additions and 10 deletions
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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}`}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue