first commit
This commit is contained in:
@@ -0,0 +1,146 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Blog layouts
|
||||
*
|
||||
* Blog layouts with various blog layouts
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Aug 1, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Common styles for all layouts
|
||||
//
|
||||
|
||||
.blog-horizontal {
|
||||
|
||||
// Remove bottom padding from panel body
|
||||
> .panel-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Make all title link color same as text color
|
||||
.blog-title {
|
||||
> a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
> .list-inline {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Stick thumb to the left and give it fixed width
|
||||
.thumb {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: 45%;
|
||||
float: left;
|
||||
margin-right: @content-padding-large;
|
||||
max-width: 400px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Layouts setup
|
||||
//
|
||||
|
||||
// Layout #1
|
||||
.blog-horizontal-1 {
|
||||
.thumb {
|
||||
margin-bottom: @content-padding-large;
|
||||
}
|
||||
|
||||
.blog-preview {
|
||||
margin-bottom: (@content-padding-large / 2);
|
||||
}
|
||||
|
||||
.panel-footer-transparent {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.thumb {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layout #2
|
||||
.blog-horizontal-2 {
|
||||
.thumb {
|
||||
margin-bottom: @content-padding-large;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blog-preview {
|
||||
margin-bottom: @content-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout #3
|
||||
.blog-horizontal-3 {
|
||||
.thumb,
|
||||
.blog-preview {
|
||||
margin-bottom: @content-padding-large;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-preview .list-inline {
|
||||
&,
|
||||
> li > a {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Media sizing
|
||||
//
|
||||
|
||||
// Mini
|
||||
.blog-horizontal-xs {
|
||||
.thumb {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: 35%;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Medium
|
||||
.blog-horizontal-sm {
|
||||
.thumb {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: 40%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.blog-horizontal-lg {
|
||||
.thumb {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: 50%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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,132 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ecommerce stuff
|
||||
*
|
||||
* Specific styles for Ecommerce set of pages
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Mar 19, 2017
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Elements
|
||||
// ------------------------------
|
||||
|
||||
// Size filter
|
||||
.row-labels {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
// Make labels slightly bigger
|
||||
.label {
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Color filter
|
||||
.row-colors {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
> div {
|
||||
text-align: center;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
padding: @content-padding-base;
|
||||
display: block;
|
||||
border-radius: @border-radius-base;
|
||||
color: #fff;
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -(@icon-font-size / 2) 0 0 -(@icon-font-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: @text-muted;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pricing tables
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.pricing-table {
|
||||
|
||||
// Price label
|
||||
.pricing-table-price {
|
||||
font-size: 42px;
|
||||
|
||||
// Currency sign
|
||||
> span {
|
||||
font-size: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// List of options
|
||||
ul > li {
|
||||
padding: @content-padding-base 0;
|
||||
border-bottom: 1px solid fade(#000, 10%);
|
||||
}
|
||||
div[class*=bg-] ul > li {
|
||||
border-color: fade(#fff, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// Single panel
|
||||
.pricing-table-panel {
|
||||
.pricing-table-body {
|
||||
@pricing-table-two-borders: 1px 0 0 @panel-inner-border, 0 1px 0 @panel-inner-border; // user shadow as a border
|
||||
|
||||
padding: @content-padding-large;
|
||||
text-align: center;
|
||||
.box-shadow(@pricing-table-two-borders);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ribbons
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.ribbon-container {
|
||||
width: 104px;
|
||||
height: 106px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
// Corner ribbon
|
||||
.ribbon {
|
||||
text-align: center;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
left: -11px;
|
||||
top: 25px;
|
||||
width: 150px;
|
||||
background-color: @color-success-500;
|
||||
color: #fff;
|
||||
letter-spacing: 0.25px;
|
||||
z-index: (@zindex-navbar - 1);
|
||||
.rotate(45deg);
|
||||
.box-shadow(0 4px 6px fade(#000, 10%));
|
||||
}
|
||||
@@ -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;
|
||||
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,117 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # 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);
|
||||
position: static;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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,58 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Search
|
||||
*
|
||||
* Styles for search results and input
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Add light grey color to input inside panel
|
||||
.panel .main-search input[type=text] {
|
||||
background-color: @color-grey-50;
|
||||
}
|
||||
|
||||
// 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: '\2022';
|
||||
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: '\2022';
|
||||
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