fluencelabs/examples
1
0
Fork 0
mirror of https://github.com/fluencelabs/examples synced 2025-06-24 15:21:32 +00:00
Code Issues Projects Releases Wiki Activity

Better ui

Browse Source
This commit is contained in:
Pavel Murygin
2021-07-22 02:27:32 +03:00
parent 5a787dcf22
commit aa094a9f1d
9 changed files with 154 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
intro/4-ipfs-code-execution/web/src/App.scss
View File

@ -3,7 +3,7 @@ $color2: rgb(214, 214, 214);
$accent-color: rgb(225, 30, 90);
.logo {
height: 15vmin;
height: 10vmin;
pointer-events: none;
}
@ -16,7 +16,7 @@ $accent-color: rgb(225, 30, 90);
}
header {
margin-top: 10vmin;
margin-top: 3vmin;
}
header,
@ -44,23 +44,13 @@ li {
padding: 0;
}
.p {
width: 550px;
p {
margin: 0.5em;
text-align: left;
}
.btn-clipboard {
border: none;
background-color: transparent;
cursor: pointer;
&:hover,
&:focus {
color: $accent-color;
}
&:focus {
outline: none;
}
.row {
width: 100%;
}
.btn {
@ -88,27 +78,49 @@ li {
}
}
.btn-hello {
width: 200px;
.btn-right {
width: 250px;
display: inline;
float: right;
}
.btn-inline {
background-color: transparent;
margin: 5px;
display: inline;
border: none;
font-size: inherit;
font-family: inherit;
color: $accent-color;
outline: none;
&:hover,
&:focus {
outline: none;
text-decoration: underline;
cursor: pointer;
}
}
table {
text-align: right;
}
.label {
width: 240px;
width: 30%;
display: inline-block;
text-align: right;
margin-right: 5px;
}
.input {
width: 500px;
width: calc(70% - 15px);
height: 26px;
box-sizing: border-box;
margin: 5px;
padding: 0 5px;
border: 1px solid;
border-color: $color2;
@ -125,75 +137,15 @@ table {
}
}
.gg-clipboard {
.input-ro {
display: inline;
width: 500px;
height: 26px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
width: 18px;
height: 18px;
border: 2px solid;
border-radius: 2px;
}
.gg-clipboard::after,
.gg-clipboard::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 2px;
width: 10px;
left: 2px;
}
.gg-clipboard::before {
border: 2px solid;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
top: -2px;
height: 6px;
}
.gg-clipboard::after {
height: 2px;
background: currentColor;
box-shadow: 0 -4px 0 0;
bottom: 2px;
margin: 5px;
}
.gg-trash {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
width: 10px;
height: 12px;
border: 2px solid transparent;
box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
margin-top: 4px;
}
.gg-trash::after,
.gg-trash::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.gg-trash::after {
background: currentColor;
border-radius: 3px;
width: 16px;
height: 2px;
top: -4px;
left: -5px;
}
.gg-trash::before {
width: 10px;
height: 4px;
border: 2px solid;
border-bottom: transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
top: -7px;
left: -2px;
.article {
margin-bottom: 10px;
}