archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 13:15:24 +00:00
Code Issues Projects Releases Wiki Activity

added header styling

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-01 12:59:35 +01:00
parent 0cac64f05d
commit 47cf84bf0b
7 changed files with 140 additions and 7 deletions

2
.editorconfig
View file

@ -11,7 +11,7 @@ insert_final_newline = true
[Makefile]
indent_style = tab
[*.{js,yml,scss,json}]
[*.{js,yml,scss,json,eslintrc,stylelintrc}]
indent_size = 2
[*.md]

28
web-frontend/public/grid.html
View file

@ -148,7 +148,33 @@
</a>
</div>
</div>
<div class="layout-col-3">content</div>
<div class="layout-col-3">
<div class="layout-col-3-1 header">
<ul class="header-filter">
<li>
<a href="#">
<i class="header-filter-icon fas fa-th"></i>
Grid view name
</a>
</li>
</ul>
<ul class="header-info">
<li class="undo-redo">
<a href="#" class="active">
<i class="fas fa-undo"></i>
</a>
<a href="#">
<i class="fas fa-redo"></i>
</a>
</li>
<li>Webshop</li>
<li>Products</li>
</ul>
</div>
<div class="layout-col-3-2 content">
CONTENT !
</div>
</div>
</div>
</body>
</html>

2
web-frontend/src/scss/_vendors.scss
View file

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,400i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,400i,600,700,700i");
@import "~normalize.css/normalize.css";

12
web-frontend/src/scss/base/_helpers.scss
View file

@ -1,3 +1,9 @@
.clearfix::after {
clear: both;
content: '';
display: table;
}
.hidden {
display: none;
}
@ -11,11 +17,11 @@
transform: rotate(0deg);
}
68% {
transform: rotate(880deg);
40% {
transform: rotate(360deg);
}
100% {
transform: rotate(1080deg);
transform: rotate(720deg);
}
}

81
web-frontend/src/scss/components/_header.scss Normal file
View file

@ -0,0 +1,81 @@
.header {
display: flex;
justify-content: space-between;
background-color: $white;
border-bottom: 2px solid $color-neutral-200;
}
.undo-redo a {
@extend %first-last-no-margin;
display: inline-block;
font-size: 12px;
color: $color-neutral-300;
cursor: inherit;
margin: 0 2px;
&.active {
cursor: pointer;
color: $color-neutral-800;
&:hover {
color: $color-primary-500;
}
}
}
.header-filter {
@extend .clearfix;
list-style: none;
padding: 0;
margin: auto 0;
li {
@extend %first-last-no-margin;
float: left;
margin-left: 12px;
}
a {
display: block;
font-weight: 600;
color: $color-primary-900;
padding: 0 10px;
border-radius: 3px;
@include fixed-height(32px, 13px);
&:hover {
text-decoration: none;
background-color: $color-neutral-100;
}
}
.header-filter-icon {
color: $color-primary-500;
margin-right: 4px;
font-size: 14px;
}
}
.header-info {
@extend .clearfix;
list-style: none;
padding: 0;
margin: auto 0;
li {
float: left;
padding: 2px 12px;
border-right: 1px solid $color-neutral-200;
font-size: 14px;
font-weight: 600;
&:last-child {
margin-right: 0;
}
}
}

20
web-frontend/src/scss/components/_layout.scss
View file

@ -8,15 +8,16 @@
.layout-col-1 {
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 52px;
overflow-x: auto;
}
.layout-col-2 {
position: absolute;
z-index: 2;
left: 52px;
top: 0;
bottom: 0;
@ -26,9 +27,26 @@
.layout-col-3 {
position: absolute;
z-index: 1;
left: 278px;
top: 0;
bottom: 0;
right: 0;
}
.layout-col-3-1 {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 52px;
}
.layout-col-3-2 {
position: absolute;
left: 0;
top: 52px;
right: 0;
bottom: 0;
overflow-y: auto;
}

2
web-frontend/src/scss/default.scss
View file

@ -16,5 +16,7 @@
@import "components/menu";
@import "components/sidebar";
@import "components/tree";
@import "components/header";
@import "components/box_page";