404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal
This commit is contained in:
zach
@@ -19,7 +19,7 @@
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/nav';
|
||||
// @import 'bootstrap/scss/accordion';
|
||||
// @import 'bootstrap/scss/alert';
|
||||
@import 'bootstrap/scss/alert';
|
||||
// @import 'bootstrap/scss/badge';
|
||||
// @import 'bootstrap/scss/breadcrumb';
|
||||
// @import 'bootstrap/scss/button-group';
|
||||
@@ -39,7 +39,7 @@
|
||||
// @import 'bootstrap/scss/popover';
|
||||
// @import 'bootstrap/scss/progress';
|
||||
// @import 'bootstrap/scss/spinners';
|
||||
// @import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/tables';
|
||||
// @import 'bootstrap/scss/toasts';
|
||||
// @import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
|
||||
@@ -28,151 +28,133 @@
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Card
|
||||
// Cards & Modal
|
||||
// ----------------------
|
||||
|
||||
.tcg-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-xl {
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 90vw;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.card-modal {
|
||||
background-color: rgba(1, 11, 18, .8);
|
||||
cursor: default;
|
||||
background-color: rgba(1, 11, 18, 0.8);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
|
||||
color: rgba(0, 0, 0, .94);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
|
||||
border-color: rgba(0, 0, 0, .0);
|
||||
canvas {
|
||||
max-width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Navigation Tabs
|
||||
// ----------------------
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,67);
|
||||
transition: margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
||||
}
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.67);
|
||||
transition:
|
||||
margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.nav-link.nm, .nav-link.nm:hover, .nav-link.nm:focus {
|
||||
border-bottom: 3px solid rgba(156, 204, 102, 1);
|
||||
}
|
||||
.nav-link.nm:hover, .nav-link.nm:focus {
|
||||
background-color: rgba(156, 204, 102, .67);
|
||||
}
|
||||
.nav-link.nm.active {
|
||||
background-color: rgba(156, 204, 102, 1);
|
||||
border-bottom: 3px solid rgba(156, 204, 102, 1);
|
||||
}
|
||||
.nav-link.lp, .nav-link.lp:hover, .nav-link.lp:focus {
|
||||
border-bottom: 3px solid rgba(211, 225, 86, 1);
|
||||
}
|
||||
.nav-link.lp:hover, .nav-link.lp:focus {
|
||||
background-color: rgba(211, 225, 86, .67);
|
||||
}
|
||||
.nav-link.lp.active {
|
||||
background-color: rgba(211, 225, 86, 1);
|
||||
border-bottom: 3px solid rgba(211, 225, 86, 1);
|
||||
}
|
||||
.nav-link.mp, .nav-link.mp:hover, .nav-link.mp:focus {
|
||||
border-bottom: 3px solid rgba(255, 238, 87, 1);
|
||||
}
|
||||
.nav-link.mp:hover, .nav-link.mp:focus {
|
||||
background-color: rgba(255, 238, 87, .67);
|
||||
}
|
||||
.nav-link.mp.active {
|
||||
background-color: rgba(255, 238, 87, 1);
|
||||
border-bottom: 3px solid rgba(255, 238, 87, 1);
|
||||
}
|
||||
.nav-link.hp, .nav-link.hp:hover, .nav-link.hp:focus {
|
||||
border-bottom: 3px solid rgba(255, 201, 41, 1);
|
||||
}
|
||||
.nav-link.hp:hover, .nav-link.hp:focus {
|
||||
background-color: rgba(255, 201, 41, .67);
|
||||
}
|
||||
.nav-link.hp.active {
|
||||
background-color: rgba(255, 201, 41, 1);
|
||||
border-bottom: 3px solid rgba(255, 201, 41, 1);
|
||||
}
|
||||
.nav-link.dmg, .nav-link.dmg:hover, .nav-link.dmg:focus {
|
||||
border-bottom: 3px solid rgba(255, 167, 36, 1);
|
||||
}
|
||||
.nav-link.dmg:hover, .nav-link.dmg:focus {
|
||||
background-color: rgba(255, 167, 36, .67);
|
||||
}
|
||||
.nav-link.dmg.active {
|
||||
background-color: rgba(255, 167, 36, 1);
|
||||
border-bottom: 3px solid rgba(255, 167, 36, 1);
|
||||
}
|
||||
.nav-link.vendor, .nav-link.vendor:hover, .nav-link.vendor:focus {
|
||||
border-bottom: 3px solid hsl(262, 47%, 55%);
|
||||
}
|
||||
.nav-link.vendor:hover, .nav-link.vendor:focus {
|
||||
background-color: hsla(262, 47%, 55%, .67);
|
||||
}
|
||||
.nav-link.vendor.active {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
border-bottom: 3px solid hsl(262, 47%, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
.nav-tabs {
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: rgba(0, 0, 0, 0.94);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Tiered Nav-Link Colors
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
mp: rgba(255, 238, 87, 1),
|
||||
hp: rgba(255, 201, 41, 1),
|
||||
dmg: rgba(255, 167, 36, 1),
|
||||
vendor: hsl(262, 47%, 55%)
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
.nav-link.#{$name} {
|
||||
border-bottom: 3px solid $color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba($color, 0.67);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border-bottom-color: $color;
|
||||
@if $name == vendor {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Misc Components
|
||||
// ----------------------
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 23/32;
|
||||
aspect-ratio: 23 / 32;
|
||||
object-fit: cover;
|
||||
z-index: 998;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Icon sizes
|
||||
.small-icon svg {
|
||||
width: 100%;
|
||||
max-height: 16px;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.energy-icon svg {
|
||||
width:2.5rem;
|
||||
.energy-icon svg,
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
width: 2.5rem;
|
||||
margin-top: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.rarity-icon-large svg {
|
||||
width: 2.5rem;
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.energy-icon svg {
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.set-icon svg {
|
||||
width: 2.5rem;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
.shadow-filter {
|
||||
//filter: drop-shadow(0 30px 30px #333);
|
||||
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
||||
filter:
|
||||
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
@@ -193,7 +175,6 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Base label style
|
||||
.price-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
@@ -215,29 +196,24 @@
|
||||
@media (min-width: 1600px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Your palette tiers
|
||||
.price-label:nth-of-type(n + 2) {
|
||||
background-color: hsl(66, 70%, 61%);
|
||||
&:nth-of-type(n + 2) {
|
||||
background-color: hsl(66, 70%, 61%);
|
||||
}
|
||||
&:nth-of-type(n + 3) {
|
||||
background-color: hsl(54, 100%, 67%);
|
||||
}
|
||||
&:nth-of-type(n + 4) {
|
||||
background-color: hsl(45, 100%, 58%);
|
||||
}
|
||||
&:last-of-type {
|
||||
background-color: hsl(36, 100%, 57%);
|
||||
border-radius: 0.33rem;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label:nth-of-type(n + 3) {
|
||||
background-color: hsl(54, 100%, 67%);
|
||||
}
|
||||
|
||||
.price-label:nth-of-type(n + 4) {
|
||||
background-color: hsl(45, 100%, 58%);
|
||||
}
|
||||
|
||||
.price-label:last-of-type {
|
||||
background-color: hsl(36, 100%, 57%);
|
||||
border-radius: 0.33rem;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------
|
||||
// Search Elements
|
||||
// Search
|
||||
// ----------------------
|
||||
@media (max-width: 768px) {
|
||||
.search-box,
|
||||
|
||||
Reference in New Issue
Block a user