Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
108 lines
2.2 KiB
/* |
|
* VMM Timeline Core |
|
* Basic and global styles for generating structural layout |
|
* ------------------------------------------------------------------------------------------- */ |
|
|
|
/* TIMELINE EMBED |
|
================================================== */ |
|
#timeline-embed { |
|
background-color: @color-base; |
|
margin-bottom:20px; |
|
border: 1px solid @color-line; |
|
padding-top:20px; |
|
padding-bottom:20px; |
|
clear:both; |
|
|
|
.border-radius(10px); |
|
.box-shadow(1px 1px 3px rgba(0,0,0,.35)); |
|
} |
|
#timeline-embed.full-embed { |
|
overflow:hidden; |
|
border: 0 !important; |
|
padding: 0 !important; |
|
margin: 0 !important; |
|
clear:both; |
|
|
|
.border-radius(0) !important; |
|
.box-shadow(0 0px 0px rgba(0, 0, 0, 0.25)) !important; |
|
} |
|
#timeline-embed.sized-embed { |
|
overflow:hidden; |
|
border: 1px solid @color-line; |
|
padding-top:7px; |
|
padding-bottom:7px; |
|
margin: 0 !important; |
|
clear:both; |
|
|
|
.box-shadow(0 0px 0px rgba(0, 0, 0, 0.25)) !important; |
|
} |
|
|
|
/* MEDIA QUERIES |
|
================================================== */ |
|
|
|
/* Mobile and iPhone |
|
================================================== */ |
|
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { |
|
|
|
} |
|
|
|
/* BELOW 600px |
|
================================================== */ |
|
|
|
@media (max-width: 600px) { |
|
.vco-slider { |
|
.slider-item { |
|
.content { |
|
.content-container { |
|
display:block; |
|
.text { |
|
width:100%; |
|
max-width:100%; |
|
min-width:120px; |
|
display:block; |
|
.container { |
|
display:block; |
|
-webkit-hyphens:auto; |
|
-moz-hyphens:auto; |
|
-ms-hyphens:auto; |
|
hyphens:auto; |
|
word-wrap:break-word; |
|
|
|
} |
|
} |
|
.media { |
|
width:100%; |
|
min-width:50%; |
|
float: none; |
|
.media-wrapper { |
|
margin-left:0px; |
|
margin-right:0px; |
|
width:100%; |
|
display:block; |
|
.media-container { |
|
img, iframe { |
|
//width:100%; |
|
//max-height:350px; |
|
} |
|
} |
|
} |
|
} |
|
.media.text-media { |
|
.media-wrapper { |
|
.media-container { |
|
border: none; |
|
} |
|
} |
|
} |
|
} |
|
.content-container.layout-text { |
|
|
|
} |
|
.content-container.layout-media { |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
}
|
|
|