Created
March 21, 2023 03:44
-
-
Save claytonzaugg/71b3d8844cf959dc96a2a39e78072be8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div.item-tile { | |
position: relative; | |
display: inline-block; | |
width: 100%; | |
max-width: 200px; | |
height: 210px; | |
margin: 7px; | |
border-radius: 4px; | |
} | |
/* entire container, keeps perspective */ | |
.item-tile .card-container { | |
-webkit-perspective: 800px; | |
-moz-perspective: 800px; | |
-o-perspective: 800px; | |
perspective: 800px; | |
} | |
/* flip the pane when hovered */ | |
.item-tile .card-container:not(.manual-flip):hover .card, | |
.item-tile .card-container.hover.manual-flip .card { | |
-webkit-transform: rotateY( 180deg ); | |
-moz-transform: rotateY( 180deg ); | |
-o-transform: rotateY( 180deg ); | |
transform: rotateY( 180deg ); | |
} | |
.item-tile .card-container.static:hover .card, | |
.item-tile .card-container.static.hover .card { | |
-webkit-transform: none; | |
-moz-transform: none; | |
-o-transform: none; | |
transform: none; | |
} | |
/* flip speed goes here */ | |
.item-tile .card { | |
position: relative; | |
-webkit-transition: -webkit-transform 0.5s; | |
-moz-transition: -moz-transform 0.5s; | |
-o-transition: -o-transform 0.5s; | |
transition: transform 0.5s; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
/* hide back of pane during swap */ | |
.item-tile .front, | |
.item-tile .back { | |
position: absolute; | |
top: 0; | |
left: 0; | |
background-color: #FFF; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
-o-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
/* front pane, placed above back */ | |
.item-tile .front { | |
z-index: 2; | |
} | |
/* back, initially hidden pane */ | |
.item-tile .back { | |
z-index: 3; | |
-webkit-transform: rotateY( 180deg ); | |
-moz-transform: rotateY( 180deg ); | |
-o-transform: rotateY( 180deg ); | |
transform: rotateY( 180deg ); | |
} | |
.back-enhance { | |
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
} | |
.item-tile .card { | |
color: #444; | |
border-radius: 4px; | |
background: none repeat scroll 0 0 #FFF; | |
} | |
.item-tile .card-container, | |
.item-tile .front, | |
.item-tile .back { | |
width: 100%; | |
height: 210px; | |
border-radius: 4px; | |
} | |
.item-tile .back { | |
text-align: center; | |
color: #E5E5E5; | |
background: #696974; | |
font-weight: bold; | |
} | |
.item-tile .back .top { | |
overflow: hidden; | |
height: 60px; | |
padding: 0 15px; | |
text-align: left; | |
line-height: 60px; | |
} | |
.item-tile .back .top .left { | |
float: left; | |
width: 60%; | |
text-align: left; | |
} | |
.item-tile .back .top .right { | |
float: right; | |
width: 40%; | |
text-align: center; | |
} | |
.item-tile .back .name-and-status, | |
.item-tile .back .change-on-hand-by { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.item-tile .back .change-on-hand-by { | |
font-size: 26px; | |
} | |
.item-tile .back .item-name, | |
.item-tile .back .desired-stock { | |
text-align: left; | |
color: #F5F5F5; | |
font-size: 12px; | |
line-height: 13px; | |
} | |
.item-tile .back .middle { | |
height: 100px; | |
border: 5px solid #696974; | |
border-top: 0; | |
border-bottom: 0; | |
background: #E9F9F8; | |
} | |
.item-tile .back .bottom { | |
padding: 0 5px; | |
text-align: center; | |
line-height: 50px; | |
} | |
.item-tile .back ul { | |
display: inline-block; | |
} | |
.item-tile .back .quick-change { | |
float: left; | |
width: 50%; | |
cursor: pointer; | |
color: #696974; | |
border: 1px solid #696974; | |
line-height: 48px; | |
} | |
.item-tile .back .change-by { | |
pointer-events: none; | |
} | |
.item-tile .back .bottom .right, | |
.item-tile .back .bottom .left { | |
width: 50%; | |
cursor: pointer; | |
text-align: center; | |
font-size: 26px; | |
} | |
.item-tile .back .bottom .left { | |
float: left; | |
color: #FDAB90; | |
} | |
.item-tile .back .bottom .right { | |
float: right; | |
color: #70D8CE; | |
} | |
.item-tile .back .material-switch { | |
display: inline-block; | |
width: 70px; | |
transform: translateY(50%); | |
text-align: left; | |
line-height: 18px; | |
} | |
.item-tile .back .material-switch h6 { | |
margin-bottom: 10px; | |
color: #777; | |
} | |
.item-tile .tile-menu { | |
position: absolute; | |
z-index: 20; | |
right: 10px; | |
bottom: 25px; | |
overflow: hidden; | |
width: 50px; | |
height: 50px; | |
cursor: pointer; | |
transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1); | |
text-align: center; | |
opacity: 0; | |
border-radius: 50%; | |
background: #FFF; | |
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
} | |
.item-tile .tile-menu span { | |
vertical-align: middle; | |
color: #AAA; | |
font-size: 26px; | |
line-height: 50px; | |
} | |
.item-tile:hover .tile-menu { | |
opacity: 0.55; | |
} | |
.item-tile:hover .tile-menu:hover { | |
opacity: 1; | |
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
} | |
.item-tile .back .fa-copy, | |
.item-tile .back .fa-archive, | |
.item-tile .back .fa-amazon, | |
.item-tile .back .fa-barcode { | |
float: left; | |
width: 25%; | |
cursor: pointer; | |
transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1); | |
vertical-align: middle; | |
opacity: 0.7; | |
color: #FFF; | |
font-size: 20px; | |
line-height: 50px; | |
} | |
.item-tile .back .fa-copy:hover, | |
.item-tile .back .fa-archive:hover, | |
.item-tile .back .fa-amazon:hover, | |
.item-tile .back .fa-barcode:hover, | |
.item-tile .back .fa-reply:hover { | |
opacity: 1; | |
background: none; | |
box-shadow: none; | |
} | |
.item-tile .back .fa-reply { | |
position: absolute; | |
top: -5px; | |
right: -2px; | |
padding: 10px; | |
cursor: pointer; | |
transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1); | |
vertical-align: middle; | |
opacity: 0.7; | |
color: #FFF; | |
font-size: 16px; | |
line-height: 1; | |
} | |
.item-tile .click-to-select, | |
.item-tile .mobile-select, | |
.item-tile .audit-mode-tile { | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.item-tile .mobile-select { | |
height: 125px; | |
} | |
.item-tile .tile-title { | |
position: relative; | |
width: 100%; | |
height: 46px; | |
padding: 0 10px; | |
color: #FFF; | |
border-bottom: 1px solid #D2D2D2; | |
border-radius: 0; | |
background-color: #FFF; | |
line-height: 1.42857143; | |
} | |
.item-tile .item-type-icon { | |
position: absolute; | |
z-index: 1; | |
top: 31px; | |
left: 0; | |
width: 70px; | |
padding-left: 5px; | |
transform: translateY(-50%); | |
color: #FFF; | |
font-family: 'font-light'; | |
font-size: 50px; | |
} | |
.item-tile .inventory-status-icon { | |
width: 108%; | |
margin-left: -5px; | |
} | |
.item-tile .item-name, | |
.item-tile .location { | |
display: block; | |
overflow: hidden; | |
max-width: 100%; | |
margin: 0; | |
text-align: center; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
color: #000; | |
font-size: 16px; | |
line-height: 38px; | |
} | |
.item-tile .location { | |
margin-top: -8px; | |
color: #444; | |
font-size: 10px; | |
line-height: 10px; | |
} | |
.item-tile .item-location-adjustments { | |
padding-top: 4px; | |
} | |
.item-tile .inventory-status-negative { | |
-webkit-transition: background-color 500ms linear; | |
-moz-transition: background-color 500ms linear; | |
-ms-transition: background-color 500ms linear; | |
-o-transition: background-color 500ms linear; | |
transition: background-color 500ms linear; | |
background-color: #D65A49; | |
stroke: #D65A49; | |
} | |
.item-tile .inventory-status-negative:hover { | |
background-color: #8E2F22; | |
} | |
.item-tile .inventory-status-low { | |
-webkit-transition: background-color 500ms linear; | |
-moz-transition: background-color 500ms linear; | |
-ms-transition: background-color 500ms linear; | |
-o-transition: background-color 500ms linear; | |
transition: background-color 500ms linear; | |
background-color: #FAAF40; | |
stroke: #FAAF40; | |
} | |
.item-tile .inventory-status-low:hover { | |
background-color: #DE9A34; | |
} | |
.item-tile .inventory-status-okay { | |
-webkit-transition: background-color 500ms linear; | |
-moz-transition: background-color 500ms linear; | |
-ms-transition: background-color 500ms linear; | |
-o-transition: background-color 500ms linear; | |
transition: background-color 500ms linear; | |
background-color: #26CCBF; | |
stroke: #26CCBF; | |
} | |
.item-tile .inventory-status-okay:hover { | |
background-color: #1FAE9F; | |
} | |
.item-tile .inventory-status-negative-text { | |
color: #D65A49; | |
} | |
.item-tile .inventory-status-low-text { | |
color: #FAAF40; | |
} | |
.item-tile .inventory-status-okay-text { | |
color: #26CCBF; | |
} | |
.item-tile .inventory-status-container { | |
position: relative; | |
overflow: hidden; | |
width: 100%; | |
height: auto; | |
padding: 10px 0; | |
text-align: center; | |
background: #FFF; | |
} | |
.item-tile .inventory-status-container .status-message, | |
.item-tile .inventory-status-container .on-hand-total, | |
.item-tile .inventory-status-container .inventory-status-text { | |
position: absolute; | |
right: 0; | |
left: 0; | |
margin: 0 auto; | |
} | |
.item-tile .inventory-status-container .status-message { | |
padding: 5px; | |
} | |
.item-tile .inventory-status-text { | |
bottom: 35px; | |
color: #2B2C2D; | |
font-size: 12px; | |
} | |
.item-tile .on-hand-total { | |
top: 33%; | |
letter-spacing: -1px; | |
color: #444; | |
font-family: 'font-block-demi-bold', Impact, Charcoal, sans-serif; | |
font-size: 26px; | |
line-height: 35px; | |
} | |
.item-tile .inventory-status-container .status-message.inventory-status-okay { | |
display: none; | |
} | |
.item-tile .fa.fa-angle-down, | |
.item-tile .fa.fa-angle-right { | |
display: none; | |
} | |
.item-tile .item-action-icon { | |
width: 55px; | |
margin-left: -12px; | |
padding: 7px 5px 5px 5px; | |
} | |
.item-tile .item-action-icon:hover { | |
cursor: pointer; | |
opacity: 0.8; | |
filter: alpha(opacity=80); | |
} | |
.item-tile .add-to-cart, | |
.item-tile .proceed-to-cart, | |
.item-tile .proceed-to-checkout, | |
.item-tile .proceed-to-checkout:hover, | |
.item-page .add-to-cart, | |
.item-page .proceed-to-cart, | |
.item-page .proceed-to-checkout, | |
.item-page .proceed-to-checkout:hover { | |
cursor: pointer; | |
text-decoration: none; | |
color: #FFF; | |
} | |
.item-tile .checkout-cart { | |
max-width: 30px; | |
margin-right: 5px; | |
} | |
.item-tile i.fa.fa-shopping-cart { | |
padding-right: 5px; | |
color: #FFF; | |
} | |
.item-tile .circle-container { | |
position: absolute; | |
top: 50%; | |
right: 0; | |
left: 0; | |
width: 200px; | |
height: 200px; | |
margin: 0 auto; | |
transform: translateY(-50%); | |
} | |
.stock-amount-container { | |
float: right; | |
width: 33%; | |
} | |
.stock-percentage-container { | |
float: left; | |
width: 33%; | |
} | |
.stock-percentage { | |
font-size: 30px; | |
} | |
img.amazon-icon-image { | |
width: 100%; | |
} | |
span.onHandText { | |
font-size: 25px; | |
} | |
.stock-amount { | |
font-weight: bold; | |
} | |
.add-to-cart, | |
.proceed-to-cart { | |
display: none; | |
} | |
.add-to-cart, | |
.action-text-span { | |
text-align: center; | |
text-transform: uppercase; | |
color: #FFF; | |
font-size: 16px; | |
} | |
.item-tile .order-item { | |
visibility: hidden; | |
opacity: 0; | |
color: #26CCBF; | |
} | |
.item-page .item-action-text, | |
.item-tile .item-action-text { | |
display: block; | |
overflow: hidden; | |
box-sizing: border-box; | |
width: 100%; | |
max-width: 180px; | |
height: 28px; | |
margin: 0 auto; | |
margin-bottom: 10px; | |
padding: 0; | |
cursor: pointer; | |
text-align: center; | |
text-transform: uppercase; | |
color: #FFF; | |
border-radius: 4px; | |
font-size: 14px; | |
line-height: 28px; | |
} | |
.item-tile .donut-charts { | |
position: absolute; | |
margin-left: -106px; | |
} | |
.mobile-arrow-container { | |
display: none; | |
} | |
/********************** | |
ADD TO CART | |
**********************/ | |
.item-tile .added-to-cart, | |
.item-tile .proceed-to-checkout, | |
.item-page .added-to-cart, | |
.item-page .proceed-to-checkout { | |
-webkit-transition: background-color 500ms linear; | |
-moz-transition: background-color 500ms linear; | |
-ms-transition: background-color 500ms linear; | |
-o-transition: background-color 500ms linear; | |
transition: background-color 500ms linear; | |
background-color: #000 !important; | |
} | |
.item-tile .mobile-quick-edit, | |
.item-tile .audit-quick-edit { | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
display: none; | |
width: 140px; | |
height: 130px; | |
margin: 0 auto; | |
background: #444; | |
line-height: 130px; | |
} | |
.item-tile .mobile-quick-edit .mobile-on-hand-total, | |
.item-tile .audit-quick-edit .audit-on-hand-total { | |
position: absolute; | |
top: 20px; | |
right: 0; | |
left: 0; | |
color: #FFF; | |
font-size: 12px; | |
line-height: 12px; | |
} | |
.item-tile .mobile-quick-edit .mobile-add-to-total, | |
.item-tile .audit-quick-edit .audit-add-to-total { | |
position: absolute; | |
top: 50px; | |
left: 12px; | |
color: #FFF; | |
font-size: 20px; | |
font-weight: bold; | |
line-height: 20px; | |
} | |
.item-tile .mobile-quick-edit .mobile-on-hand-total strong, | |
.item-tile .audit-quick-edit .audit-on-hand-total strong { | |
margin-left: 3px; | |
color: #FFF; | |
} | |
.item-tile .mobile-quick-edit .mobile-on-hand-input, | |
.item-tile .audit-quick-edit .audit-on-hand-input { | |
width: 70px; | |
margin-bottom: 10px; | |
margin-left: 48px; | |
text-align: center; | |
vertical-align: middle; | |
line-height: 22px; | |
} | |
.item-tile .mobile-quick-edit .mobile-on-hand-submit, | |
.item-tile .mobile-quick-edit .cancel, | |
.item-tile .audit-quick-edit .audit-on-hand-submit, | |
.item-tile .audit-quick-edit .cancel { | |
position: absolute; | |
bottom: 12px; | |
width: 55px; | |
min-width: 50px; | |
padding: 0; | |
border-radius: 0; | |
font-size: 12px; | |
line-height: 22px; | |
} | |
.item-tile .mobile-quick-edit .mobile-on-hand-submit, | |
.item-tile .audit-quick-edit .audit-on-hand-submit { | |
right: 12px; | |
} | |
.item-tile .mobile-quick-edit .cancel, | |
.item-tile .audit-quick-edit .cancel { | |
left: 12px; | |
} | |
.item-tile .audit-quick-edit { | |
width: 200px; | |
height: 165px; | |
} | |
.item-tile .audit-quick-edit .audit-on-hand-total { | |
position: initial; | |
top: initial; | |
right: initial; | |
left: initial; | |
display: block; | |
margin: 0 auto; | |
text-align: center; | |
color: #FFF; | |
font-size: 12px; | |
line-height: 12px; | |
} | |
.item-tile .audit-quick-edit .audit-add-to-total { | |
position: initial; | |
top: initial; | |
left: initial; | |
display: block; | |
margin: 0 auto; | |
text-align: center; | |
color: #FFF; | |
font-size: 20px; | |
font-weight: bold; | |
line-height: 20px; | |
} | |
.item-tile .audit-quick-edit .audit-on-hand-input { | |
display: block; | |
width: 100px; | |
margin: 0 auto; | |
text-align: center; | |
line-height: 22px; | |
} | |
.item-tile | |
img.cart-check { | |
width: 16px; | |
margin: -5px 4px 0 4px; | |
} | |
@media screen and (max-width: 1024px) { | |
.item-tile .tile-menu { | |
right: 10px; | |
bottom: 10px; | |
width: 36px; | |
height: 36px; | |
opacity: 0.2; | |
box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 20px rgba(0,0,0,0.23); | |
} | |
.item-tile .tile-menu span { | |
font-size: 22px; | |
line-height: 36px; | |
} | |
div.item-tile { | |
max-width: 140px; | |
height: 172px; | |
margin: 5px; | |
} | |
.item-tile .on-hand-total { | |
top: 26px; | |
font-size: 22px; | |
} | |
.item-tile .inventory-status-text { | |
bottom: 30px; | |
font-size: 10px; | |
} | |
.item-page .item-action-text, | |
.item-tile .item-action-text { | |
max-width: 120px; | |
} | |
.item-tile .item-location-adjustments { | |
padding-top: 1px; | |
} | |
.item-tile .tile-title { | |
height: 40px; | |
} | |
.ring-chart { | |
width: 50%; | |
height: 50%; | |
} | |
.item-tile .back .item-name { | |
display: none; | |
} | |
.item-tile .back .top { | |
height: 40px; | |
padding: 0 10px; | |
line-height: 40px; | |
} | |
.item-tile .back .top .left { | |
float: left; | |
width: 45%; | |
} | |
.item-tile .back .top .right { | |
float: left; | |
width: 45%; | |
font-size: 20px; | |
} | |
.item-tile .back .desired-stock span { | |
display: none; | |
} | |
.item-tile .mobile-select { | |
height: 125px; | |
} | |
.item-tile .card-container, | |
.item-tile .front, | |
.item-tile .back { | |
width: 100%; | |
height: 172px; | |
border-radius: 4px; | |
} | |
.item-tile .back .middle { | |
height: 82px; | |
} | |
.item-tile .back .quick-change { | |
line-height: 39px; | |
} | |
.item-tile .back .fa-copy, | |
.item-tile .back .fa-archive, | |
.item-tile .back .fa-amazon, | |
.item-tile .back .fa-barcode { | |
position: relative; | |
display: inline-block; | |
padding: 0; | |
font-size: 16px; | |
line-height: 50px; | |
} | |
.item-tile .back .fa-amazon { | |
font-weight: 400; | |
} | |
.item-tile .location { | |
margin-top: -10px; | |
} | |
.item-tile .back .change-on-hand-by { | |
font-size: 20px; | |
} | |
} | |
@media screen and (max-width: 480px) { | |
div.item-tile { | |
max-width: 43%; | |
} | |
.item-tile .inventory-status-container { | |
max-width: 140px; | |
margin: 0 auto; | |
} | |
} | |
@media screen and (max-width: 350px) { | |
div.item-tile { | |
max-width: 140px; | |
} | |
.item-tile .inventory-status-container { | |
max-width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment