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.
136 lines
2.9 KiB
136 lines
2.9 KiB
/*! |
|
TIMELINE CSS |
|
|
|
Designed and built by Zach Wise at VeriteCo |
|
|
|
This program is free software: you can redistribute it and/or modify |
|
it under the terms of the GNU General Public License as published by |
|
the Free Software Foundation, either version 3 of the License, or |
|
(at your option) any later version. |
|
|
|
This program is distributed in the hope that it will be useful, |
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
GNU General Public License for more details. |
|
|
|
http://www.gnu.org/licenses/ |
|
|
|
*/ |
|
|
|
/* THEME DEFAULT |
|
----------------------------------------------------- */ |
|
//GFX |
|
.base-sprite() { |
|
background-image: url(timeline.png?v3.4); |
|
} |
|
.loading-sprite() { |
|
background-image: url(loading.gif?v3.4); |
|
} |
|
|
|
// COLORS |
|
@color-base: #FFF; |
|
@color-line: #CCC; |
|
@color-line-hover: #666; |
|
@color-dark: #000; |
|
@color-dark-second: #333; |
|
@color-dark-third: #666; |
|
@color-dark-fourth: #999; |
|
@color-dark-fifth: #E3E3E3; |
|
@color-background-dark: #E9E9E9; |
|
// COLOR THEME |
|
@color-theme: #08C; //#FF3712; //#FF0000; |
|
|
|
/* BASE |
|
----------------------------------------------------- */ |
|
|
|
// CSS Reset |
|
@import "Reset.less"; |
|
|
|
// Core variables and mixins |
|
@import "Font.Default.less"; |
|
@import "Variables.less"; |
|
@import "Mixins.less"; |
|
@import "GFX.less"; |
|
|
|
// Grid system and page structure |
|
@import "VMM.Timeline.Core.less"; |
|
@import "VMM.Slider.less"; |
|
@import "VMM.Timeline.TimeNav.less"; |
|
|
|
// Typography |
|
@import "Typography.less"; |
|
|
|
// Grid system and page structure |
|
@import "VMM.Timeline.Tooltip.less"; |
|
|
|
|
|
/* 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) { |
|
.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; |
|
background-color: @white; |
|
} |
|
} |
|
} |
|
} |
|
.content-container.layout-text { |
|
|
|
} |
|
.content-container.layout-media { |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
}
|
|
|