first commit
This commit is contained in:
474
libraries/framework/skin/base/components/content_trays.less
Normal file
474
libraries/framework/skin/base/components/content_trays.less
Normal file
@@ -0,0 +1,474 @@
|
||||
/* ==============================================
|
||||
Content Trays
|
||||
A. Trays
|
||||
B. Tray Sizes
|
||||
C. Tray Bin
|
||||
D. Misc Tray Helpers
|
||||
E. Tray Navigation
|
||||
F. Tray Hover Settings
|
||||
=================================================
|
||||
A. Content Trays
|
||||
================================================= */
|
||||
|
||||
/*tray table layout*/
|
||||
#content.table-layout {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content.table-layout > div,
|
||||
#content.table-layout > section {
|
||||
vertical-align: top;
|
||||
padding: 25px 20px 50px;
|
||||
}
|
||||
#content.table-layout > aside {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*trays*/
|
||||
.tray-left,
|
||||
.tray-right {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
min-height: 100%;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #DDD;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/*Right tray*/
|
||||
.tray-right {
|
||||
border-left: 1px solid #DDD;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
/*Top tray*/
|
||||
.tray-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background-color: #f2f2f2;
|
||||
padding: 15px;
|
||||
}
|
||||
.tray-top.light {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
B. Tray Sizes
|
||||
================================================= */
|
||||
.tray200 {
|
||||
width: 200px;
|
||||
}
|
||||
.tray240 {
|
||||
width: 240px;
|
||||
}
|
||||
.tray270 {
|
||||
width: 270px;
|
||||
}
|
||||
.tray290 {
|
||||
width: 290px;
|
||||
}
|
||||
.tray300 {
|
||||
width: 300px;
|
||||
}
|
||||
.tray320 {
|
||||
width: 320px;
|
||||
}
|
||||
.tray350 {
|
||||
width: 350px;
|
||||
}
|
||||
.tray400 {
|
||||
width: 400px;
|
||||
}
|
||||
/* affixed tray widths - we subtract 1px to make
|
||||
* sure the parent left/right border is display */
|
||||
.tray200 .tray-nav.affix {
|
||||
width: 199px;
|
||||
}
|
||||
.tray200 .tray-nav.affix {
|
||||
width: 239px;
|
||||
}
|
||||
.tray270 .tray-nav.affix {
|
||||
width: 269px;
|
||||
}
|
||||
.tray290 .tray-nav.affix {
|
||||
width: 289px;
|
||||
}
|
||||
.tray300 .tray-nav.affix {
|
||||
width: 299px;
|
||||
}
|
||||
.tray320 .tray-nav.affix {
|
||||
width: 319px;
|
||||
}
|
||||
.tray350 .tray-nav.affix {
|
||||
width: 349px;
|
||||
}
|
||||
.tray400 .tray-nav.affix {
|
||||
width: 399px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
C. Tray Bin
|
||||
================================================= */
|
||||
|
||||
/* tray bin - great for organizing buttons and links
|
||||
* negative margin added to counter parent tray padding
|
||||
*/
|
||||
.tray-bin {
|
||||
min-height: 65px;
|
||||
padding: 7px;
|
||||
margin: 0 -15px 15px;
|
||||
border: 1px dashed #CCC;
|
||||
background: #eee;
|
||||
}
|
||||
.tray-bin.stretch {
|
||||
border-left: 0;
|
||||
border-right: 0
|
||||
}
|
||||
/*If navbar has a contextual bg we make menu links white*/
|
||||
.tray-bin div[class*='col-'] {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/*traybin divider text. Used primarily in li navs*/
|
||||
.tray-bin .nav-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: @muted;
|
||||
padding-left: 5px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
D. Misc Tray Helpers
|
||||
================================================= */
|
||||
|
||||
/* often used as first title in tray */
|
||||
.tray-title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 5px 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Icon list commonly seen in tray header */
|
||||
.icon-list {
|
||||
margin: 20px 0 30px;
|
||||
font-size: 14px;
|
||||
padding-left: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
.icon-list li + li {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
E. Tray Navigation
|
||||
================================================= */
|
||||
/* tray navigation - negative margin added
|
||||
* to counter parent tray padding
|
||||
*/
|
||||
ul.tray-nav {
|
||||
margin: 15px -15px;
|
||||
}
|
||||
/* item link */
|
||||
ul.tray-nav li a {
|
||||
width: 100%;
|
||||
padding: 11px 15px 11px 30px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
background: #f2f2f2;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
/* item icon */
|
||||
ul.tray-nav li a .fa {
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
/* active item */
|
||||
ul.tray-nav li.active a {
|
||||
color: #666;
|
||||
background: #fbfbfb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* active item icon */
|
||||
ul.tray-nav li.active a .fa {
|
||||
color:@tray-nav-active-icon;
|
||||
}
|
||||
|
||||
/*Tray nav style option - Arrow*/
|
||||
|
||||
/* active item bottom border */
|
||||
ul.tray-nav.tray-nav-arrow li.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
ul.tray-nav.tray-nav-arrow li.active a:before,
|
||||
ul.tray-nav.tray-nav-arrow li.active a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-left: 20px solid;
|
||||
border-left-color: #fbfbfb;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
ul.tray-nav.tray-nav-arrow li.active a:before {
|
||||
border-left-color: #888;
|
||||
}
|
||||
|
||||
/* item hover */
|
||||
ul.tray-nav.tray-nav-arrow li:hover a:after {
|
||||
border-left-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/*settings for arrows when used on a right aligned tray (.tray-right)*/
|
||||
|
||||
/* active item bottom border */
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active:before {
|
||||
width: 100%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before,
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:after {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
border-right: 20px solid;
|
||||
border-left-color: transparent;
|
||||
border-right-color: #fbfbfb;
|
||||
}
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before {
|
||||
border-left-color: transparent;
|
||||
border-right-color: #888;
|
||||
}
|
||||
|
||||
/* item hover */
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li:hover a:after {
|
||||
border-left-color: transparent;
|
||||
border-right-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/*Tray nav style option - Bordered*/
|
||||
.tray-nav.tray-nav-border li {
|
||||
position: relative;
|
||||
}
|
||||
.tray-nav.tray-nav-border li a {
|
||||
font-size: 14px;
|
||||
padding: 12px 15px 12px 23px;
|
||||
}
|
||||
.tray-nav.tray-nav-border li:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #CCC;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active:after {
|
||||
background: @tray-nav-active-border;
|
||||
}
|
||||
.tray-nav.tray-nav-border li:hover:after {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/*modifcation for right side trays (.tray-right)*/
|
||||
.tray-right .tray-nav.tray-nav-border li:after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/*border skin contextuals*/
|
||||
.tray-nav.tray-nav-border li.active.nav-primary:after {
|
||||
background: @brand-primary;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-success:after {
|
||||
background: @brand-success;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-info:after {
|
||||
background: @brand-info;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-warning:after {
|
||||
background: @brand-warning;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-danger:after {
|
||||
background: @brand-danger;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-alert:after {
|
||||
background: @brand-alert;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-system:after {
|
||||
background: @brand-system;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-dark:after {
|
||||
background: @brand-dark;
|
||||
}
|
||||
|
||||
/* Tray elements fixed settings */
|
||||
.tray-nav.affix,
|
||||
.tray .tray-affix {
|
||||
top: 55px;
|
||||
}
|
||||
#topbar.affix + #content .tray-nav.affix,
|
||||
#topbar.affix + #content .tray .tray-affix {
|
||||
top: 115px;
|
||||
}
|
||||
|
||||
|
||||
/* tray-nav animation helper class */
|
||||
.tray-nav[data-nav-animate] li {
|
||||
display: none;
|
||||
}
|
||||
.tray-nav[data-nav-animate] li.animated {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
F. Tray Hover Settings
|
||||
|
||||
At <1000 window width javascript will add a
|
||||
"tray-rescale" class to the document body. This
|
||||
will shift the menu over out of sight and
|
||||
expand it only when the user hovers over the
|
||||
portion that's still visible
|
||||
================================================= */
|
||||
body.tray-rescale {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body.tray-rescale.sb-r-o .tray-center {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
body.tray-rescale.sb-r-o .tray-left,
|
||||
body.tray-rescale.sb-r-o .tray-right {
|
||||
display: none;
|
||||
}
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {right: -275px;}
|
||||
|
||||
body.tray-rescale .tray-left {
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
|
||||
/* adjust center tray to fill window width add needed
|
||||
padding to offset the partially hidden tray */
|
||||
body.tray-rescale .tray-center {
|
||||
width: 100%;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
padding-right: 58px !important;
|
||||
}
|
||||
body.tray-rescale .tray-top + .tray-center {
|
||||
padding-right: inherit !important;
|
||||
}
|
||||
/* adjust depending on tray size */
|
||||
body.tray-rescale .tray.tray200 {
|
||||
right: -155px;
|
||||
}
|
||||
body.tray-rescale .tray.tray225 {
|
||||
right: -180px;
|
||||
}
|
||||
body.tray-rescale .tray.tray250 {
|
||||
right: -205px;
|
||||
}
|
||||
body.tray-rescale .tray.tray270 {
|
||||
right: -225px;
|
||||
}
|
||||
body.tray-rescale .tray.tray290 {
|
||||
right: -245px;
|
||||
}
|
||||
body.tray-rescale .tray.tray300 {
|
||||
right: -255px;
|
||||
}
|
||||
body.tray-rescale .tray.tray320 {
|
||||
right: -275px;
|
||||
}
|
||||
body.tray-rescale .tray.tray350 {
|
||||
right: -305px;
|
||||
}
|
||||
body.tray-rescale .tray.tray400 {
|
||||
right: -355px;
|
||||
}
|
||||
|
||||
/* on hover open the menus */
|
||||
body.tray-rescale .tray-left:hover,
|
||||
body.tray-rescale .tray-right:hover {
|
||||
opacity: 1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
body.tray-rescale .tray-left:hover,
|
||||
body.tray-rescale .tray-right:hover {right: 0px;}
|
||||
|
||||
|
||||
/* adjust any bootstrap affix settings if they exist */
|
||||
// body.tray-rescale .tray .tray-nav.affix,
|
||||
// body.tray-rescale .tray .affix-pane.affix {
|
||||
// top: auto;
|
||||
// }
|
||||
|
||||
// Changes added via updates
|
||||
// Update v1.2
|
||||
//
|
||||
|
||||
// Tray Responsive Changes
|
||||
// Hide the tray completely iff window is <600 px
|
||||
|
||||
/* Disable completely on resolutions <600 */
|
||||
@media (max-width: 600px) {
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {
|
||||
display: none;
|
||||
}
|
||||
body.tray-rescale .tray-center {
|
||||
padding-right: 13px !important;
|
||||
}
|
||||
body.tray-rescale #content.table-layout > div,
|
||||
body.tray-rescale #content.table-layout > section {
|
||||
padding: 10px 13px 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Changes added via updates
|
||||
// Update v1.5
|
||||
//
|
||||
// Tray Scroller Settings (Fixed content panes)
|
||||
.tray-scroller { min-height: 500px; }
|
||||
.tray-left .tray-scroller { margin-right: -16px; }
|
||||
.tray-center .tray-scroller { margin-right: -20px; padding-right: 5px; }
|
||||
.tray-right .tray-scroller { margin-right: -13px; }
|
||||
.tray-scroller .scroller-handle {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.tray-scroller:hover .scroller-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user