Skip to content

Instantly share code, notes, and snippets.

@little-isaac

little-isaac/flits-order-tracking.scss

Last active February 5, 2019 11:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save little-isaac/df59ad5cf0f3240388fe242adeab071a to your computer and use it in GitHub Desktop.
Save little-isaac/df59ad5cf0f3240388fe242adeab071a to your computer and use it in GitHub Desktop.
Download ZIP
Shopify Scss upload using api .liquid file contains some of setting schema's values(ln no -> 48 to 52) . and only .scss file contains only scss code. other wise both are same.
Raw
flits-order-tracking.scss
@charset 'UTF-8';
$tracking_status: 'Ordered' 'InfoReceived' 'InTransit' 'OutForDelivery' 'Delivered' 'FailedAttempt' 'Exception' 'Expired' 'Pending';
$error_tracking_status: 'FailedAttempt' 'Exception' 'Expired' 'Pending';
$hide_when_error: 'OutForDelivery' 'Delivered';
@mixin flits_error_tracking($current_status,$current_li_status){
$is_error_status: false;
@each $current_error_stats in $error_tracking_status {
@if $current_error_stats == $current_status{
$is_error_status: true;
}
}
@if $is_error_status{
@each $current_hide_status in $hide_when_error {
@if $current_hide_status == $current_li_status{
display:none;
}
}
@each $current_show_status in $error_tracking_status {
@if $current_show_status == $current_li_status {
@if $current_li_status == $current_status{
display:table-cell;
&:nth-of-type(2n+1)
{
.track-status {
right: 100%;
left: inherit;
text-align: right;
padding-right: 10px;
padding-left: 0;
}
}
}
@else{
display:none;
}
}
}
}
@else{
@each $current_hide_status in $error_tracking_status {
@if $current_hide_status == $current_li_status{
display:none;
}
}
}
}
$active_color : red;
$completed_color : blue;
$remain_color : green;
$outer_circle_background_color : yellow;
$check_mark_color : pink;
ul.flits-order-track-ul {
display: table;
list-style-type: none;
margin: 0;
margin-top:30px;
padding: 0;
table-layout: fixed;
width: 100%;
@media(max-width:767px){
display: block;
width: 20px;
margin: 0px auto;
margin-top:20px;
margin-bottom:30px;
}
li{
display: table-cell;
text-align: center;
position:relative;
line-height: 3em;
@media(max-width:767px){
display: inline-block ;
vertical-align: top;
text-align: center;
line-height: 1;
min-height: 50px;
&:nth-of-type(2n+1)
{
.track-status {
right: 100%;
left: inherit;
text-align: right;
padding-right: 10px;
padding-left: 0;
}
}
}
.track-status{
display:inline-block;
@media(max-width:767px){
display: inline-block;
line-height: 2;
position: absolute;
left: 100%;
min-width: 200px;
text-align: left;
padding-left: 10px;
top: 0;
}
}
div.track-circle{
top: 0;
left: 50%;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
z-index: 1;
transform: translate(-50%,-50%);
@media(max-width:767px){
position: static;
display: inline-block;
position: relative;
z-index: 1;
transform: translateX(-50%);
}
.track-circle-inside{
top: 50%;
left: 50%;
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
transform: translate(-50%,-50%);
.check-mark{
display:none;
color: $check_mark_color;
position: absolute;
top: 50%;
left: 50%;
line-height: 0;
transform: translate(-50%,-50%);
}
}
}
&::before{
position:absolute;
content: " ";
width:50%;
height:2px;
left:0px;
@media(max-width:767px){
display:none;
}
}
&::after{
position: absolute;
content: " ";
width:50%;
height:2px;
right:0px;
top:0px;
@media(max-width:767px){
width: 2px;
height: 45px;
left: 50%;
top: 7px;
transform: translateX(-50%);
}
}
}
@each $current_status in $tracking_status {
$i: index($tracking_status, $current_status);
&[data-flits-active="#{$current_status}"]{
$is_active_found: false;
@each $current_status_li in $tracking_status {
$j: index($tracking_status,$current_status_li);
li{
@media(max-width:767px){}
&[data-flits-status="#{$current_status_li}"] {
@if "#{$current_status_li}" == "#{$current_status}" {
$is_active_found: true;
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $active_color;
.check-mark{
display:block;
}
}
}
color: $active_color;
&::before{
@media(max-width:767px){}
background: $active_color;
background: -moz-linear-gradient(left, $completed_color 0%, $active_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$active_color 50%);
background: linear-gradient(to right, $completed_color 0%,$active_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$active_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){
background: $active_color;
background: -moz-linear-gradient($active_color 50%, $remain_color 100%);
background: -webkit-linear-gradient($active_color 50%,$remain_color 100%);
background: linear-gradient($active_color 50%,$remain_color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$active_color}', endColorstr='#{$remain_color}');
}
background: $active_color;
background: -moz-linear-gradient(left, $active_color 50%, $remain_color 100%);
background: -webkit-linear-gradient(left, $active_color 50%,$remain_color 100%);
background: linear-gradient(to right, $active_color 50%,$remain_color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$active_color}', endColorstr='#{$remain_color}',GradientType=1 );
}
}
@else if $is_active_found {
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $remain_color;
}
}
color: $remain_color;
/* border-bottom: 4px solid silver; */
&::before{
@media(max-width:767px){}
background: $remain_color;
background: -moz-linear-gradient(left, $remain_color 0%, $remain_color 50%);
background: -webkit-linear-gradient(left, $remain_color 0%,$remain_color 50%);
background: linear-gradient(to right, $remain_color 0%,$remain_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{remain_color}', endColorstr='#{remain_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){}
background: $remain_color;
background: -moz-linear-gradient(left, $remain_color 0%, $remain_color 50%);
background: -webkit-linear-gradient(left, $remain_color 0%,$remain_color 50%);
background: linear-gradient(to right, $remain_color 0%,$remain_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$remain_color}', endColorstr='#{$remain_color}',GradientType=1 );
}
}
@else {
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $completed_color;
}
}
color: $completed_color;
&::before{
@media(max-width:767px){}
background: $completed_color;
background: -moz-linear-gradient(left, $completed_color 0%, $completed_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$completed_color 50%);
background: linear-gradient(to right, $completed_color 0%,$completed_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$completed_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){}
background: $completed_color;
background: -moz-linear-gradient(left, $completed_color 0%, $completed_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$completed_color 50%);
background: linear-gradient(to right, $completed_color 0%,$completed_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$completed_color}',GradientType=1 );
}
}
@include flits_error_tracking($current_status,$current_status_li);
}
}
}
}
}
}
.flits-order-track-content{
padding:0 10px 10px 10px;
}
.flits-order-tracking-error-msg{
padding:0 10px 10px 10px;
}
.flits-template{
display:none;
}
Raw
flits-order-tracking.scss.liquid
@charset 'UTF-8';
$tracking_status: 'Ordered' 'InfoReceived' 'InTransit' 'OutForDelivery' 'Delivered' 'FailedAttempt' 'Exception' 'Expired' 'Pending';
$error_tracking_status: 'FailedAttempt' 'Exception' 'Expired' 'Pending';
$hide_when_error: 'OutForDelivery' 'Delivered';
@mixin flits_error_tracking($current_status,$current_li_status){
$is_error_status: false;
@each $current_error_stats in $error_tracking_status {
@if $current_error_stats == $current_status{
$is_error_status: true;
}
}
@if $is_error_status{
@each $current_hide_status in $hide_when_error {
@if $current_hide_status == $current_li_status{
display:none;
}
}
@each $current_show_status in $error_tracking_status {
@if $current_show_status == $current_li_status {
@if $current_li_status == $current_status{
display:table-cell;
&:nth-of-type(2n+1)
{
.track-status {
right: 100%;
left: inherit;
text-align: right;
padding-right: 10px;
padding-left: 0;
}
}
}
@else{
display:none;
}
}
}
}
@else{
@each $current_hide_status in $error_tracking_status {
@if $current_hide_status == $current_li_status{
display:none;
}
}
}
}
$active_color : {{ settings.flits_tracking_active_color }};
$completed_color : {{ settings.flits_tracking_completed_color }};
$remain_color : {{ settings.flits_tracking_remain_color }};
$outer_circle_background_color : {{ settings.flits_outer_circle_background_color }};
$check_mark_color : {{ settings.flits_check_mark_color }};
ul.flits-order-track-ul {
display: table;
list-style-type: none;
margin: 0;
margin-top:30px;
padding: 0;
table-layout: fixed;
width: 100%;
@media(max-width:767px){
display: block;
width: 20px;
margin: 0px auto;
margin-top:20px;
margin-bottom:30px;
}
li{
display: table-cell;
text-align: center;
position:relative;
line-height: 3em;
@media(max-width:767px){
display: inline-block ;
vertical-align: top;
text-align: center;
line-height: 1;
min-height: 50px;
&:nth-of-type(2n+1)
{
.track-status {
right: 100%;
left: inherit;
text-align: right;
padding-right: 10px;
padding-left: 0;
}
}
}
.track-status{
display:inline-block;
@media(max-width:767px){
display: inline-block;
line-height: 2;
position: absolute;
left: 100%;
min-width: 200px;
text-align: left;
padding-left: 10px;
top: 0;
}
}
div.track-circle{
top: 0;
left: 50%;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
z-index: 1;
transform: translate(-50%,-50%);
@media(max-width:767px){
position: static;
display: inline-block;
position: relative;
z-index: 1;
transform: translateX(-50%);
}
.track-circle-inside{
top: 50%;
left: 50%;
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
transform: translate(-50%,-50%);
.check-mark{
display:none;
color: $check_mark_color;
position: absolute;
top: 50%;
left: 50%;
line-height: 0;
transform: translate(-50%,-50%);
}
}
}
&::before{
position:absolute;
content: " ";
width:50%;
height:2px;
left:0px;
@media(max-width:767px){
display:none;
}
}
&::after{
position: absolute;
content: " ";
width:50%;
height:2px;
right:0px;
top:0px;
@media(max-width:767px){
width: 2px;
height: 45px;
left: 50%;
top: 7px;
transform: translateX(-50%);
}
}
}
@each $current_status in $tracking_status {
$i: index($tracking_status, $current_status);
&[data-flits-active="#{$current_status}"]{
$is_active_found: false;
@each $current_status_li in $tracking_status {
$j: index($tracking_status,$current_status_li);
li{
@media(max-width:767px){}
&[data-flits-status="#{$current_status_li}"] {
@if "#{$current_status_li}" == "#{$current_status}" {
$is_active_found: true;
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $active_color;
.check-mark{
display:block;
}
}
}
color: $active_color;
&::before{
@media(max-width:767px){}
background: $active_color;
background: -moz-linear-gradient(left, $completed_color 0%, $active_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$active_color 50%);
background: linear-gradient(to right, $completed_color 0%,$active_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$active_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){
background: $active_color;
background: -moz-linear-gradient($active_color 50%, $remain_color 100%);
background: -webkit-linear-gradient($active_color 50%,$remain_color 100%);
background: linear-gradient($active_color 50%,$remain_color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$active_color}', endColorstr='#{$remain_color}');
}
background: $active_color;
background: -moz-linear-gradient(left, $active_color 50%, $remain_color 100%);
background: -webkit-linear-gradient(left, $active_color 50%,$remain_color 100%);
background: linear-gradient(to right, $active_color 50%,$remain_color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$active_color}', endColorstr='#{$remain_color}',GradientType=1 );
}
}
@else if $is_active_found {
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $remain_color;
}
}
color: $remain_color;
/* border-bottom: 4px solid silver; */
&::before{
@media(max-width:767px){}
background: $remain_color;
background: -moz-linear-gradient(left, $remain_color 0%, $remain_color 50%);
background: -webkit-linear-gradient(left, $remain_color 0%,$remain_color 50%);
background: linear-gradient(to right, $remain_color 0%,$remain_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{remain_color}', endColorstr='#{remain_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){}
background: $remain_color;
background: -moz-linear-gradient(left, $remain_color 0%, $remain_color 50%);
background: -webkit-linear-gradient(left, $remain_color 0%,$remain_color 50%);
background: linear-gradient(to right, $remain_color 0%,$remain_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$remain_color}', endColorstr='#{$remain_color}',GradientType=1 );
}
}
@else {
div.track-circle{
@media(max-width:767px){}
background: $outer_circle_background_color;
border: 2px solid $outer_circle_background_color;
.track-circle-inside{
background: $completed_color;
}
}
color: $completed_color;
&::before{
@media(max-width:767px){}
background: $completed_color;
background: -moz-linear-gradient(left, $completed_color 0%, $completed_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$completed_color 50%);
background: linear-gradient(to right, $completed_color 0%,$completed_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$completed_color}',GradientType=1 );
}
&::after{
@media(max-width:767px){}
background: $completed_color;
background: -moz-linear-gradient(left, $completed_color 0%, $completed_color 50%);
background: -webkit-linear-gradient(left, $completed_color 0%,$completed_color 50%);
background: linear-gradient(to right, $completed_color 0%,$completed_color 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$completed_color}', endColorstr='#{$completed_color}',GradientType=1 );
}
}
@include flits_error_tracking($current_status,$current_status_li);
}
}
}
}
}
}
.flits-order-track-content{
padding:0 10px 10px 10px;
}
.flits-order-tracking-error-msg{
padding:0 10px 10px 10px;
}
.flits-template{
display:none;
}
Raw
headers_with_charset.json
{
"http_status_code":"200",
"http_status_message":"OK",
"server":"nginx",
"date":"Fri, 25 Jan 2019 05:26:51 GMT",
"content-type":"application\/json; charset=utf-8",
"transfer-encoding":"chunked",
"connection":"keep-alive",
"vary":"Accept-Encoding",
"x-sorting-hat-podid":"99",
"x-sorting-hat-podid-cached":"0",
"x-sorting-hat-shopid":"16551247972",
"x-sorting-hat-privacylevel":"default",
"x-sorting-hat-featureset":"default",
"x-sorting-hat-section":"pod",
"x-sorting-hat-shopid-cached":"0",
"referrer-policy":"origin-when-cross-origin",
"x-frame-options":"DENY",
"x-shopid":"16551247972",
"x-shardid":"99",
"x-stats-userid":"0",
"x-stats-apiclientid":"1829805",
"x-stats-apipermissionid":"143834742884",
"http_x_shopify_shop_api_call_limit":"1\/40",
"x-shopify-shop-api-call-limit":"1\/40",
"location":"\/admin\/themes\/58051231844\/assets?asset%5Bkey%5D=assets%2Fflits-order-tracking.scss.liquid",
"strict-transport-security":"max-age=7889238",
"x-request-id":"1bfcf1ef-e14f-4457-8610-e547b956abc9",
"x-shopify-stage":"production",
"content-security-policy":"default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https:\/\/* shopify-pos:\/\/*; block-all-mixed-content; child-src 'self' https:\/\/* shopify-pos:\/\/*; connect-src 'self' wss:\/\/* https:\/\/*; frame-ancestors 'none'; img-src 'self' data: blob: https:; script-src https:\/\/cdn.shopify.com https:\/\/checkout.shopifycs.com https:\/\/js-agent.newrelic.com https:\/\/bam.nr-data.net https:\/\/dme0ih8comzn4.cloudfront.net https:\/\/api.stripe.com https:\/\/mpsnare.iesnare.com https:\/\/appcenter.intuit.com https:\/\/www.paypal.com https:\/\/maps.googleapis.com https:\/\/www.google-analytics.com https:\/\/v.shopify.com https:\/\/widget.intercom.io https:\/\/js.intercomcdn.com 'self' 'unsafe-inline' 'unsafe-eval'; upgrade-insecure-requests; report-uri \/csp-report?source%5Baction%5D=update&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=admin%2Fassets&source%5Bsection%5D=admin_api&source%5Buuid%5D=1bfcf1ef-e14f-4457-8610-e547b956abc9",
"x-content-type-options":"nosniff",
"x-download-options":"noopen",
"x-permitted-cross-domain-policies":"none",
"x-xss-protection":"1; mode=block; report=\/xss-report?source%5Baction%5D=update&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=admin%2Fassets&source%5Bsection%5D=admin_api&source%5Buuid%5D=1bfcf1ef-e14f-4457-8610-e547b956abc9",
"x-dc":"chi2,gcp-us-east1"
}
Raw
headers_without_charset.json
{
"http_status_code": "200",
"http_status_message": "OK",
"server": "nginx",
"date": "Tue, 05 Feb 2019 10:56:30 GMT",
"content-type": "application\/json; charset=utf-8",
"transfer-encoding": "chunked",
"connection": "keep-alive",
"vary": "Accept-Encoding",
"x-sorting-hat-podid": "99",
"x-sorting-hat-podid-cached": "1",
"x-sorting-hat-shopid": "16551247972",
"x-sorting-hat-privacylevel": "default",
"x-sorting-hat-featureset": "default",
"x-sorting-hat-section": "pod",
"x-sorting-hat-shopid-cached": "1",
"referrer-policy": "origin-when-cross-origin",
"x-frame-options": "DENY",
"x-shopid": "16551247972",
"x-shardid": "99",
"x-stats-userid": "0",
"x-stats-apiclientid": "1829805",
"x-stats-apipermissionid": "143834742884",
"http_x_shopify_shop_api_call_limit": "1\/40",
"x-shopify-shop-api-call-limit": "1\/40",
"location": "\/admin\/themes\/58051231844\/assets?asset%5Bkey%5D=assets%2Fflits-order-tracking.scss.liquid",
"strict-transport-security": "max-age=7889238",
"x-request-id": "d0f060de-2e78-4369-9440-b2a3573e12aa",
"x-shopify-stage": "production",
"content-security-policy": "default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https:\/\/* shopify-pos:\/\/*; block-all-mixed-content; child-src 'self' https:\/\/* shopify-pos:\/\/*; connect-src 'self' wss:\/\/* https:\/\/*; frame-ancestors 'none'; img-src 'self' data: blob: https:; script-src https:\/\/cdn.shopify.com https:\/\/checkout.shopifycs.com https:\/\/js-agent.newrelic.com https:\/\/bam.nr-data.net https:\/\/dme0ih8comzn4.cloudfront.net https:\/\/api.stripe.com https:\/\/mpsnare.iesnare.com https:\/\/appcenter.intuit.com https:\/\/www.paypal.com https:\/\/maps.googleapis.com https:\/\/www.google-analytics.com https:\/\/v.shopify.com https:\/\/widget.intercom.io https:\/\/js.intercomcdn.com 'self' 'unsafe-inline' 'unsafe-eval'; upgrade-insecure-requests; report-uri \/csp-report?source%5Baction%5D=update&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=admin%2Fassets&source%5Bsection%5D=admin_api&source%5Buuid%5D=d0f060de-2e78-4369-9440-b2a3573e12aa",
"x-content-type-options": "nosniff",
"x-download-options": "noopen",
"x-permitted-cross-domain-policies": "none",
"x-xss-protection": "1; mode=block; report=\/xss-report?source%5Baction%5D=update&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=admin%2Fassets&source%5Bsection%5D=admin_api&source%5Buuid%5D=d0f060de-2e78-4369-9440-b2a3573e12aa",
"x-dc": "chi2,gcp-us-central1"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment