Skip to content

Instantly share code, notes, and snippets.

@Fobiya

Fobiya/Style adapted SCSS

Last active August 5, 2019 11:07
Show Gist options
  • Save Fobiya/c729d3197ab8f69b66944797c079f913 to your computer and use it in GitHub Desktop.
Save Fobiya/c729d3197ab8f69b66944797c079f913 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Style adapted SCSS
// ===========================================================
// @media element 1201 style <--
// ===========================================================
@media only screen and (min-width: 1201px) {
header{
}
header,
footer,
[class*='section__']{
padding: 100px 0;
}
}
@media only screen and (max-width: 350px) {
.section__7 .box__bacraund .data {
width: 250px;
margin-left: -15px;
}
}
[id*='countdown_dashboard']{
display: inline-block;
position: relative;
margin: 0 auto;
@media only screen and(min-width:993px){
height: 65px;
}
@media only screen and(max-width:992px) and(min-width:601px){
height: auto;
}
@media only screen and(max-width:600px){
height: auto;
}
}
.days_dash{
&:before {
content: "ДНЕЙ";
display: block;
position: absolute;
height: 15px;
bottom: 0px;
@media only screen and(min-width:993px){
width: 70px;
font-size: 14px;
}
@media only screen and(max-width:992px) and(min-width:601px){
width: 70px;
font-size: 11px;
}
@media only screen and(max-width:600px){
width: 50px;
font-size: 9px;
}
}
}
.hours_dash{
&:before {
content: "ЧАСОВ";
display: block;
position: absolute;
height: 15px;
bottom: 0px;
@media only screen and(min-width:993px){
width: 70px;
font-size: 14px;
}
@media only screen and(max-width:992px) and(min-width:601px){
width: 70px;
font-size: 11px;
}
@media only screen and(max-width:600px){
width: 50px;
font-size: 9px;
}
}
}
.minutes_dash{
&:before {
content: "МИНУТ";
display: block;
position: absolute;
height: 15px;
bottom: 0px;
@media only screen and(min-width:993px){
width: 70px;
font-size: 14px;
}
@media only screen and(max-width:992px) and(min-width:601px){
width: 70px;
font-size: 11px;
}
@media only screen and(max-width:600px){
width: 50px;
font-size: 9px;
}
}
}
.seconds_dash{
&:before {
content: "СЕКУНД";
display: block;
position: absolute;
height: 15px;
bottom: 0px;
@media only screen and(min-width:993px){
width: 70px;
font-size: 14px;
}
@media only screen and(max-width:992px) and(min-width:601px){
width: 70px;
font-size: 11px;
}
@media only screen and(max-width:600px){
width: 50px;
font-size: 9px;
}
}
}
#countdown_dashboard {
display: inline-block;
position: relative;
margin: 0 auto;
height: 60px;
@media only screen and(min-width:993px){
margin-top: 60px;
}
@media only screen and(max-width:992px) and(min-width:601px){
margin-top: 50px;
}
@media only screen and(max-width:600px){
margin-top: 30px;
}
}
.dash {
float: left;
margin-left: 0px;
position: relative;
text-align: center;
line-height: 1em;
text-align: center;
@media only screen and(min-width:993px){
padding: 0px 15px;
}
@media only screen and(max-width:992px) and(min-width:601px){
padding: 0px 10px;
}
@media only screen and(max-width:600px){
padding: 0px 5px;
}
}
.dash .digit {
float: left;
text-align: center;
position: relative;
@media only screen and(min-width:993px){
width: 36px;
}
@media only screen and(max-width:992px) and(min-width:601px){
width: 36px;
}
@media only screen and(max-width:600px){
width: 25px;
}
}
.dash_title {
display: block;
bottom: 0px;
// -webkit-transform: matrix(0,-1,1,0,0,0);
// -ms-transform: matrix(0,-1,1,0,0,0);
// transform: matrix(0,-1,1,0,0,0);
font-size: 14px;
// text-transform: none !important;
letter-spacing: 2px;
// margin-bottom: 10px;
text-align: center;
// width: 80px;
// margin-left: 00px;
@media only screen and(min-width:993px){
height: 20px;
margin-top: 0px;
position: absolute;
}
}
// ===========================================================
// END @media element 1201 style <--
// ===========================================================
// ===========================================================
// @media element 1200 style -->
// ===========================================================
@media only screen and (max-width: 1200px) and (min-width: 993px) {
header,
footer,
[class*='section__']{
padding: 100px 0;
}
/* display__center__element ----------------> */
.display__center__element,
.section__3 h2,
.section__3{
text-align: center;
}
/* display__none__element ----------------> */
.display__none__element,
.section__4 .box .images_1,
.section__4 .box:after{
display: none;
}
/* display__flex__element ----------------> */
.display__flex__element{
display: flex;
}
/* display__block__element ----------------> */
.display__block__element{
display: block;
}
/* margin__bottom__element ----------------> */
.margin__bottom__element,
.last{
margin-bottom: 50px !important;
}
/* margin__center__element ----------------> */
.margin__center__element{
margin: 45px auto 50px !important;
}
}
// ===========================================================
// END @media element 1200 style -->
// ===========================================================
// ===========================================================
// @media element 992 style -->
// ===========================================================
@media only screen and (max-width: 992px) and (min-width: 601px) {
header,
footer,
[class*='section__']{
padding: 50px 0;
}
h1 {
font: 40px $pb !important;
}
h2 {
font: 30px $pb !important;
}
h3 {
font: 25px $b;
}
h4 {
font: 23px $b;
}
/* display__center__element ----------------> */
.display__center__element{
text-align: center;
}
/* display__none__element ----------------> */
.display__none__element{
display: flex;
}
/* display__flex__element ----------------> */
.display__flex__element{
display: flex;
}
/* display__block__element ----------------> */
.display__block__element{
display: block;
}
/* margin__center__element ----------------> */
.margin__center__element{
margin: 45px auto 50px !important;
}
/* margin__bottom__element ----------------> */
.margin__bottom__element,
.last{
margin-bottom: 50px !important;
}
/* padding__bottom__element ----------------> */
.padding__bottom__element {
padding-bottom: 50px !important;
}
}
// ===========================================================
// END @media element 992 style -->
// ===========================================================
// ===========================================================
// @media element 600 style -->
// ===========================================================
@media only screen and (max-width: 600px) {
header,
footer,
[class*='section__'] {
padding: 30px 0;
}
h1 {
font: 35px $pb !important;
}
h2 {
font: 25px $pb !important;
margin-bottom: 17px!important;
}
h3 {
font: 23px $pb!important;
}
h4 {
font: 20px $pt !important;
}
p {
font: 18px $pt !important;
}
/* display__center__element ----------------> */
.display__center__element{
text-align: center !important;
}
/* display__none__element ----------------> */
.display__none__element{
display: flex;
}
/* display__flex__element ----------------> */
.display__flex__element{
display: flex;
}
/* display__block__element ----------------> */
.display__block__element{
display: block;
}
/* margin__center__element ----------------> */
.margin__center__element{
margin: 25px auto 30px !important;
}
/* margin__bottom__element ----------------> */
.margin__bottom__element,
.last{
margin-bottom: 30px !important;
}
/* padding__bottom__element ----------------> */
.padding__bottom__element {
padding-bottom: 30px !important;
}
}
// ===========================================================
// END @media element 600 style -->
// ===========================================================
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment