Shopify Debut theme changed its old code on the latest version. They removed SCSS variable and change Javascript codes. Version 17.5.2 CSS code documentation are written below:
/* Whole */ .one-whole { width: 100%; }
/* Halves */ .one-half { width: 50%; }
/* Thirds */ .one-third { width: 33.33333%; }
.two-thirds { width: 66.66667%; }
/* Quarters */ .one-quarter { width: 25%; }
.two-quarters { width: 50%; }
.three-quarters { width: 75%; }
/* Fifths */ .one-fifth { width: 20%; }
.two-fifths { width: 40%; }
.three-fifths { width: 60%; }
.four-fifths { width: 80%; }
/* Sixths */ .one-sixth { width: 16.66667%; }
.two-sixths { width: 33.33333%; }
.three-sixths { width: 50%; }
.four-sixths { width: 66.66667%; }
.five-sixths { width: 83.33333%; }
/* Eighths */ .one-eighth { width: 12.5%; }
.two-eighths { width: 25%; }
.three-eighths { width: 37.5%; }
.four-eighths { width: 50%; }
.five-eighths { width: 62.5%; }
.six-eighths { width: 75%; }
.seven-eighths { width: 87.5%; }
/* Tenths */ .one-tenth { width: 10%; }
.two-tenths { width: 20%; }
.three-tenths { width: 30%; }
.four-tenths { width: 40%; }
.five-tenths { width: 50%; }
.six-tenths { width: 60%; }
.seven-tenths { width: 70%; }
.eight-tenths { width: 80%; }
.nine-tenths { width: 90%; }
/* Twelfths */ .one-twelfth { width: 8.33333%; }
.two-twelfths { width: 16.66667%; }
.three-twelfths { width: 25%; }
.four-twelfths { width: 33.33333%; }
.five-twelfths { width: 41.66667%; }
.six-twelfths { width: 50%; }
.seven-twelfths { width: 58.33333%; }
.eight-twelfths { width: 66.66667%; }
.nine-twelfths { width: 75%; }
.ten-twelfths { width: 83.33333%; }
.eleven-twelfths { width: 91.66667%; }
.show { display: block !important; }
.hide { display: none !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
/*================ Build Responsive Grid Classes ================*/ @media only screen and (max-width: 749px) { /* Whole */ .small--one-whole { width: 100%; } /* Halves */ .small--one-half { width: 50%; } /* Thirds */ .small--one-third { width: 33.33333%; } .small--two-thirds { width: 66.66667%; } /* Quarters */ .small--one-quarter { width: 25%; } .small--two-quarters { width: 50%; } .small--three-quarters { width: 75%; } /* Fifths */ .small--one-fifth { width: 20%; } .small--two-fifths { width: 40%; } .small--three-fifths { width: 60%; } .small--four-fifths { width: 80%; } /* Sixths */ .small--one-sixth { width: 16.66667%; } .small--two-sixths { width: 33.33333%; } .small--three-sixths { width: 50%; } .small--four-sixths { width: 66.66667%; } .small--five-sixths { width: 83.33333%; } /* Eighths */ .small--one-eighth { width: 12.5%; } .small--two-eighths { width: 25%; } .small--three-eighths { width: 37.5%; } .small--four-eighths { width: 50%; } .small--five-eighths { width: 62.5%; } .small--six-eighths { width: 75%; } .small--seven-eighths { width: 87.5%; } /* Tenths */ .small--one-tenth { width: 10%; } .small--two-tenths { width: 20%; } .small--three-tenths { width: 30%; } .small--four-tenths { width: 40%; } .small--five-tenths { width: 50%; } .small--six-tenths { width: 60%; } .small--seven-tenths { width: 70%; } .small--eight-tenths { width: 80%; } .small--nine-tenths { width: 90%; } /* Twelfths */ .small--one-twelfth { width: 8.33333%; } .small--two-twelfths { width: 16.66667%; } .small--three-twelfths { width: 25%; } .small--four-twelfths { width: 33.33333%; } .small--five-twelfths { width: 41.66667%; } .small--six-twelfths { width: 50%; } .small--seven-twelfths { width: 58.33333%; } .small--eight-twelfths { width: 66.66667%; } .small--nine-twelfths { width: 75%; } .small--ten-twelfths { width: 83.33333%; } .small--eleven-twelfths { width: 91.66667%; } .grid--uniform .small--one-half:nth-child(2n+1), .grid--uniform .small--one-third:nth-child(3n+1), .grid--uniform .small--one-quarter:nth-child(4n+1), .grid--uniform .small--one-fifth:nth-child(5n+1), .grid--uniform .small--one-sixth:nth-child(6n+1), .grid--uniform .small--two-sixths:nth-child(3n+1), .grid--uniform .small--three-sixths:nth-child(2n+1), .grid--uniform .small--one-eighth:nth-child(8n+1), .grid--uniform .small--two-eighths:nth-child(4n+1), .grid--uniform .small--four-eighths:nth-child(2n+1), .grid--uniform .small--five-tenths:nth-child(2n+1), .grid--uniform .small--one-twelfth:nth-child(12n+1), .grid--uniform .small--two-twelfths:nth-child(6n+1), .grid--uniform .small--three-twelfths:nth-child(4n+1), .grid--uniform .small--four-twelfths:nth-child(3n+1), .grid--uniform .small--six-twelfths:nth-child(2n+1) { clear: both; } .small--show { display: block !important; } .small--hide { display: none !important; } .small--text-left { text-align: left !important; } .small--text-right { text-align: right !important; } .small--text-center { text-align: center !important; } }
@media only screen and (min-width: 750px) { /* Whole */ .medium-up--one-whole { width: 100%; } /* Halves */ .medium-up--one-half { width: 50%; } /* Thirds */ .medium-up--one-third { width: 33.33333%; } .medium-up--two-thirds { width: 66.66667%; } /* Quarters */ .medium-up--one-quarter { width: 25%; } .medium-up--two-quarters { width: 50%; } .medium-up--three-quarters { width: 75%; } /* Fifths */ .medium-up--one-fifth { width: 20%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; } /* Sixths */ .medium-up--one-sixth { width: 16.66667%; } .medium-up--two-sixths { width: 33.33333%; } .medium-up--three-sixths { width: 50%; } .medium-up--four-sixths { width: 66.66667%; } .medium-up--five-sixths { width: 83.33333%; } /* Eighths */ .medium-up--one-eighth { width: 12.5%; } .medium-up--two-eighths { width: 25%; } .medium-up--three-eighths { width: 37.5%; } .medium-up--four-eighths { width: 50%; } .medium-up--five-eighths { width: 62.5%; } .medium-up--six-eighths { width: 75%; } .medium-up--seven-eighths { width: 87.5%; } /* Tenths */ .medium-up--one-tenth { width: 10%; } .medium-up--two-tenths { width: 20%; } .medium-up--three-tenths { width: 30%; } .medium-up--four-tenths { width: 40%; } .medium-up--five-tenths { width: 50%; } .medium-up--six-tenths { width: 60%; } .medium-up--seven-tenths { width: 70%; } .medium-up--eight-tenths { width: 80%; } .medium-up--nine-tenths { width: 90%; } /* Twelfths */ .medium-up--one-twelfth { width: 8.33333%; } .medium-up--two-twelfths { width: 16.66667%; } .medium-up--three-twelfths { width: 25%; } .medium-up--four-twelfths { width: 33.33333%; } .medium-up--five-twelfths { width: 41.66667%; } .medium-up--six-twelfths { width: 50%; } .medium-up--seven-twelfths { width: 58.33333%; } .medium-up--eight-twelfths { width: 66.66667%; } .medium-up--nine-twelfths { width: 75%; } .medium-up--ten-twelfths { width: 83.33333%; } .medium-up--eleven-twelfths { width: 91.66667%; } .grid--uniform .medium-up--one-half:nth-child(2n+1), .grid--uniform .medium-up--one-third:nth-child(3n+1), .grid--uniform .medium-up--one-quarter:nth-child(4n+1), .grid--uniform .medium-up--one-fifth:nth-child(5n+1), .grid--uniform .medium-up--one-sixth:nth-child(6n+1), .grid--uniform .medium-up--two-sixths:nth-child(3n+1), .grid--uniform .medium-up--three-sixths:nth-child(2n+1), .grid--uniform .medium-up--one-eighth:nth-child(8n+1), .grid--uniform .medium-up--two-eighths:nth-child(4n+1), .grid--uniform .medium-up--four-eighths:nth-child(2n+1), .grid--uniform .medium-up--five-tenths:nth-child(2n+1), .grid--uniform .medium-up--one-twelfth:nth-child(12n+1), .grid--uniform .medium-up--two-twelfths:nth-child(6n+1), .grid--uniform .medium-up--three-twelfths:nth-child(4n+1), .grid--uniform .medium-up--four-twelfths:nth-child(3n+1), .grid--uniform .medium-up--six-twelfths:nth-child(2n+1) { clear: both; } .medium-up--show { display: block !important; } .medium-up--hide { display: none !important; } .medium-up--text-left { text-align: left !important; } .medium-up--text-right { text-align: right !important; } .medium-up--text-center { text-align: center !important; } }
/*================ Build Grid Push Classes ================*/ @media only screen and (max-width: 749px) { /* Halves */ .small--push-one-half { left: 50%; } /* Thirds */ .small--push-one-third { left: 33.33333%; } .small--push-two-thirds { left: 66.66667%; } /* Quarters */ .small--push-one-quarter { left: 25%; } .small--push-two-quarters { left: 50%; } .small--push-three-quarters { left: 75%; } /* Fifths */ .small--push-one-fifth { left: 20%; } .small--push-two-fifths { left: 40%; } .small--push-three-fifths { left: 60%; } .small--push-four-fifths { left: 80%; } /* Sixths */ .small--push-one-sixth { left: 16.66667%; } .small--push-two-sixths { left: 33.33333%; } .small--push-three-sixths { left: 50%; } .small--push-four-sixths { left: 66.66667%; } .small--push-five-sixths { left: 83.33333%; } /* Eighths */ .small--push-one-eighth { left: 12.5%; } .small--push-two-eighths { left: 25%; } .small--push-three-eighths { left: 37.5%; } .small--push-four-eighths { left: 50%; } .small--push-five-eighths { left: 62.5%; } .small--push-six-eighths { left: 75%; } .small--push-seven-eighths { left: 87.5%; } /* Tenths */ .small--push-one-tenth { left: 10%; } .small--push-two-tenths { left: 20%; } .small--push-three-tenths { left: 30%; } .small--push-four-tenths { left: 40%; } .small--push-five-tenths { left: 50%; } .small--push-six-tenths { left: 60%; } .small--push-seven-tenths { left: 70%; } .small--push-eight-tenths { left: 80%; } .small--push-nine-tenths { left: 90%; } /* Twelfths */ .small--push-one-twelfth { left: 8.33333%; } .small--push-two-twelfths { left: 16.66667%; } .small--push-three-twelfths { left: 25%; } .small--push-four-twelfths { left: 33.33333%; } .small--push-five-twelfths { left: 41.66667%; } .small--push-six-twelfths { left: 50%; } .small--push-seven-twelfths { left: 58.33333%; } .small--push-eight-twelfths { left: 66.66667%; } .small--push-nine-twelfths { left: 75%; } .small--push-ten-twelfths { left: 83.33333%; } .small--push-eleven-twelfths { left: 91.66667%; } }
@media only screen and (min-width: 750px) { /* Halves */ .medium-up--push-one-half { left: 50%; } /* Thirds */ .medium-up--push-one-third { left: 33.33333%; } .medium-up--push-two-thirds { left: 66.66667%; } /* Quarters */ .medium-up--push-one-quarter { left: 25%; } .medium-up--push-two-quarters { left: 50%; } .medium-up--push-three-quarters { left: 75%; } /* Fifths */ .medium-up--push-one-fifth { left: 20%; } .medium-up--push-two-fifths { left: 40%; } .medium-up--push-three-fifths { left: 60%; } .medium-up--push-four-fifths { left: 80%; } /* Sixths */ .medium-up--push-one-sixth { left: 16.66667%; } .medium-up--push-two-sixths { left: 33.33333%; } .medium-up--push-three-sixths { left: 50%; } .medium-up--push-four-sixths { left: 66.66667%; } .medium-up--push-five-sixths { left: 83.33333%; } /* Eighths */ .medium-up--push-one-eighth { left: 12.5%; } .medium-up--push-two-eighths { left: 25%; } .medium-up--push-three-eighths { left: 37.5%; } .medium-up--push-four-eighths { left: 50%; } .medium-up--push-five-eighths { left: 62.5%; } .medium-up--push-six-eighths { left: 75%; } .medium-up--push-seven-eighths { left: 87.5%; } /* Tenths */ .medium-up--push-one-tenth { left: 10%; } .medium-up--push-two-tenths { left: 20%; } .medium-up--push-three-tenths { left: 30%; } .medium-up--push-four-tenths { left: 40%; } .medium-up--push-five-tenths { left: 50%; } .medium-up--push-six-tenths { left: 60%; } .medium-up--push-seven-tenths { left: 70%; } .medium-up--push-eight-tenths { left: 80%; } .medium-up--push-nine-tenths { left: 90%; } /* Twelfths */ .medium-up--push-one-twelfth { left: 8.33333%; } .medium-up--push-two-twelfths { left: 16.66667%; } .medium-up--push-three-twelfths { left: 25%; } .medium-up--push-four-twelfths { left: 33.33333%; } .medium-up--push-five-twelfths { left: 41.66667%; } .medium-up--push-six-twelfths { left: 50%; } .medium-up--push-seven-twelfths { left: 58.33333%; } .medium-up--push-eight-twelfths { left: 66.66667%; } .medium-up--push-nine-twelfths { left: 75%; } .medium-up--push-ten-twelfths { left: 83.33333%; } .medium-up--push-eleven-twelfths { left: 91.66667%; } }
/*================ #Helper Classes ================*/
.no-js .js { display: none; }
.hide { display: none !important; }
.page-width { *zoom: 1; max-width: 1200px; margin: 0 auto; } /*======= Force an input/button to look like a text link ==========*/ .text-link .text-link--accent
/*================ Buttons ================*/ .btn .shopify-payment-button .shopify-payment-button__button--unbranded .btn--secondary .btn--secondary-accent .btn--small .btn--tertiary
/*================ Button variations ================*/ @media only screen and (max-width: 749px) { .btn--small-wide { padding-left: 50px; padding-right: 50px; } }
.btn--link { background-color: transparent; border: 0; margin: 0; color: var(--color-text); text-align: left; } .btn--link:not([disabled]):hover, .btn--link:focus { color: var(--color-text-focus); background-color: transparent; } .btn--link .icon { vertical-align: middle; }
.btn--narrow { padding-left: 15px; padding-right: 15px; }
.btn--has-icon-after .icon { margin-left: 10px; }
.btn--has-icon-before .icon { margin-right: 10px; }
|
Use left/right arrows to navigate the slideshow or swipe left/right if using a mobile device