first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,63 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Blog layouts
|
||||
*
|
||||
* Blog layouts with various blog layouts
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-blog {
|
||||
|
||||
// Horizontal layout
|
||||
.blog-horizontal {
|
||||
|
||||
// Stick thumb to the left and give it fixed width
|
||||
.card-img-actions {
|
||||
width: 100%;
|
||||
|
||||
// Desktop size
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: 45%;
|
||||
float: left;
|
||||
max-width: $blog-horizontal-img-max-width;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Media sizing
|
||||
//
|
||||
|
||||
// Mini
|
||||
.blog-horizontal-xs {
|
||||
.card-img-actions {
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: 35%;
|
||||
max-width: $blog-horizontal-img-max-width-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Medium
|
||||
.blog-horizontal-sm {
|
||||
.card-img-actions {
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: 40%;
|
||||
max-width: $blog-horizontal-img-max-width-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.blog-horizontal-lg {
|
||||
.card-img-actions {
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: 50%;
|
||||
max-width: $blog-horizontal-img-max-width-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Chat layouts
|
||||
*
|
||||
* Conversation chat styles - layouts, chat elements, colors, options
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-chat {
|
||||
|
||||
// Set scrollbar to the long chat list
|
||||
.media-chat-scrollable {
|
||||
max-height: $chat-list-max-height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Message list
|
||||
.media-chat {
|
||||
|
||||
// Set side spacing for message bodies
|
||||
@include media-breakpoint-up(sm) {
|
||||
.media {
|
||||
margin-right: 20%;
|
||||
|
||||
// Reversed item
|
||||
&.media-chat-item-reverse {
|
||||
margin-right: 0;
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Message body
|
||||
.media-chat-item {
|
||||
position: relative;
|
||||
padding: $chat-message-padding-y $chat-message-padding-x;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
color: $chat-message-color;
|
||||
@include border-radius($chat-message-border-radius);
|
||||
|
||||
// Set default bg color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $chat-message-bg;
|
||||
border-color: $chat-message-bg;
|
||||
}
|
||||
|
||||
// Arrow base
|
||||
&:before {
|
||||
content: '';
|
||||
left: -($chat-message-arrow-size);
|
||||
top: ($chat-message-padding-y + ($line-height-computed / 2) - rem-calc($chat-message-arrow-size));
|
||||
position: absolute;
|
||||
margin-left: 0;
|
||||
border-top: $chat-message-arrow-size solid transparent;
|
||||
border-right: $chat-message-arrow-size solid;
|
||||
border-right-color: inherit;
|
||||
border-bottom: $chat-message-arrow-size solid transparent;
|
||||
|
||||
// Reversed arrow
|
||||
.media-chat-item-reverse & {
|
||||
left: auto;
|
||||
right: -($chat-message-arrow-size);
|
||||
border-right: 0;
|
||||
border-left: $chat-message-arrow-size solid;
|
||||
border-left-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reversed message body
|
||||
.media-chat-item-reverse {
|
||||
|
||||
// Message
|
||||
.media-chat-item {
|
||||
text-align: left;
|
||||
color: $chat-message-reversed-color;
|
||||
|
||||
// Set default bg color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $chat-message-reversed-bg;
|
||||
border-color: $chat-message-reversed-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Change text alignment
|
||||
.media-body {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Inversed message list
|
||||
.media-chat-inverse {
|
||||
.media-chat-item {
|
||||
color: $chat-message-reversed-color;
|
||||
|
||||
// Colors
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $chat-message-reversed-bg;
|
||||
border-color: $chat-message-reversed-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Reversed message
|
||||
.media-chat-item-reverse {
|
||||
.media-chat-item {
|
||||
color: $chat-message-color;
|
||||
|
||||
// Colors
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $chat-message-bg;
|
||||
border-color: $chat-message-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ecommerce stuff
|
||||
*
|
||||
* Styles for Ecommerce set of pages
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-ecommerce {
|
||||
|
||||
|
||||
//
|
||||
// Elements
|
||||
//
|
||||
|
||||
// Sidebar color selector
|
||||
.color-selector-active {
|
||||
position: relative;
|
||||
|
||||
// Checkmark icon
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
margin-left: -($icon-font-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pricing tables
|
||||
//
|
||||
|
||||
// Price label
|
||||
.pricing-table-price {
|
||||
font-size: $pricing-title-font-size;
|
||||
|
||||
// Currency sign
|
||||
> span {
|
||||
font-size: $pricing-subtitle-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked list of features
|
||||
.pricing-table-list {
|
||||
li {
|
||||
padding-top: $pricing-list-item-padding-y;
|
||||
padding-bottom: $pricing-list-item-padding-y;
|
||||
border-bottom: $pricing-list-item-border-width solid $pricing-list-item-border-color;
|
||||
|
||||
// Change border color in dark cards
|
||||
.card[class*=bg-]:not(.bg-transparent):not(.bg-white):not(.bg-light) & {
|
||||
border-bottom-color: rgba($white, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Ribbons
|
||||
//
|
||||
|
||||
// Container
|
||||
.ribbon-container {
|
||||
width: 6.5rem;
|
||||
height: 6.625rem;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -($card-border-width);
|
||||
right: -($card-border-width);
|
||||
}
|
||||
|
||||
// Corner ribbon
|
||||
.ribbon {
|
||||
text-align: center;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
padding: 0.3125rem 0;
|
||||
left: -0.6875rem;
|
||||
top: 1.563rem;
|
||||
width: 9.375rem;
|
||||
z-index: 10;
|
||||
transform: rotate(45deg);
|
||||
@include box-shadow($pricing-ribbon-box-shadow);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Error pages
|
||||
*
|
||||
* Styles for error and offline pages
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-error {
|
||||
|
||||
// Default title
|
||||
.error-title {
|
||||
color: $error-title-color;
|
||||
font-size: $error-title-font-size-sm;
|
||||
line-height: 1;
|
||||
margin-bottom: ($spacer * 2);
|
||||
font-weight: $font-weight-light;
|
||||
text-stroke: 1px transparent;
|
||||
display: block;
|
||||
text-shadow: 0 1px 0 #ccc,
|
||||
0 2px 0 #c9c9c9,
|
||||
0 3px 0 #bbb,
|
||||
0 4px 0 #b9b9b9,
|
||||
0 5px 0 #aaa,
|
||||
0 6px 1px rgba($black, 0.1),
|
||||
0 0 5px rgba($black, 0.1),
|
||||
0 1px 3px rgba($black, 0.3),
|
||||
0 3px 5px rgba($black, 0.2),
|
||||
0 5px 10px rgba($black, 0.25),
|
||||
0 10px 10px rgba($black, 0.2),
|
||||
0 20px 20px rgba($black, 0.15);
|
||||
|
||||
// Use bigger font size on desktop
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: $error-title-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Title in offline page
|
||||
.offline-title {
|
||||
font-size: $error-offline-title-font-size-sm;
|
||||
|
||||
// Use bigger font size on desktop
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: $error-offline-title-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Mail list
|
||||
*
|
||||
* Inbox page - list, read and write
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-inbox {
|
||||
|
||||
// Base
|
||||
.table-inbox {
|
||||
table-layout: fixed;
|
||||
min-width: map-get($grid-breakpoints, "md");
|
||||
|
||||
// Rows and cells
|
||||
tr {
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Read message background color
|
||||
&:not([class*=alpha-]):not([class*=bg-]) {
|
||||
background-color: $inbox-read-row-bg;
|
||||
}
|
||||
|
||||
// Remove left padding in all cells except first
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// New mail
|
||||
&.unread {
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
// Unread message background color
|
||||
&:not([class*=alpha-]):not([class*=bg-]) {
|
||||
background-color: $inbox-unread-row-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cell with checkbox
|
||||
.table-inbox-checkbox {
|
||||
width: (($card-spacer-x * 2) + $checkbox-size);
|
||||
}
|
||||
|
||||
// Set fixed width to star and atachment cells
|
||||
.table-inbox-star,
|
||||
.table-inbox-attachment {
|
||||
width: ($card-spacer-x + $icon-font-size);
|
||||
}
|
||||
|
||||
// User image cell
|
||||
.table-inbox-image {
|
||||
width: ($card-spacer-x + ((($line-height-computed - $icon-font-size + $btn-padding-y-sm) - rem-calc($btn-border-width)) * 2) + $icon-font-size);
|
||||
}
|
||||
|
||||
// Sender name
|
||||
.table-inbox-name {
|
||||
width: 11.25rem;
|
||||
}
|
||||
|
||||
// Message subject
|
||||
.table-inbox-subject {
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
.table-inbox-message {
|
||||
@include text-truncate();
|
||||
}
|
||||
|
||||
// Time cell
|
||||
.table-inbox-time {
|
||||
text-align: right;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Login and related forms
|
||||
*
|
||||
* Styles related to user login - logins, registration, password revovery, unlock etc.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-login {
|
||||
|
||||
// Cover image
|
||||
.login-cover {
|
||||
background: url(#{$img-path}/login_cover.jpg) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// Form
|
||||
.login-form {
|
||||
width: 100%;
|
||||
|
||||
// Tabs
|
||||
.nav-item {
|
||||
@if $enable-rounded {
|
||||
&:first-child .nav-link {
|
||||
border-top-left-radius: $card-inner-border-radius;
|
||||
}
|
||||
&:last-child .nav-link {
|
||||
border-top-right-radius: $card-inner-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set a fixed width for desktop browsers
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: $login-form-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # User profile
|
||||
*
|
||||
* Styles for all user profile layouts
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-profile {
|
||||
|
||||
// Cover image layout base
|
||||
.profile-cover {
|
||||
position: relative;
|
||||
|
||||
// Cover details
|
||||
.media {
|
||||
position: absolute;
|
||||
left: $card-spacer-x;
|
||||
right: $card-spacer-x;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
|
||||
// Add shadow to buttons
|
||||
.btn {
|
||||
box-shadow: $profile-cover-element-shadow !important;
|
||||
}
|
||||
|
||||
// Desktop view
|
||||
@include media-breakpoint-up(md) {
|
||||
bottom: $spacer;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Text styles
|
||||
.media-body {
|
||||
text-shadow: $profile-cover-element-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Cover image
|
||||
.profile-cover-img {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: $profile-cover-height;
|
||||
}
|
||||
|
||||
// User thumbnail inside cover
|
||||
.profile-thumb img {
|
||||
border: $profile-thumb-border-width solid $profile-thumb-border-color;
|
||||
box-shadow: $profile-cover-element-shadow;
|
||||
@include size($profile-thumb-size);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Task manager
|
||||
*
|
||||
* Styles related to task manager - detailed task, list and grid
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-tasks {
|
||||
|
||||
// Numbers
|
||||
.timer-number {
|
||||
font-size: ($h2-font-size * 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Dots between numbers
|
||||
.timer-dots {
|
||||
font-size: ($h2-font-size);
|
||||
padding: ($h2-font-size / 2) 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,417 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Timeline
|
||||
*
|
||||
* Styles for timeline in 3 layouts: left, right and centered
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-timeline {
|
||||
|
||||
// Base
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
// Dots base
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -($timeline-line-width);
|
||||
background-color: $timeline-line-color;
|
||||
z-index: 1;
|
||||
@include size($timeline-line-width * 2);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
|
||||
// Top dot
|
||||
&:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Bottom dot
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding-top: ($spacer / 2);
|
||||
margin-top: -($spacer / 2);
|
||||
padding-bottom: 1px;
|
||||
|
||||
// Vertical line
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -($timeline-line-width / 2);
|
||||
background-color: $timeline-line-color;
|
||||
height: 100%;
|
||||
width: $timeline-line-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
.timeline-row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Date
|
||||
.timeline-date {
|
||||
text-align: center;
|
||||
background-color: $body-bg;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Dots base
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -($timeline-line-width);
|
||||
background-color: $timeline-line-color;
|
||||
z-index: 1;
|
||||
@include size($timeline-line-width * 2);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
|
||||
// Top dot
|
||||
&:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Bottom dot
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Change bg color to card bg if inside card
|
||||
.card & {
|
||||
background-color: $card-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.timeline-time {
|
||||
text-align: center;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
background-color: $body-bg;
|
||||
position: relative;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Dots base
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -($timeline-line-width);
|
||||
background-color: $timeline-line-color;
|
||||
@include size($timeline-line-width * 2);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
|
||||
// Top dot
|
||||
&:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Bottom dot
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Change bg color to card bg if inside card
|
||||
.card & {
|
||||
background-color: $card-bg;
|
||||
}
|
||||
|
||||
// Hide dots no desktop
|
||||
@include media-breakpoint-up(md) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon and image
|
||||
.timeline-icon {
|
||||
margin: 0 auto $spacer auto;
|
||||
background-color: $timeline-icon-bg;
|
||||
border: $timeline-icon-border-width solid $body-bg;
|
||||
@include size($timeline-icon-size);
|
||||
@include border-radius($border-radius-circle);
|
||||
|
||||
// Change border color if it's inside card
|
||||
.card & {
|
||||
border-color: $card-bg;
|
||||
}
|
||||
|
||||
// Icon
|
||||
div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 0 $timeline-line-width $timeline-line-color inset;
|
||||
@include border-radius($border-radius-circle);
|
||||
|
||||
// Hide border if icon wrapper has dark color
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Icon
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
@include size($timeline-icon-size - rem-calc($timeline-icon-border-width * 2));
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Responsive config
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
||||
|
||||
// Positions
|
||||
// ------------------------------
|
||||
|
||||
// Center layout
|
||||
.timeline-center {
|
||||
|
||||
// Left blocks
|
||||
.timeline-row-left {
|
||||
margin-right: 50%;
|
||||
padding-right: $timeline-icon-size - rem-calc($timeline-icon-border-width);
|
||||
}
|
||||
|
||||
// Right blocks
|
||||
.timeline-row-right {
|
||||
margin-left: 50%;
|
||||
padding-left: $timeline-icon-size - rem-calc($timeline-icon-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Left layout
|
||||
.timeline-left {
|
||||
|
||||
// Vertical line
|
||||
.timeline-container:after,
|
||||
&:before,
|
||||
&:after,
|
||||
.timeline-date:before,
|
||||
.timeline-date:after {
|
||||
left: ($timeline-icon-size / 2);
|
||||
}
|
||||
|
||||
// Content padding
|
||||
.timeline-row,
|
||||
.timeline-date {
|
||||
padding-left: ($timeline-icon-size + $timeline-content-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
// Right layout
|
||||
.timeline-right {
|
||||
|
||||
// Vertical line
|
||||
.timeline-container:after,
|
||||
&:before,
|
||||
&:after,
|
||||
.timeline-date:before,
|
||||
.timeline-date:after {
|
||||
left: auto;
|
||||
right: ($timeline-icon-size / 2);
|
||||
margin-left: 0;
|
||||
margin-right: -($timeline-line-width);
|
||||
}
|
||||
.timeline-container:after {
|
||||
margin-right: -($timeline-line-width / 2);
|
||||
}
|
||||
|
||||
// Content padding
|
||||
.timeline-row,
|
||||
.timeline-date {
|
||||
padding-right: ($timeline-icon-size + $timeline-content-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
// Reduce date vertical spacing in both
|
||||
.timeline-left .timeline-date,
|
||||
.timeline-right .timeline-date {
|
||||
padding-top: ($spacer / 2);
|
||||
padding-bottom: ($spacer / 2);
|
||||
}
|
||||
|
||||
|
||||
// Icon
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.timeline-icon {
|
||||
position: absolute;
|
||||
top: ($spacer / 2);
|
||||
|
||||
// Horizontal line base
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($timeline-line-width / 2);
|
||||
height: $timeline-line-width;
|
||||
width: ($timeline-icon-size / 2) - rem-calc($timeline-icon-border-width * 2);
|
||||
background-color: $timeline-line-color;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// In left layout
|
||||
.timeline-left {
|
||||
.timeline-icon {
|
||||
left: 0;
|
||||
|
||||
// Right line
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: $timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In right layout
|
||||
.timeline-right {
|
||||
.timeline-icon {
|
||||
right: 0;
|
||||
|
||||
// Left line
|
||||
&:after {
|
||||
right: 100%;
|
||||
margin-right: $timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In centered layout
|
||||
.timeline-center {
|
||||
|
||||
// In left block
|
||||
.timeline-row-left {
|
||||
.timeline-icon {
|
||||
left: 100%;
|
||||
margin-left: -($timeline-icon-size / 2);
|
||||
|
||||
// Left horizontal line
|
||||
&:after {
|
||||
right: 100%;
|
||||
margin-right: $timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In right block
|
||||
.timeline-row-right {
|
||||
.timeline-icon {
|
||||
right: 100%;
|
||||
margin-right: -($timeline-icon-size / 2);
|
||||
|
||||
// Right horizontal line
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: $timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Full width post
|
||||
.timeline-row-full .timeline-icon {
|
||||
position: static;
|
||||
|
||||
// Remove horizontal line
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
.timeline-time {
|
||||
padding: 0;
|
||||
text-align: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
// Hide dots
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// In left and right layouts
|
||||
.timeline-left,
|
||||
.timeline-right {
|
||||
.timeline-time {
|
||||
padding-top: ($spacer / 2);
|
||||
margin-bottom: $spacer;
|
||||
padding-left: ($timeline-content-padding-x / 2);
|
||||
}
|
||||
}
|
||||
.timeline-right .timeline-time {
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
padding-right: ($timeline-content-padding-x / 2);
|
||||
}
|
||||
|
||||
// In center layout
|
||||
.timeline-center {
|
||||
.timeline-time,
|
||||
.timeline-row-full .timeline-time {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: ($spacer / 2) + rem-calc($timeline-icon-border-width);
|
||||
width: 100%;
|
||||
padding-left: $timeline-icon-size - rem-calc($timeline-icon-border-width);
|
||||
}
|
||||
|
||||
// Right aligned post
|
||||
.timeline-row-right,
|
||||
.timeline-row-full {
|
||||
.timeline-time {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: $timeline-icon-size - rem-calc($timeline-icon-border-width);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Full width post
|
||||
.timeline-row-full .timeline-time {
|
||||
right: 50%;
|
||||
top: $timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user