/** * ANG Timeline http://torbara.com * @encoding UTF-8 * @version 1.3.0 * @copyright Copyright (C) 2015 Aleksandr Glovatskyy. All rights reserved. * @license GNU General Public License version 2 or later, see http://www.gnu.org/licenses/gpl-2.0.html * @author Aleksandr Glovatskyy */ .ang-timeline-wrapp .uk-width-1-1{ width:100%; } .ang-timeline-wrapp .uk-text-left { text-align: left; } .ang-timeline-wrapp .tm-widget-descr { margin-bottom: 30px; text-align: center; } /* Clearing ========================================================================== */ /* * Micro clearfix * `table-cell` is used with `:before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit * `table` is used again with `:after` because `clear` only works with block elements. * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari */ .ang-timeline-wrapp .uk-clearfix:before { content: ""; display: table-cell; } .ang-timeline-wrapp .uk-clearfix:after { content: ""; display: table; clear: both; } .ang-timeline-entry{ position:relative; margin-top: 25px; } .ang-timeline-entry::before { content: ""; position: absolute; top: 0px; left: 50%; margin-left: -1px; background-color: #e8e8e8; height: 100%; width: 2px; border-radius: 2px; display: block; } .feed-timeline-vertical::before{ content: ""; position: absolute; top: 0px; left: 50%; margin-left: -5px; background-color:#e8e8e8; width: 10px; height: 10px; border-radius: 50%; display: block; box-sizing:border-box; } .feed-timeline-vertical::after{ content: ""; position: absolute; bottom: 0px; left: 50%; margin-left: -5px; background-color: #e8e8e8; width: 10px; height: 10px; border-radius: 50%; display: block; box-sizing:border-box; } .feed-timeline-vertical { position: relative; margin: 0px; padding: 20px 0px; overflow:hidden; list-style: none; } .feed-timeline-vertical li .entry .panel-body h5{ margin-bottom:15px; } .feed-timeline-vertical li .entry .panel-body p{ margin-bottom:15px; } .feed-timeline-vertical li, .feed-timeline-vertical li.even { display: block; position: relative; width: 50%; /*background: transparent url("../images/timeline-middle.png") repeat-x scroll center center;*/ transition: all 0.5s ease 0s; clear: right; float: right; margin-top: 90px; margin-bottom: 15px; margin-right:0; margin-left: 0px; } .feed-timeline-vertical li:nth-child(2n+1), .feed-timeline-vertical li.odd { clear: both; float: left; margin-top: 15px; margin-bottom: 80px; margin-left:0; } .feed-timeline-vertical li .entry-wrapp{ position: relative; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp::before { content: ""; position: absolute; top: 50%; right: 0px; height: 2px; width: 100%; margin-top:-1px; background-color: #e8e8e8; z-index: -1; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp { padding-left: 20%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp { padding-right: 20%; padding-left: 0; } .feed-timeline-vertical li .entry-wrapp:hover { padding-left: 18%; margin-right:2%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp:hover { padding-right: 18%; margin-left:2%; padding-left: 0; margin-right:0; } .feed-timeline-vertical li .entry-wrapp:hover::before { background-color: #6aa0f1; } .feed-timeline-vertical .entry{ display: block; padding: 6%; position: relative; border: 1px solid #e6e6e6; border-bottom-width:3px; font-size: 14px; color:#a7a7a7; background-color: #fff; background-image: -moz-linear-gradient(center top , #FFF, #EEE); } .feed-timeline-vertical li .entry { margin-bottom: 0px; margin-left:0; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .entry{ border-color: #6aa0f1; } .tm-timeline-thumb { display: block; padding: 2px 2px; position: relative; border-radius: 3px; border: 1px solid #e6e6e6; background-color: #fff; } /* */ .feed-timeline-vertical li .entry .timeline-time{ text-align: right; margin-right: 20px; margin-left: 20px; position: absolute; top: 0; right: 0; margin-top: 2px; font-size: 12px; } .feed-timeline-vertical li div .timeline-year{ position: absolute; top: 50%; background:none; overflow: hidden; z-index: 100; margin-top: -7px; right: auto; left: -57px; line-height:1; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-year{ right: -57px; left:auto; } .feed-timeline-vertical li div .timeline-year time{ transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .timeline-year{ color: #6aa0f1; } .feed-timeline-vertical li div .timeline-icon-wrapp{ position: absolute; top: 50%; background:none; text-align: center; overflow: hidden; z-index: 100; margin-top: -15px; right: auto; left: -15px; padding:5px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-icon-wrapp{ right: -15px; left:auto; } .feed-timeline-vertical li div .timeline-icon-wrapp .timeline-icon{ border:2px solid #e8e8e8; width: 20px; height: 20px; border-radius: 50%; background-color: #FFF; box-sizing: border-box; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .timeline-icon{ border:2px solid #6aa0f1; background-color: #6aa0f1; } .feed-timeline-vertical li div .timeline-content { margin: 0px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-content { margin: 0px; } .feed-timeline-vertical li div .timeline-content .panel-body { overflow:hidden; } /* media */ @media (max-width:959px){ } @media (max-width:767px){ .ang-timeline-entry::before{ left: 20%; } .feed-timeline-vertical::before{ left: 20%; } .feed-timeline-vertical::after{ left: 20%; } .feed-timeline-vertical li .entry-wrapp{ padding-left: 10%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp { padding-left: 10%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp{ padding-right:0; } .feed-timeline-vertical li .entry-wrapp:hover , .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp:hover { padding-left: 9%; margin-right:1%; padding-right:0; margin-left: 0; } .feed-timeline-vertical li, .feed-timeline-vertical li.even, .feed-timeline-vertical li:nth-child(2n+1), .feed-timeline-vertical li.odd { width:80%; clear: both; float: right; margin-top: 20px; margin-bottom:30px; margin-left:0; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-icon-wrapp{ right: auto; left: -15px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-year{ right: auto; left: -57px; } } @media (max-width:479px){ } /* ======================================================================== Component: Animation ========================================================================== */ [class*='uk-animation-'] { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Hide animated element if scrollspy is used */ @media screen { [data-uk-scrollspy*='uk-animation-']:not([data-uk-scrollspy*='target']) { opacity: 0; } } /* * Fade * Higher specificity (!important) needed because of reverse modifier */ .uk-animation-fade { -webkit-animation-name: uk-fade; animation-name: uk-fade; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: linear !important; animation-timing-function: linear !important; } /* * Fade with scale */ .uk-animation-scale-up { -webkit-animation-name: uk-fade-scale-02; animation-name: uk-fade-scale-02; } .uk-animation-scale-down { -webkit-animation-name: uk-fade-scale-18; animation-name: uk-fade-scale-18; } /* * Fade with slide */ .uk-animation-slide-top { -webkit-animation-name: uk-fade-top; animation-name: uk-fade-top; } .uk-animation-slide-bottom { -webkit-animation-name: uk-fade-bottom; animation-name: uk-fade-bottom; } .uk-animation-slide-left { -webkit-animation-name: uk-fade-left; animation-name: uk-fade-left; } .uk-animation-slide-right { -webkit-animation-name: uk-fade-right; animation-name: uk-fade-right; } /* * Scale */ .uk-animation-scale { -webkit-animation-name: uk-scale-12; animation-name: uk-scale-12; } /* * Shake */ .uk-animation-shake { -webkit-animation-name: uk-shake; animation-name: uk-shake; } /* Direction modifiers ========================================================================== */ .uk-animation-reverse { -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Duration modifiers ========================================================================== */ .uk-animation-15 { -webkit-animation-duration: 15s; animation-duration: 15s; } /* Origin modifiers ========================================================================== */ .uk-animation-top-left { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .uk-animation-top-center { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .uk-animation-top-right { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .uk-animation-middle-left { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .uk-animation-middle-right { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .uk-animation-bottom-left { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .uk-animation-bottom-center { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .uk-animation-bottom-right { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } /* Sub-object: `uk-animation-hover` ========================================================================== */ /* * Enable animation only on hover * Note: Firefox also needs this because animations are not triggered when switching between display `hidden` and `block` */ .uk-animation-hover:not(:hover), .uk-animation-hover:not(:hover) [class*='uk-animation-'], .uk-touch .uk-animation-hover:not(.uk-hover), .uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] { -webkit-animation-name: none; animation-name: none; } /* Keyframes: Fade * Used by dropdown, datepicker and slideshow component ========================================================================== */ @-webkit-keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* Keyframes: Fade with slide ========================================================================== */ /* * Top */ @-webkit-keyframes uk-fade-top { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-fade-top { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /* * Bottom */ @-webkit-keyframes uk-fade-bottom { 0% { opacity: 0; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-fade-bottom { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } /* * Left */ @-webkit-keyframes uk-fade-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes uk-fade-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } /* * Right */ @-webkit-keyframes uk-fade-right { 0% { opacity: 0; -webkit-transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes uk-fade-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } /* Keyframes: Fade with scale ========================================================================== */ /* * Scale by 0.2 */ @-webkit-keyframes uk-fade-scale-02 { 0% { opacity: 0; -webkit-transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-02 { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); } } /* * Scale by 1.5 * Used by slideshow component */ @-webkit-keyframes uk-fade-scale-15 { 0% { opacity: 0; -webkit-transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-15 { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } /* * Scale by 1.8 */ @-webkit-keyframes uk-fade-scale-18 { 0% { opacity: 0; -webkit-transform: scale(1.8); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-18 { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } /* Keyframes: Slide * Used by slideshow component ========================================================================== */ /* * Left */ @-webkit-keyframes uk-slide-left { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } /* * Right */ @-webkit-keyframes uk-slide-right { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } /* * Left third */ @-webkit-keyframes uk-slide-left-33 { 0% { -webkit-transform: translateX(33%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-left-33 { 0% { transform: translateX(33%); } 100% { transform: translateX(0); } } /* * Right third */ @-webkit-keyframes uk-slide-right-33 { 0% { -webkit-transform: translateX(-33%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-right-33 { 0% { transform: translateX(-33%); } 100% { transform: translateX(0); } } /* Keyframes: Scale ========================================================================== */ @-webkit-keyframes uk-scale-12 { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @keyframes uk-scale-12 { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Keyframes: Rotate * Used by icon component ========================================================================== */ @-webkit-keyframes uk-rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @keyframes uk-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* Keyframes: Shake ========================================================================== */ @-webkit-keyframes uk-shake { 0%, 100% { -webkit-transform: translateX(0); } 10% { -webkit-transform: translateX(-9px); } 20% { -webkit-transform: translateX(8px); } 30% { -webkit-transform: translateX(-7px); } 40% { -webkit-transform: translateX(6px); } 50% { -webkit-transform: translateX(-5px); } 60% { -webkit-transform: translateX(4px); } 70% { -webkit-transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); } 90% { -webkit-transform: translateX(-1px); } } @keyframes uk-shake { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-9px); } 20% { transform: translateX(8px); } 30% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 50% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 70% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 90% { transform: translateX(-1px); } } /* Keyframes: Fade with slide fixed * Used by dropdown and search component ========================================================================== */ /* * Top fixed */ @-webkit-keyframes uk-slide-top-fixed { 0% { opacity: 0; -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-slide-top-fixed { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* * Bottom fixed */ @-webkit-keyframes uk-slide-bottom-fixed { 0% { opacity: 0; -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-slide-bottom-fixed { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }