first commit
This commit is contained in:
@@ -0,0 +1,767 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Heading elmeents
|
||||
*
|
||||
* Display default and custom components in page header and panel heading
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
// Heading elements toggler
|
||||
.heading-elements-toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
}
|
||||
|
||||
// Breadcrumb toggler position
|
||||
.breadcrumb-elements-toggle {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
margin-top: ((((@breadcrumb-padding-vertical * 2) + @line-height-computed) - @icon-font-size) / 2);
|
||||
|
||||
// Stand alone component
|
||||
.breadcrumb-line-component & {
|
||||
margin-right: @grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Common styles for togglers
|
||||
.heading-elements-toggle,
|
||||
.breadcrumb-elements-toggle {
|
||||
|
||||
// Inherit colors
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Remove top edge frop icons
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Hide on desktop
|
||||
@media (min-width: @screen-sm-min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Heading elements base
|
||||
.heading-elements {
|
||||
background-color: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @grid-gutter-width;
|
||||
height: @input-height-base;
|
||||
margin-top: -(@input-height-base / 2);
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
&:not(.not-collapsible) {
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside panel
|
||||
//
|
||||
|
||||
// Inside panel body
|
||||
.panel-body {
|
||||
> .heading-elements {
|
||||
top: 0;
|
||||
margin-top: (@input-height-base - @content-padding-large - 2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
> .heading-elements-toggle {
|
||||
top: @panel-body-padding;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .heading-elements.visible-elements {
|
||||
top: ((@panel-body-padding * 2) + @icon-font-size);
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside panel footer
|
||||
.panel-footer {
|
||||
> .heading-elements {
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
padding-right: @content-padding-large;
|
||||
|
||||
// Clear floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside bordered panel footer
|
||||
&-bordered {
|
||||
> .heading-elements:not(.visible-elements) {
|
||||
margin-left: -(@content-padding-large);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
> .heading-elements:not(.not-collapsible) > .pull-right {
|
||||
float: none!important;
|
||||
}
|
||||
|
||||
// Toggle button
|
||||
.heading-elements-toggle {
|
||||
position: static;
|
||||
padding-top: @content-padding-small;
|
||||
padding-bottom: @content-padding-small;
|
||||
margin-top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Heading thumbnails
|
||||
//
|
||||
|
||||
.heading-thumbnails {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
|
||||
// Items
|
||||
> li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
|
||||
// Multiple items
|
||||
+ li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// Images
|
||||
img {
|
||||
height: auto;
|
||||
max-height: @input-height-base;
|
||||
max-width: 100%;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
.label,
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
border: 2px solid @panel-footer-bg;
|
||||
|
||||
// Inside transparent panel footer
|
||||
.panel-default > .panel-heading &,
|
||||
.panel-footer-transparent & {
|
||||
border-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Status mark
|
||||
.status-mark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 0 2px @panel-footer-bg;
|
||||
|
||||
// Add background color if circle
|
||||
&[class*=border-] {
|
||||
background-color: @panel-footer-bg;
|
||||
|
||||
// Inside transparent panel footer
|
||||
.panel-default > .panel-heading &,
|
||||
.panel-footer-transparent & {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside transparent panel footer
|
||||
.panel-default > .panel-heading &,
|
||||
.panel-footer-transparent & {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Elements
|
||||
// -------------------------
|
||||
|
||||
.heading-elements {
|
||||
|
||||
// Element's horizontal spacing
|
||||
.heading-btn + .heading-btn,
|
||||
.page-header & .icons-list > li + li,
|
||||
.thumbnail-heading & .icons-list > li + li {
|
||||
margin-left: (@content-padding-large / 2);
|
||||
}
|
||||
|
||||
// Button link inside dark page header
|
||||
.page-header-inverse & {
|
||||
.btn-link {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// List
|
||||
.list-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Breadcrumb inside page header
|
||||
.breadcrumb {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Align text left in panel tabs/pills
|
||||
&.panel-nav {
|
||||
.nav > li > a {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom date range display
|
||||
.daterange-custom {
|
||||
margin-top: ((@input-height-base - 28px) / 2); // half of elements general height - font size
|
||||
}
|
||||
|
||||
// Button group
|
||||
.heading-btn-group {
|
||||
font-size: 0;
|
||||
|
||||
> .btn + .btn:not(.btn-link) {
|
||||
margin-left: (@content-padding-large / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide elements on mobile, but display them
|
||||
// when toggle button is clicked
|
||||
&.visible-elements {
|
||||
text-align: center;
|
||||
|
||||
// Add vertical spacing
|
||||
.heading-text,
|
||||
.heading-btn,
|
||||
.heading-btn-group > .btn,
|
||||
.ui-slider,
|
||||
.noui-slider,
|
||||
.nav-tabs,
|
||||
.nav-pills,
|
||||
.pagination,
|
||||
.progress,
|
||||
.icons-list,
|
||||
.pager,
|
||||
.breadcrumb,
|
||||
.daterange-custom,
|
||||
.heading-thumbnails,
|
||||
.heading-form .form-group,
|
||||
> .btn-group {
|
||||
margin-top: @line-height-computed;
|
||||
}
|
||||
|
||||
// Remove bottom margin from tabs/pills
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Heading text
|
||||
.heading-text:not(.label):not(.badge) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Make selects full width
|
||||
.select2-container,
|
||||
.selectboxit-container,
|
||||
.selectboxit-options,
|
||||
.multiselect + .btn-group,
|
||||
div.bootstrap-select {
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
// Static position
|
||||
.input-group,
|
||||
.input-group-btn,
|
||||
.btn-group,
|
||||
.dropdown,
|
||||
.dropup {
|
||||
position: static;
|
||||
}
|
||||
|
||||
// Make dropdown menus full width
|
||||
.dropdown-menu:not(.multiselect-container) {
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
margin-top: 0;
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
// Multiselect container is not full width
|
||||
.multiselect-container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Make them visible-elements starting from tablet
|
||||
// or on mobile if container is not collapsible
|
||||
&:not(.visible-elements) {
|
||||
|
||||
// Make them inline
|
||||
.heading-text,
|
||||
.heading-btn,
|
||||
.ui-slider,
|
||||
.noui-slider,
|
||||
.nav-tabs,
|
||||
.nav-pills,
|
||||
.pagination,
|
||||
.progress,
|
||||
.icons-list,
|
||||
.breadcrumb,
|
||||
.pager,
|
||||
.heading-form,
|
||||
.daterange-custom,
|
||||
.heading-thumbnails,
|
||||
> .btn-group {
|
||||
float: left;
|
||||
margin-left: @content-padding-large;
|
||||
}
|
||||
|
||||
// Heading text
|
||||
.heading-text {
|
||||
display: inline-block;
|
||||
|
||||
& + .heading-text {
|
||||
margin-left: @content-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements width
|
||||
.selectbox-fixed + .selectboxit-container,
|
||||
.selectbox-fixed + .selectboxit-options,
|
||||
.progress,
|
||||
.ui-slider,
|
||||
.noui-slider,
|
||||
.input-group,
|
||||
.selectboxit-container .selectboxit-options,
|
||||
.uploader,
|
||||
.heading-form .form-control {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
|
||||
// Elements sizes spacing
|
||||
// ------------------------------
|
||||
|
||||
// Small elements corrections
|
||||
.select-sm,
|
||||
.input-sm,
|
||||
.input-group-sm,
|
||||
.uploader-sm,
|
||||
.pagination-sm,
|
||||
.pager-sm,
|
||||
.selectbox-sm + .selectboxit-container,
|
||||
.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
margin-top: (@input-height-base - @input-height-small) / 2;
|
||||
}
|
||||
|
||||
// Mini elements corrections
|
||||
.select-xs,
|
||||
.input-xs,
|
||||
.input-group-xs,
|
||||
.uploader-xs,
|
||||
.pagination-xs,
|
||||
.pager-xs,
|
||||
.selectbox-xs + .selectboxit-container,
|
||||
.btn-xs,
|
||||
.btn-group-xs > .btn {
|
||||
margin-top: (@input-height-base - @input-height-mini) / 2;
|
||||
}
|
||||
|
||||
// Floating buttons
|
||||
.btn-float {
|
||||
margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + 2)) / 2) - 1); // Difference between base height and button height
|
||||
|
||||
// If has text
|
||||
&.has-text {
|
||||
margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + @line-height-computed + 5)) / 2) - 1); // Difference between base height and button height with text
|
||||
}
|
||||
|
||||
// If float link
|
||||
&.btn-link {
|
||||
margin-top: (((@input-height-base - (@icon-font-size + @line-height-computed + (@btn-float-padding * 2) - 6)) / 2) - 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Sliders
|
||||
.ui-slider,
|
||||
.noui-slider {
|
||||
margin-top: ((@input-height-base - @slider-base-size) / 2);
|
||||
|
||||
&-lg {
|
||||
margin-top: ((@input-height-base - @slider-large-size) / 2);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
margin-top: ((@input-height-base - @slider-small-size) / 2);
|
||||
}
|
||||
|
||||
&-xs {
|
||||
margin-top: ((@input-height-base - @slider-mini-size) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
.progress {
|
||||
margin-top: ((@input-height-base - @progress-base-height) / 2);
|
||||
|
||||
// Large
|
||||
&-lg {
|
||||
margin-top: ((@input-height-base - @progress-large-height) / 2);
|
||||
}
|
||||
|
||||
// Small
|
||||
&-sm {
|
||||
margin-top: ((@input-height-base - @progress-small-height) / 2);
|
||||
}
|
||||
|
||||
// Mini
|
||||
&-xs {
|
||||
margin-top: ((@input-height-base - @progress-mini-height) / 2);
|
||||
}
|
||||
|
||||
// Tiny
|
||||
&-xxs {
|
||||
margin-top: ((@input-height-base - @progress-tiny-height) / 2);
|
||||
}
|
||||
|
||||
// Micro
|
||||
&-micro {
|
||||
margin-top: ((@input-height-base - @progress-micro-height) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Icons list
|
||||
.icons-list {
|
||||
margin-top: ((@input-height-base - @icon-font-size) / 2);
|
||||
}
|
||||
|
||||
// Text
|
||||
.heading-text {
|
||||
margin-top: ((@input-height-base - @line-height-computed) / 2);
|
||||
}
|
||||
|
||||
// Panel navs
|
||||
&.panel-nav {
|
||||
|
||||
// Navs
|
||||
> .nav {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Desktop view
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Navs
|
||||
> .nav {
|
||||
margin-top: ((@input-height-base - (((@padding-base-vertical + 2) * 2) + @line-height-computed)) / 2);
|
||||
}
|
||||
|
||||
// Tabs
|
||||
> .nav-tabs {
|
||||
border-bottom-width: 0;
|
||||
|
||||
// Remove active state highlight
|
||||
&.nav-tabs-bottom > li.active > a:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Small pills
|
||||
> .nav-sm {
|
||||
margin-top: ((@input-height-base - ((@padding-small-vertical * 2) + @line-height-computed)) / 2);
|
||||
}
|
||||
|
||||
// Mini pills
|
||||
> .nav-xs {
|
||||
margin-top: ((@input-height-base - (((@padding-xs-vertical - 2) * 2) + @line-height-computed)) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
position: static;
|
||||
height: auto;
|
||||
|
||||
// Navs
|
||||
> .nav {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Inside panel heading
|
||||
.panel-heading & {
|
||||
margin-top: @content-padding-base;
|
||||
|
||||
// Inside flat panel
|
||||
.panel-flat & {
|
||||
margin-top: @content-padding-large;
|
||||
}
|
||||
|
||||
// Navs
|
||||
> .nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Add vertical margin if container is not collapsible
|
||||
.panel-footer &.not-collapsible {
|
||||
> .nav {
|
||||
margin-top: @line-height-computed - @padding-base-vertical;
|
||||
margin-bottom: @line-height-computed - @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Heading form
|
||||
// -------------------------
|
||||
|
||||
.heading-form {
|
||||
|
||||
// Form group
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Switchery
|
||||
.checkbox-switchery {
|
||||
&,
|
||||
&[class*="switchery-"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// If container is not collapsible
|
||||
.heading-elements:not(.visible-elements) & {
|
||||
|
||||
// Radios and checkboxes
|
||||
.checkbox-inline,
|
||||
.radio-inline {
|
||||
margin-top: ((@input-height-base - @line-height-computed) / 2);
|
||||
}
|
||||
|
||||
// Checkbox switch
|
||||
.checkbox-switch {
|
||||
|
||||
// Those 2 pixels that are used in Switch styles as negative top margin. In fact, switch height is equal to heading elements container height.
|
||||
// They will be added below to calculate the difference
|
||||
margin-top: 2px;
|
||||
|
||||
// Small
|
||||
&-sm {
|
||||
margin-top: ((@input-height-base - @input-height-small) / 2) + 2;
|
||||
}
|
||||
|
||||
// Mini
|
||||
&-xs {
|
||||
margin-top: ((@input-height-base - @input-height-mini) / 2) + 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Input group
|
||||
.input-group {
|
||||
max-width: 220px;
|
||||
|
||||
// Inputs
|
||||
.form-control {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
&.input-group-sm .btn,
|
||||
&.input-group-xs .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup desktop view
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Form group
|
||||
.form-group {
|
||||
float: left;
|
||||
|
||||
// Multiple groups
|
||||
& + .form-group {
|
||||
margin-left: @content-padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle elements visibility
|
||||
// ------------------------------
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
||||
// Heading elements
|
||||
.heading-elements,
|
||||
.breadcrumb-elements {
|
||||
|
||||
// If collapsible
|
||||
&:not(.not-collapsible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show on click
|
||||
&.visible-elements {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Visible elements parent container
|
||||
.has-visible-elements {
|
||||
|
||||
// All panels
|
||||
.panel & {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Flat panel
|
||||
.panel-flat .panel-heading& {
|
||||
padding-bottom: @content-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Visible elements container
|
||||
.visible-elements {
|
||||
|
||||
// Inside panels
|
||||
.panel & {
|
||||
border-top: 1px solid @panel-default-border;
|
||||
padding: @content-padding-large;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Inside panel heading
|
||||
.panel-heading & {
|
||||
margin: @content-padding-base -(@content-padding-large) 0 -(@content-padding-large);
|
||||
background-color: darken(@panel-bg, 1%);
|
||||
|
||||
// In flat panel
|
||||
.panel-flat & {
|
||||
margin-top: @content-padding-large;
|
||||
border-bottom: 1px solid @panel-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside panel footer
|
||||
.panel-footer & {
|
||||
margin-top: @padding-base-vertical;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Inside condensed panel footer
|
||||
.panel-footer-condensed & {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// Inside transparent panel footer
|
||||
.panel-footer-transparent & {
|
||||
margin-top: @content-padding-large - ((@input-height-base - @line-height-computed) / 2);
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
|
||||
// Inside colored panels
|
||||
.panel[class*=bg-] &,
|
||||
.panel-heading[class*=bg-] &,
|
||||
.panel-primary &,
|
||||
.panel-danger &,
|
||||
.panel-success &,
|
||||
.panel-warning &,
|
||||
.panel-info & {
|
||||
border-color: fade(#fff, 20%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
|
||||
// Breadcrumb elements
|
||||
&.breadcrumb-elements {
|
||||
&.not-collapsible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside page header
|
||||
.page-header-content > & {
|
||||
background-color: @body-bg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid darken(@body-bg, 10%);
|
||||
z-index: (@zindex-navbar + 2);
|
||||
padding-bottom: @line-height-computed;
|
||||
margin-left: -(@grid-gutter-width);
|
||||
margin-right: -(@grid-gutter-width);
|
||||
padding-left: @grid-gutter-width;
|
||||
padding-right: @grid-gutter-width;
|
||||
|
||||
// Inside default page header
|
||||
.page-header-default & {
|
||||
background-color: darken(@page-header-default-bg, 1%);
|
||||
border-color: @panel-default-border;
|
||||
}
|
||||
|
||||
// Inside inverse page header
|
||||
.page-header-inverse & {
|
||||
background-color: fade(#000, 10%);
|
||||
border-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,544 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Helper classes
|
||||
*
|
||||
* Custom helper classes
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 20, 2017
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Content helpers
|
||||
// -------------------------
|
||||
|
||||
// Shadow
|
||||
.no-shadow {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity-75 {
|
||||
.opacity(0.75);
|
||||
}
|
||||
.opacity-50 {
|
||||
.opacity(0.5);
|
||||
}
|
||||
.opacity-25 {
|
||||
.opacity(0.25);
|
||||
}
|
||||
.opacity-0 {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Edges
|
||||
.no-edge-top {
|
||||
top: 0;
|
||||
}
|
||||
.no-edge-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.no-edge-left {
|
||||
left: 0;
|
||||
}
|
||||
.no-edge-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Aligning elements right on different screens
|
||||
.text-right-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.text-right-md {
|
||||
@media (min-width: @screen-md-min) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.text-right-sm {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.text-right-xs {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Pulling elements right on different screens
|
||||
.pull-right-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.pull-right-md {
|
||||
@media (min-width: @screen-md-min) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.pull-right-sm {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.pull-right-xs {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical alignment
|
||||
.valign-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.valign-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.valign-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.valign-baseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.valign-text-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.valign-text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
// Positions
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
.position-static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
// Display elements
|
||||
.display-block,
|
||||
label.display-block {
|
||||
display: block;
|
||||
}
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Cursors
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cursor-move {
|
||||
cursor: move;
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Overflow
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Content group
|
||||
.content-group-xs {
|
||||
margin-bottom: (@line-height-computed - 10)!important;
|
||||
}
|
||||
.content-group-sm {
|
||||
margin-bottom: (@line-height-computed - 5)!important;
|
||||
}
|
||||
.content-group {
|
||||
margin-bottom: (@line-height-computed)!important;
|
||||
}
|
||||
.content-group-lg {
|
||||
margin-bottom: (@line-height-computed + 10)!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Margins
|
||||
// -------------------------
|
||||
|
||||
// Remove margins
|
||||
.no-margin {
|
||||
margin: 0!important;
|
||||
}
|
||||
.no-margin-top {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
.no-margin-bottom {
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
.no-margin-left {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
.no-margin-right {
|
||||
margin-right: 0!important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Add margins
|
||||
//
|
||||
|
||||
// All sides
|
||||
.m-5 {
|
||||
margin: 5px!important;
|
||||
}
|
||||
.m-10 {
|
||||
margin: 10px!important;
|
||||
}
|
||||
.m-15 {
|
||||
margin: 15px!important;
|
||||
}
|
||||
.m-20 {
|
||||
margin: 20px!important;
|
||||
}
|
||||
|
||||
// Top
|
||||
.mt-5 {
|
||||
margin-top: 5px!important;
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top: 10px!important;
|
||||
}
|
||||
.mt-15 {
|
||||
margin-top: 15px!important;
|
||||
}
|
||||
.mt-20 {
|
||||
margin-top: 20px!important;
|
||||
}
|
||||
|
||||
// Bottom
|
||||
.mb-5 {
|
||||
margin-bottom: 5px!important;
|
||||
}
|
||||
.mb-10 {
|
||||
margin-bottom: 10px!important;
|
||||
}
|
||||
.mb-15 {
|
||||
margin-bottom: 15px!important;
|
||||
}
|
||||
.mb-20 {
|
||||
margin-bottom: 20px!important;
|
||||
}
|
||||
|
||||
// Left
|
||||
.ml-5 {
|
||||
margin-left: 5px!important;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 10px!important;
|
||||
}
|
||||
.ml-15 {
|
||||
margin-left: 15px!important;
|
||||
}
|
||||
.ml-20 {
|
||||
margin-left: 20px!important;
|
||||
}
|
||||
|
||||
// Right
|
||||
.mr-5 {
|
||||
margin-right: 5px!important;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 10px!important;
|
||||
}
|
||||
.mr-15 {
|
||||
margin-right: 15px!important;
|
||||
}
|
||||
.mr-20 {
|
||||
margin-right: 20px!important;
|
||||
}
|
||||
|
||||
|
||||
// Paddings
|
||||
// -------------------------
|
||||
|
||||
// Remove paddings
|
||||
.no-padding {
|
||||
padding: 0!important;
|
||||
}
|
||||
.no-padding-top {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
.no-padding-bottom {
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
.no-padding-left {
|
||||
padding-left: 0!important;
|
||||
}
|
||||
.no-padding-right {
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Add paddings
|
||||
//
|
||||
|
||||
// All sides
|
||||
.p-5 {
|
||||
padding: 5px!important;
|
||||
}
|
||||
.p-10 {
|
||||
padding: 10px!important;
|
||||
}
|
||||
.p-15 {
|
||||
padding: 15px!important;
|
||||
}
|
||||
.p-20 {
|
||||
padding: 20px!important;
|
||||
}
|
||||
|
||||
// Top
|
||||
.pt-5 {
|
||||
padding-top: 5px!important;
|
||||
}
|
||||
.pt-10 {
|
||||
padding-top: 10px!important;
|
||||
}
|
||||
.pt-15 {
|
||||
padding-top: 15px!important;
|
||||
}
|
||||
.pt-20 {
|
||||
padding-top: 20px!important;
|
||||
}
|
||||
|
||||
// Bottom
|
||||
.pb-5 {
|
||||
padding-bottom: 5px!important;
|
||||
}
|
||||
.pb-10 {
|
||||
padding-bottom: 10px!important;
|
||||
}
|
||||
.pb-15 {
|
||||
padding-bottom: 15px!important;
|
||||
}
|
||||
.pb-20 {
|
||||
padding-bottom: 20px!important;
|
||||
}
|
||||
|
||||
// Left
|
||||
.pl-5 {
|
||||
padding-left: 5px!important;
|
||||
}
|
||||
.pl-10 {
|
||||
padding-left: 10px!important;
|
||||
}
|
||||
.pl-15 {
|
||||
padding-left: 15px!important;
|
||||
}
|
||||
.pl-20 {
|
||||
padding-left: 20px!important;
|
||||
}
|
||||
|
||||
// Right
|
||||
.pr-5 {
|
||||
padding-right: 5px!important;
|
||||
}
|
||||
.pr-10 {
|
||||
padding-right: 10px!important;
|
||||
}
|
||||
.pr-15 {
|
||||
padding-right: 15px!important;
|
||||
}
|
||||
.pr-20 {
|
||||
padding-right: 20px!important;
|
||||
}
|
||||
|
||||
|
||||
// Borders
|
||||
// -------------------------
|
||||
|
||||
// Remove borders
|
||||
.no-border {
|
||||
border: 0!important;
|
||||
}
|
||||
.no-border-top {
|
||||
border-top: 0!important;
|
||||
}
|
||||
.no-border-bottom {
|
||||
border-bottom: 0!important;
|
||||
}
|
||||
.no-border-left {
|
||||
border-left: 0!important;
|
||||
}
|
||||
.no-border-right {
|
||||
border-right: 0!important;
|
||||
}
|
||||
|
||||
// Remove border radius
|
||||
.no-border-radius {
|
||||
border-radius: 0;
|
||||
}
|
||||
.no-border-radius-top {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
.no-border-radius-bottom {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
.no-border-radius-left {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
.no-border-radius-right {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
|
||||
// Add border radius
|
||||
.border-radius {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.border-radius-top {
|
||||
.border-top-radius(@border-radius-base);
|
||||
}
|
||||
.border-radius-bottom {
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
}
|
||||
.border-radius-left {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
.border-radius-right {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
|
||||
// Add borders
|
||||
.border-top {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.border-left {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Border widths
|
||||
//
|
||||
|
||||
// Large
|
||||
.border-lg {
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-top-lg {
|
||||
border-top: 2px solid;
|
||||
}
|
||||
.border-bottom-lg {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
.border-left-lg {
|
||||
border-left: 2px solid;
|
||||
}
|
||||
.border-right-lg {
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
// XLarge
|
||||
.border-xlg {
|
||||
border-width: 3px;
|
||||
}
|
||||
.border-top-xlg {
|
||||
border-top: 3px solid;
|
||||
}
|
||||
.border-bottom-xlg {
|
||||
border-bottom: 3px solid;
|
||||
}
|
||||
.border-left-xlg {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.border-right-xlg {
|
||||
border-right: 3px solid;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// -------------------------
|
||||
|
||||
//
|
||||
// Element widths
|
||||
//
|
||||
|
||||
// Full width
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Fixed widths
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.width-200 {
|
||||
min-width: 200px;
|
||||
}
|
||||
.width-250 {
|
||||
min-width: 250px;
|
||||
}
|
||||
.width-300 {
|
||||
min-width: 300px;
|
||||
}
|
||||
.width-350 {
|
||||
min-width: 350px;
|
||||
}
|
||||
.width-400 {
|
||||
min-width: 400px;
|
||||
}
|
||||
.width-450 {
|
||||
min-width: 450px;
|
||||
}
|
||||
.width-500 {
|
||||
min-width: 500px;
|
||||
}
|
||||
.width-550 {
|
||||
min-width: 550px;
|
||||
}
|
||||
.width-600 {
|
||||
min-width: 600px;
|
||||
}
|
||||
.width-650 {
|
||||
min-width: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Image sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.img-lg {
|
||||
width: 44px!important;
|
||||
height: 44px!important;
|
||||
}
|
||||
|
||||
// Medium
|
||||
.img-md {
|
||||
width: 40px!important;
|
||||
height: 40px!important;
|
||||
}
|
||||
|
||||
// Small
|
||||
.img-sm {
|
||||
width: 36px!important;
|
||||
height: 36px!important;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.img-xs {
|
||||
width: 32px!important;
|
||||
height: 32px!important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Mail list
|
||||
*
|
||||
* Inbox page - list, read and write
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Dev 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Inbox table
|
||||
// ------------------------------
|
||||
|
||||
.table-inbox {
|
||||
table-layout: fixed;
|
||||
|
||||
// Rows and cells
|
||||
tr {
|
||||
td {
|
||||
cursor: pointer;
|
||||
background-color: #fafafa;
|
||||
|
||||
// Remove left padding in all cells except first
|
||||
&:not(:first-child) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// New mail
|
||||
&.unread {
|
||||
font-weight: 700;
|
||||
|
||||
// Change background color to white
|
||||
td {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cell with checkbox
|
||||
.table-inbox-checkbox {
|
||||
width: ((@content-padding-large * 2) + @checkbox-size);
|
||||
}
|
||||
|
||||
// Set fixed width to star and atachment cells
|
||||
.table-inbox-star,
|
||||
.table-inbox-attachment {
|
||||
width: (@content-padding-large + @icon-font-size);
|
||||
}
|
||||
|
||||
// User image cell
|
||||
.table-inbox-image {
|
||||
width: (@content-padding-large + (((@line-height-computed - @icon-font-size + @padding-xs-vertical) - 1) * 2) + @icon-font-size);
|
||||
}
|
||||
|
||||
// Sender name
|
||||
.table-inbox-name {
|
||||
width: 180px;
|
||||
&:extend(.table-inbox .table-inbox-message);
|
||||
}
|
||||
|
||||
// Message
|
||||
.table-inbox-message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Message preview
|
||||
.table-inbox-preview {
|
||||
font-weight: normal;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Time cell
|
||||
.table-inbox-time {
|
||||
text-align: right;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
min-width: @screen-xs;
|
||||
|
||||
// Allow text to wrap
|
||||
.table-inbox-message {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Message subject
|
||||
.table-inbox-subject {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Hide star, attachment and image cells
|
||||
.table-inbox-star,
|
||||
.table-inbox-attachment,
|
||||
.table-inbox-image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout parts
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Details
|
||||
//
|
||||
|
||||
// Read
|
||||
.mail-details-read {
|
||||
margin: 0;
|
||||
padding: @panel-body-padding;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// Write
|
||||
.mail-details-write {
|
||||
margin: 0;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
|
||||
// Padding fr label
|
||||
.control-label {
|
||||
padding: @content-padding-small @content-padding-large;
|
||||
}
|
||||
|
||||
// Input style
|
||||
.form-control {
|
||||
border-width: 0;
|
||||
padding: @content-padding-small @content-padding-large;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Container
|
||||
//
|
||||
|
||||
// Read
|
||||
.mail-container-read {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
padding: @panel-body-padding;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// Write
|
||||
.mail-container-write {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
|
||||
// Summernote editor container
|
||||
.note-editor {
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Attachments
|
||||
//
|
||||
|
||||
// Container
|
||||
.mail-attachments-container {
|
||||
padding: @content-padding-large;
|
||||
padding-top: (@content-padding-large / 2);
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// Heading
|
||||
.mail-attachments-heading {
|
||||
margin-top: (@content-padding-large / 2);
|
||||
margin-bottom: (@content-padding-large / 2);
|
||||
}
|
||||
|
||||
// Attachments list
|
||||
.mail-attachments {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
list-style: none;
|
||||
|
||||
// List item
|
||||
> li {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid @panel-inner-border;
|
||||
border-radius: @border-radius-base;
|
||||
margin-top: (@content-padding-large / 2);
|
||||
margin-right: (@content-padding-large / 2);
|
||||
}
|
||||
|
||||
// Preview icon
|
||||
.mail-attachments-preview {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
// Icon
|
||||
> i {
|
||||
top: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Item content
|
||||
.mail-attachments-content {
|
||||
margin-left: (@icon-font-size * 2) + @content-padding-base;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Snippets
|
||||
*
|
||||
* Custom snippets set
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Progress list
|
||||
// ------------------------------
|
||||
|
||||
.progress-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
+ li {
|
||||
margin-top: @line-height-computed;
|
||||
}
|
||||
|
||||
> label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Toolbars
|
||||
*
|
||||
* Custom toolbars, mainly based on navbar component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Dec 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
.panel-toolbar-inbox {
|
||||
background-color: #fcfcfc;
|
||||
|
||||
// Add top border radius if first in panel
|
||||
.panel > &:first-child {
|
||||
.border-top-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Make navbar transparent
|
||||
> .navbar {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Make default buttons white in default navbar
|
||||
> .navbar-default {
|
||||
.btn-default {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Desktop view
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
padding-top: (@line-height-computed / 2);
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user