first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,177 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Chat layouts
|
||||
*
|
||||
* Conversation chat styles - layouts, chat elements, colors, options
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Set scrollbar to the long chat list
|
||||
.chat-list,
|
||||
.chat-stacked {
|
||||
max-height: 520px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
// Message list
|
||||
// ------------------------------
|
||||
|
||||
.chat-list {
|
||||
|
||||
// Make equal horizontal spacing
|
||||
.media-left {
|
||||
padding-right: @content-padding-large;
|
||||
}
|
||||
.media-right {
|
||||
padding-left: @content-padding-large;
|
||||
}
|
||||
|
||||
// Message body
|
||||
.media-content {
|
||||
position: relative;
|
||||
padding: 10px 12px;
|
||||
width: auto;
|
||||
border-radius: @border-radius-base;
|
||||
display: inline-block;
|
||||
|
||||
// Set default bg color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
top: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Reversed message body
|
||||
.reversed {
|
||||
.media-content {
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
|
||||
// Set default bg color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @color-primary-400;
|
||||
border-color: @color-primary-400;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Change text alignment
|
||||
.media-body {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Date step
|
||||
.date-step.media {
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// Message image thumbnails
|
||||
.chat-thumbs img {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
max-height: 100px;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Add arrows
|
||||
.media-content:before,
|
||||
.reversed .media-content:before {
|
||||
content: '';
|
||||
left: -5px;
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
margin-left: 0;
|
||||
}
|
||||
.media-content:before {
|
||||
border-top: 5px solid transparent;
|
||||
border-right: 5px solid;
|
||||
border-right-color: inherit;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
.reversed .media-content:before {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
border-right: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid;
|
||||
border-left-color: inherit;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
// Set side padding for message bodies
|
||||
@media (min-width: @screen-sm) {
|
||||
.media {
|
||||
margin-right: 20%;
|
||||
|
||||
&.reversed {
|
||||
margin-right: 0;
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inversed message list
|
||||
// ------------------------------
|
||||
|
||||
.chat-list-inverse {
|
||||
.media-content {
|
||||
&:not([class*=bg-]) {
|
||||
color: #fff;
|
||||
background-color: @color-primary-400;
|
||||
border-color: @color-primary-400;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-right: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-right: 5px solid @color-primary-400;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Reversed message
|
||||
.reversed {
|
||||
.media-content {
|
||||
&:not([class*=bg-]) {
|
||||
background-color: #f5f5f5;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid #f5f5f5;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Error pages
|
||||
*
|
||||
* Styles for error and offline pages
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Default title
|
||||
.error-title {
|
||||
color: #fff;
|
||||
font-size: 200px;
|
||||
line-height: 1;
|
||||
margin-top: (@line-height-computed * 2);
|
||||
margin-bottom: (@line-height-computed * 2);
|
||||
font-weight: 300;
|
||||
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 fade(#000, 10%),
|
||||
0 0 5px fade(#000, 10%),
|
||||
0 1px 3px fade(#000, 30%),
|
||||
0 3px 5px fade(#000, 20%),
|
||||
0 5px 10px fade(#000, 25%),
|
||||
0 10px 10px fade(#000, 20%),
|
||||
0 20px 20px fade(#000, 15%);
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
font-size: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
// Title in offline page
|
||||
.offline-title {
|
||||
font-size: 160px;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
font-size: 90px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Invoice template
|
||||
*
|
||||
* General styles for invoice, mainly responsive setup
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Details list placement and alignment
|
||||
@media (min-width: @screen-sm) {
|
||||
.invoice-details,
|
||||
.invoice-payment-details > li span {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bottom margin from all lists
|
||||
.invoice-grid {
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Invoice grid
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
||||
// Align all text to left
|
||||
.invoice-grid {
|
||||
|
||||
// Remove right alignment
|
||||
.text-right {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
// Add vertical spacing to columns
|
||||
[class*=col-] + [class*=col-] {
|
||||
margin-top: @line-height-computed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Login and related forms
|
||||
*
|
||||
* Styles related to user login - logins, registration, password revovery, unlock etc.
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Cover image
|
||||
.login-cover {
|
||||
background: url('../images/login_cover.jpg') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
// Login container
|
||||
.login-container {
|
||||
|
||||
// Page container
|
||||
.page-container {
|
||||
padding-top: (@line-height-computed * 2);
|
||||
|
||||
// Add fixed width
|
||||
.login-form {
|
||||
width: 320px;
|
||||
|
||||
// Thumbnail
|
||||
.thumb {
|
||||
margin: 0 auto @line-height-computed auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Add vertical margin
|
||||
.login-form,
|
||||
.registration-form {
|
||||
margin: 0 auto @line-height-computed auto;
|
||||
|
||||
// Make it full width on mobile
|
||||
@media (max-width: @screen-xs) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.nav-tabs.nav-justified {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Nav items
|
||||
> li {
|
||||
|
||||
// Links
|
||||
> a {
|
||||
border-top: 0!important;
|
||||
padding-left: @content-padding-base;
|
||||
padding-right: @content-padding-base;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// Remove left border in first item
|
||||
&:first-child > a {
|
||||
border-left: 0;
|
||||
border-radius: @border-radius-base 0 0 0;
|
||||
}
|
||||
|
||||
// Remove right border in last item
|
||||
&:last-child > a {
|
||||
border-right: 0;
|
||||
border-radius: 0 @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
padding: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
border-radius: 0;
|
||||
|
||||
// Remove defalt text label
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Remove left borders
|
||||
> li > a {
|
||||
border-width: 0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive login options
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.login-options {
|
||||
&,
|
||||
.text-right {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # User profile
|
||||
*
|
||||
* Styles for all user profile layouts
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 6, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Cover image layout
|
||||
// ------------------------------
|
||||
|
||||
.profile-cover {
|
||||
position: relative;
|
||||
|
||||
// Add extra spacing to navbar
|
||||
& + .navbar {
|
||||
margin-bottom: (@line-height-computed * 2);
|
||||
}
|
||||
|
||||
// Cover details
|
||||
.media {
|
||||
position: absolute;
|
||||
bottom: @line-height-computed;
|
||||
left: @line-height-computed;
|
||||
right: @line-height-computed;
|
||||
|
||||
.btn-default {
|
||||
border-color: @btn-default-bg;
|
||||
.box-shadow(0 0 3px fade(#000, 50%));
|
||||
}
|
||||
}
|
||||
|
||||
// Text styles
|
||||
.media-body,
|
||||
small {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 3px fade(#000, 80%);
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.media {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
bottom: auto;
|
||||
top: (@line-height-computed * 2);
|
||||
}
|
||||
|
||||
.media-left,
|
||||
.media-right {
|
||||
padding: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
display: block;
|
||||
margin-bottom: @line-height-computed;
|
||||
width: 100%;
|
||||
|
||||
> h1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cover image
|
||||
.profile-cover-img {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 350px;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
// User thumbnail inside cover
|
||||
.media .profile-thumb img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 3px solid #fff;
|
||||
.box-shadow(0 0 3px fade(#000, 50%));
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Search
|
||||
*
|
||||
* Styles for search results and input
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 6, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Result details bottom spacing
|
||||
.search-results-list {
|
||||
.list-inline {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Related searches list
|
||||
.related-searches {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
padding: @panel-body-padding;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
// Results
|
||||
.website-search-results {
|
||||
padding: @line-height-computed;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
// Media preview size
|
||||
.media-preview {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: none;
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
// Search option buttons, below search field
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.search-option-buttons {
|
||||
text-align: center;
|
||||
|
||||
> .text-right {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Task manager
|
||||
*
|
||||
* Styles related to task manager - detailed task, list and grid
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Timer
|
||||
// ------------------------------
|
||||
|
||||
// Weekdays list
|
||||
.timer-weekdays {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
margin: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Change default label color
|
||||
.label-default {
|
||||
background-color: #ccc;
|
||||
border-color: #ccc;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @label-default-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Timer itself
|
||||
.timer {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
||||
> li {
|
||||
font-size: (@font-size-h2 * 2);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: @color-grey-700;
|
||||
font-weight: 300;
|
||||
|
||||
// Double dots
|
||||
&.dots {
|
||||
font-size: @font-size-h1;
|
||||
vertical-align: top;
|
||||
padding: (@font-size-h1 / 1.5) 0;
|
||||
}
|
||||
|
||||
// Subtitle
|
||||
> span {
|
||||
display: block;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// List with task details
|
||||
// ------------------------------
|
||||
|
||||
.task-details {
|
||||
float: right;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
float: none;
|
||||
margin-top: 15px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
margin-top: 0;
|
||||
|
||||
&:before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
> li {
|
||||
float: none;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
+ li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,459 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Timeline
|
||||
*
|
||||
* Styles for timeline in 3 layouts: left, right and centered
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Dec 11, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -(@timeline-line-width);
|
||||
background-color: @timeline-line-color;
|
||||
height: (@timeline-line-width * 2);
|
||||
width: (@timeline-line-width * 2);
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Container
|
||||
// ------------------------------
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding-top: (@line-height-computed / 2);
|
||||
margin-top: -(@line-height-computed / 2);
|
||||
padding-bottom: 1px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -(@timeline-line-width / 2);
|
||||
background-color: @timeline-line-color;
|
||||
height: 100%;
|
||||
width: @timeline-line-width;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Content
|
||||
// ------------------------------
|
||||
|
||||
// Row
|
||||
.timeline-row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Content
|
||||
.timeline-content {
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
|
||||
// Date
|
||||
// ------------------------------
|
||||
|
||||
.timeline-date {
|
||||
text-align: center;
|
||||
background-color: @body-bg;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: @line-height-computed;
|
||||
padding-bottom: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -(@timeline-line-width);
|
||||
background-color: @timeline-line-color;
|
||||
height: (@timeline-line-width * 2);
|
||||
width: (@timeline-line-width * 2);
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.panel & {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
.timeline-time {
|
||||
text-align: center;
|
||||
padding-top: @line-height-computed;
|
||||
padding-bottom: @line-height-computed;
|
||||
background-color: @body-bg;
|
||||
position: relative;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -(@timeline-line-width);
|
||||
background-color: @timeline-line-color;
|
||||
height: (@timeline-line-width * 2);
|
||||
width: (@timeline-line-width * 2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.panel & {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
|
||||
&:before {
|
||||
content: '•';
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Icon and image
|
||||
// ------------------------------
|
||||
|
||||
.timeline-icon {
|
||||
width: @timeline-icon-size;
|
||||
height: @timeline-icon-size;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto @line-height-computed auto;
|
||||
background-color: #fff;
|
||||
border: @timeline-icon-border-width solid @body-bg;
|
||||
|
||||
.panel & {
|
||||
border-color: @panel-bg;
|
||||
}
|
||||
|
||||
// Icon
|
||||
div {
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
.box-shadow(0 0 0 2px @timeline-line-color inset);
|
||||
|
||||
&[class*=bg-] {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
line-height: (@timeline-icon-size - (@timeline-icon-border-width * 2));
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
width: (@timeline-icon-size - (@timeline-icon-border-width * 2));
|
||||
height: (@timeline-icon-size - (@timeline-icon-border-width * 2));
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
|
||||
// Positions
|
||||
// ------------------------------
|
||||
|
||||
// Center layout
|
||||
.timeline-center {
|
||||
|
||||
// Row
|
||||
.timeline-row {
|
||||
margin-right: 50%;
|
||||
padding-right: (@timeline-icon-size - @timeline-icon-border-width);
|
||||
}
|
||||
|
||||
// Even post
|
||||
.post-even {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 50%;
|
||||
padding-left: (@timeline-icon-size - @timeline-icon-border-width);
|
||||
}
|
||||
|
||||
// Full width post
|
||||
.post-full {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.timeline-content {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
border-style: solid;
|
||||
border-color: @body-bg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-width: @timeline-icon-border-width 0 0 0;
|
||||
top: -(@timeline-icon-border-width + 1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-width: 0 0 @timeline-icon-border-width 0;
|
||||
bottom: -(@timeline-icon-border-width + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 + @line-height-computed);
|
||||
}
|
||||
}
|
||||
|
||||
// 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 + @line-height-computed);
|
||||
}
|
||||
}
|
||||
|
||||
// Reduce date vertical spacing in both
|
||||
.timeline-left .timeline-date,
|
||||
.timeline-right .timeline-date {
|
||||
padding-top: (@line-height-computed / 2);
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
|
||||
// Icon
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.timeline-icon {
|
||||
position: absolute;
|
||||
top: (@line-height-computed / 2);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@timeline-line-width / 2);
|
||||
height: @timeline-line-width;
|
||||
width: ((@timeline-icon-size / 2) - (@timeline-icon-border-width * 2));
|
||||
background-color: @timeline-line-color;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// In left layout
|
||||
.timeline-left {
|
||||
.timeline-icon {
|
||||
left: 0;
|
||||
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: @timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In right layout
|
||||
.timeline-right {
|
||||
.timeline-icon {
|
||||
right: 0;
|
||||
|
||||
&:after {
|
||||
right: 100%;
|
||||
margin-right: @timeline-icon-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In centered layout
|
||||
.timeline-center {
|
||||
|
||||
// Row
|
||||
.timeline-row {
|
||||
&:not(.post-full) .timeline-icon {
|
||||
left: 100%;
|
||||
margin-left: -(@timeline-icon-size / 2);
|
||||
}
|
||||
|
||||
&.post-even .timeline-icon {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: -(@timeline-icon-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Left horizontal line
|
||||
.timeline-icon:after {
|
||||
right: 100%;
|
||||
margin-right: @timeline-icon-border-width;
|
||||
}
|
||||
|
||||
// Right horizontal line
|
||||
.post-even .timeline-icon:after {
|
||||
left: 100%;
|
||||
margin-left: @timeline-icon-border-width;
|
||||
}
|
||||
|
||||
// Full width post
|
||||
.post-full .timeline-icon {
|
||||
position: static;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
.timeline-time {
|
||||
padding: 0;
|
||||
text-align: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// In left and right layouts
|
||||
.timeline-left,
|
||||
.timeline-right {
|
||||
.timeline-time {
|
||||
padding-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed);
|
||||
padding-left: (@line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
.timeline-right .timeline-time {
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
padding-right: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// In center layout
|
||||
.timeline-center {
|
||||
.timeline-time,
|
||||
.post-full .timeline-time {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: ((@line-height-computed / 2) + 5);
|
||||
width: 100%;
|
||||
padding-left: (@timeline-icon-size - @timeline-icon-border-width);
|
||||
}
|
||||
|
||||
.post-even,
|
||||
.post-full {
|
||||
.timeline-time {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: (@timeline-icon-size - @timeline-icon-border-width);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full .timeline-time {
|
||||
right: 50%;
|
||||
top: ((@line-height-computed / 2) - 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # User list
|
||||
*
|
||||
* Styles for user lists - layouts, contact details etc.
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Collapsible details
|
||||
// ------------------------------
|
||||
|
||||
.contact-details {
|
||||
padding: @content-padding-base;
|
||||
padding-left: (@content-padding-base * 2);
|
||||
background-color: #fcfcfc;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
|
||||
// Remove bottom border
|
||||
.media-list-bordered & {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// If inside panel body
|
||||
.panel-body > .media-list & {
|
||||
padding-left: @content-padding-base;
|
||||
background-color: transparent;
|
||||
margin-top: @content-padding-base;
|
||||
}
|
||||
.panel-body > .media-list-bordered & {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Remove margin from first list item
|
||||
> ul {
|
||||
&,
|
||||
> li:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user