Skip to content
This repository was archived by the owner on Aug 22, 2025. It is now read-only.

Styles fixes #186

Open
IrynaVynnychenko wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Styles fixes #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5bc0a4b
add upd on main screen
IrynaVynnychenko Feb 21, 2022
257797c
add some upd
IrynaVynnychenko Feb 22, 2022
36fdefb
add some styles updates
IrynaVynnychenko Feb 22, 2022
7621a0a
add upd
IrynaVynnychenko Feb 23, 2022
61748f5
add changes
IrynaVynnychenko Feb 27, 2022
43191b3
add some upd
IrynaVynnychenko Mar 5, 2022
8873aed
add some upd
IrynaVynnychenko Mar 5, 2022
c11da9c
add some upd
IrynaVynnychenko Mar 5, 2022
c2ae3d4
upd
IrynaVynnychenko Mar 6, 2022
edf2c26
add styles changes
IrynaVynnychenko Mar 6, 2022
de70baa
scss to tailwind classes (refactor)
IrynaVynnychenko Mar 9, 2022
d174e8d
refactor css inside html
IrynaVynnychenko Mar 11, 2022
5c25f8b
Merge remote-tracking branch 'upstream/main' into styles-fixes
IrynaVynnychenko Mar 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions dapp/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,58 @@
.body2 {
@apply text-base;
}
.table-font {
@apply text-white;
}
[data-tooltip] {
@apply relative z-2 block;
}

[data-tooltip]:before,
[data-tooltip]:after {
@apply invisible opacity-0 pointer-events-none;
}

[data-tooltip]:before,
[data-tooltip]:after {
transition: 0.2s ease-out;
transform: translate(-50%, 5px);
}

[data-tooltip]:before {
@apply absolute bottom-full left-2/4 mb-5px p-7px w-full rounded-3px max-w-100 w-full min-w-32.5 bg-black bg-opacity-90 bg-dark-3 text-white text-center text-sm leading-tight break-normal break-words;
}

[data-tooltip]:before {
content: attr(data-tooltip);
transition: 0.2s ease-out;
}

[data-tooltip]:after {
@apply absolute bottom-full left-2/4 w-0 border-solid border-t-5px border-r-5px border-l-5px;
}

[data-tooltip]:after {
content: ' ';
font-size: 0;
line-height: 0;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: rgba(51, 51, 51, 0.9);
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
@apply visible opacity-100;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
transform: translate(-50%, 0);
}
[data-tooltip='false']:hover:before,
[data-tooltip='false']:hover:after {
@apply opacity-0 invisible;
}
</style>

<script lang="ts">
Expand Down
67 changes: 0 additions & 67 deletions dapp/src/components/buttons/Tooltip.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,3 @@
<style>
[data-tooltip] {
position: relative;
z-index: 2;
display: block;
}

[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-out;
transform: translate(-50%, 5px);
}

[data-tooltip]:before {
position: absolute;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
padding: 7px;
width: 100%;
min-width: 130px;
max-width: 400px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
transition: 0.2s ease-out;
word-break: normal;
overflow-wrap: break-word;
}

[data-tooltip]:after {
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: ' ';
font-size: 0;
line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
[data-tooltip='false']:hover:before,
[data-tooltip='false']:hover:after {
visibility: hidden;
opacity: 0;
}
</style>

<script lang="ts">
export let tooltip: string = '';
export { clazz as class };
Expand Down
65 changes: 0 additions & 65 deletions dapp/src/components/claims/ClaimIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,3 @@
<style>
[data-tooltip] {
position: relative;
z-index: 2;
display: block;
}

[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-out;
transform: translate(-50%, 5px);
}

[data-tooltip]:before {
position: absolute;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
padding: 7px;
width: 100%;
min-width: 130px;
max-width: 400px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
transition: 0.2s ease-out;
}

[data-tooltip]:after {
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: ' ';
font-size: 0;
line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
[data-tooltip='false']:hover:before,
[data-tooltip='false']:hover:after {
visibility: hidden;
opacity: 0;
}
</style>

<script lang="ts">
import { claimToOutlink } from 'src/helpers';
import { selectIconCopyText } from 'src/components/page/view/publicProfileViewHelper';
Expand Down
6 changes: 6 additions & 0 deletions dapp/src/components/form/Input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,10 @@
#enter-twitter-handle {
@apply pl-7;
}
.state-container {
@apply bg-gray-1;
}
.state-container-border {
@apply border-1.5px border-solid border-gray-1;
}
}
11 changes: 1 addition & 10 deletions dapp/src/components/form/VerificationStep.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
<style>
.state-container {
background-color: rgb(224, 224, 224);
}

.state-container-border {
border: 1.5px solid rgb(224, 224, 224);
}
</style>

<script lang="ts">
import './Input.scss';
import { CheckIcon, SpinnerIcon, ErrorIcon } from 'components';
export let step: number;
export let currentStep: number;
Expand Down
8 changes: 8 additions & 0 deletions dapp/src/components/modals/FileModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@layer components {
.bg {
@apply absolute w-full h-full top-0 left-0 bg-opacity-50 bg-dark-2;
}
.modal-container {
@apply bg-white max-h-80vh overflow-auto mx-4 py-10 px-5;
}
}
21 changes: 1 addition & 20 deletions dapp/src/components/modals/FileModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,5 @@
<style>
.bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(5, 5, 5, 0.5);
}

.modal-container {
background-color: white;
max-height: 80vh;
overflow: auto;
margin-left: 16px;
margin-right: 16px;
padding: 40px 20px;
}
</style>

<script lang="ts">
import './FileModal.scss';
import {
CloseIcon
} from 'components/icons';
Expand Down
Loading