Skip to content

Commit

Permalink
ref: Major refactor Tune into Snapshot
Browse files Browse the repository at this point in the history
  • Loading branch information
samuveth committed Nov 20, 2023
1 parent ef6e40d commit 839d617
Show file tree
Hide file tree
Showing 74 changed files with 2,677 additions and 208 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"@snapshot-labs/lock": "^0.2.0",
"@snapshot-labs/pineapple": "^1.1.0",
"@snapshot-labs/snapshot.js": "^0.8.3",
"@snapshot-labs/tune": "^0.1.34",
"@vue/apollo-composable": "4.0.0-beta.11",
"@vueuse/core": "^10.6.1",
"@vueuse/head": "^2.0.0",
Expand All @@ -52,6 +51,7 @@
"js-sha256": "^0.10.1",
"jsonexport": "^3.2.0",
"lodash": "^4.17.21",
"minisearch": "^6.2.0",
"mixpanel-browser": "^2.48.1",
"remarkable": "^2.0.1",
"remove-markdown": "^0.5.0",
Expand Down
136 changes: 6 additions & 130 deletions src/style.scss → src/assets/css/main.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@import './assets/fonts/iconfont.css';
@import '../fonts/iconfont.css';
@import './tippy.scss';
@import './tune.scss';

@tailwind base;
@tailwind components;
Expand Down Expand Up @@ -33,21 +35,21 @@
@layer base {
@font-face {
font-family: 'Calibre';
src: url('./assets/fonts/Calibre-Medium-Custom.woff2') format('woff2');
src: url('../fonts/Calibre-Medium-Custom.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Calibre';
src: url('./assets/fonts/Calibre-Semibold-Custom.woff2') format('woff2');
src: url('../fonts/Calibre-Semibold-Custom.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'SpaceMono';
src: url('./assets/fonts/space-mono-v11-latin-700.woff2') format('woff2');
src: url('../fonts/space-mono-v11-latin-700.woff2') format('woff2');
}

html {
Expand Down Expand Up @@ -115,44 +117,6 @@
}
}

// Tune component styles

.tune-label {
@apply font-sans;
}

.tune-sublabel {
@apply font-sans;
}

.tune-button {
@apply rounded-full;
}

.tune-input {
@apply rounded-full;
}

.tune-textarea {
@apply rounded-3xl px-3;
}

.tune-listbox-button {
@apply rounded-full;
}

.tune-button-select {
@apply rounded-full;
}

.tune-input-duration {
@apply rounded-full;
}

.tune-error-text {
@apply font-sans;
}

// Fade transition for Vue's transition and transition-group
.fade-enter-active,
.fade-leave-active {
Expand Down Expand Up @@ -219,94 +183,6 @@ input[type='number'] {
-moz-appearance: textfield;
}

// V-Tippy tooltip package styling - could be moved somewhere else?
.tippy-box[data-animation='fade'][data-state='hidden'] {
opacity: 0;
}
[data-tippy-root] {
max-width: calc(100vw - 10px);
}
.tippy-box {
position: relative;
background-color: var(--text-color);
color: var(--header-bg);
border-radius: 7px;
font-size: 16px;
line-height: 1.4;
outline: 0;
transition-property: transform, visibility, opacity;
padding: 2px 4px;
text-align: center;
font-weight: 500;
}
.tippy-box[data-placement^='top'] > .tippy-arrow {
bottom: 0;
}
.tippy-box[data-placement^='top'] > .tippy-arrow:before {
bottom: -7px;
left: 0;
border-width: 8px 8px 0;
border-top-color: var(--text-color);
transform-origin: center top;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow {
top: 0;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
top: -7px;
left: 0;
border-width: 0 8px 8px;
border-bottom-color: var(--text-color);
transform-origin: center bottom;
}
.tippy-box[data-placement^='left'] > .tippy-arrow {
right: 0;
}
.tippy-box[data-placement^='left'] > .tippy-arrow:before {
border-width: 8px 0 8px 8px;
border-left-color: var(--text-color);
right: -7px;
transform-origin: center left;
}
.tippy-box[data-placement^='right'] > .tippy-arrow {
left: 0;
}
.tippy-box[data-placement^='right'] > .tippy-arrow:before {
left: -7px;
border-width: 8px 8px 8px 0;
border-right-color: var(--text-color);
transform-origin: center right;
}
.tippy-box[data-inertia][data-state='visible'] {
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
.tippy-arrow {
width: 16px;
height: 16px;
color: #333;
}
.tippy-arrow:before {
content: '';
position: absolute;
border-color: transparent;
border-style: solid;
}
.tippy-content {
position: relative;
padding: 5px 9px;
z-index: 1;
overflow-wrap: break-word;
}
.tippy-box[data-theme~='urlified'] {
max-width: 200px;
white-space: pre-wrap;
color: var(--header-bg);

a {
color: var(--header-bg);
}
}

.lazy-loading {
@apply animate-pulse-fast bg-skin-border;
}
Expand Down
87 changes: 87 additions & 0 deletions src/assets/css/tippy.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// V-Tippy tooltip package styling - could be moved somewhere else?
.tippy-box[data-animation='fade'][data-state='hidden'] {
opacity: 0;
}
[data-tippy-root] {
max-width: calc(100vw - 10px);
}
.tippy-box {
position: relative;
background-color: var(--text-color);
color: var(--header-bg);
border-radius: 7px;
font-size: 16px;
line-height: 1.4;
outline: 0;
transition-property: transform, visibility, opacity;
padding: 2px 4px;
text-align: center;
font-weight: 500;
}
.tippy-box[data-placement^='top'] > .tippy-arrow {
bottom: 0;
}
.tippy-box[data-placement^='top'] > .tippy-arrow:before {
bottom: -7px;
left: 0;
border-width: 8px 8px 0;
border-top-color: var(--text-color);
transform-origin: center top;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow {
top: 0;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
top: -7px;
left: 0;
border-width: 0 8px 8px;
border-bottom-color: var(--text-color);
transform-origin: center bottom;
}
.tippy-box[data-placement^='left'] > .tippy-arrow {
right: 0;
}
.tippy-box[data-placement^='left'] > .tippy-arrow:before {
border-width: 8px 0 8px 8px;
border-left-color: var(--text-color);
right: -7px;
transform-origin: center left;
}
.tippy-box[data-placement^='right'] > .tippy-arrow {
left: 0;
}
.tippy-box[data-placement^='right'] > .tippy-arrow:before {
left: -7px;
border-width: 8px 8px 8px 0;
border-right-color: var(--text-color);
transform-origin: center right;
}
.tippy-box[data-inertia][data-state='visible'] {
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
.tippy-arrow {
width: 16px;
height: 16px;
color: #333;
}
.tippy-arrow:before {
content: '';
position: absolute;
border-color: transparent;
border-style: solid;
}
.tippy-content {
position: relative;
padding: 5px 9px;
z-index: 1;
overflow-wrap: break-word;
}
.tippy-box[data-theme~='urlified'] {
max-width: 200px;
white-space: pre-wrap;
color: var(--header-bg);

a {
color: var(--header-bg);
}
}
Loading

0 comments on commit 839d617

Please sign in to comment.