mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
Various clean up + documentation
This commit is contained in:
Samuel Georges
parent
714c19de4a
commit
12c035502c
@ -10,7 +10,12 @@
|
||||
=require ../../../system/assets/ui/js/foundation.js
|
||||
=require ../../../system/assets/ui/js/flashmessage.js
|
||||
=require ../../../system/assets/ui/js/dropdown.js
|
||||
=require ../../../system/assets/ui/js/tooltip.js
|
||||
=require ../../../system/assets/ui/js/loader.js
|
||||
=require ../../../system/assets/ui/js/popover.js
|
||||
=require ../../../system/assets/ui/js/popup.js
|
||||
=require ../../../system/assets/ui/js/list.js
|
||||
=require ../../../system/assets/ui/js/tab.js
|
||||
|
||||
=require october.controls.js
|
||||
=require october.utils.js
|
||||
@ -19,19 +24,13 @@
|
||||
=require october.dragscroll.js
|
||||
=require october.dragvalue.js
|
||||
=require october.toolbar.js
|
||||
=require october.tooltip.js
|
||||
=require october.verticalmenu.js
|
||||
=require october.navbar.js
|
||||
=require october.sidenav.js
|
||||
=require october.tab.js
|
||||
=require october.popover.js
|
||||
=require october.popup.js
|
||||
=require october.goalmeter.js
|
||||
=require october.scrollbar.js
|
||||
=require october.filelist.js
|
||||
=require october.hotkey.js
|
||||
=require october.loadindicator.js
|
||||
=require october.stripeloadindicator.js
|
||||
=require october.inputpreset.js
|
||||
=require october.layout.js
|
||||
=require october.sidepaneltab.js
|
||||
|
||||
6
modules/backend/assets/js/vendor/vendor.js
vendored
6
modules/backend/assets/js/vendor/vendor.js
vendored
@ -20,12 +20,6 @@
|
||||
=require ../../vendor/dropzone/dropzone.js
|
||||
=require ../../vendor/sweet-alert/sweet-alert.js
|
||||
|
||||
=require ../../../../../modules/system/assets/vendor/bootstrap/js/tooltip.js
|
||||
=require ../../../../../modules/system/assets/vendor/bootstrap/js/modal.js
|
||||
=require ../../../../../modules/system/assets/vendor/bootstrap/js/tab.js
|
||||
=require ../../../../../modules/system/assets/vendor/bootstrap/js/transition.js
|
||||
=require ../../../../../modules/system/assets/vendor/bootstrap/js/dropdown.js
|
||||
|
||||
=require ../../vendor/flot/jquery.flot.js
|
||||
=require ../../vendor/flot/jquery.flot.tooltip.js
|
||||
=require ../../vendor/flot/jquery.flot.resize.js
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
//
|
||||
// Combines control styles
|
||||
//
|
||||
|
||||
@import "core/boot.less";
|
||||
|
||||
@import "controls/forms.less";
|
||||
@import "controls/lists.less";
|
||||
@import "controls/simplelist.less";
|
||||
@import "controls/filters.less";
|
||||
@import "controls/popup.less";
|
||||
@import "controls/loadindicator.less";
|
||||
@import "controls/scrollbar.less";
|
||||
@import "controls/filelist.less";
|
||||
@import "controls/button.less";
|
||||
@import "controls/toolbar.less";
|
||||
@import "controls/common.less";
|
||||
@import "controls/dropdown.less";
|
||||
@import "controls/tab.less";
|
||||
@import "controls/pagination.less";
|
||||
@import "controls/scoreboard.less";
|
||||
@import "controls/charts.less";
|
||||
@import "controls/popover.less";
|
||||
@import "controls/inspector.less";
|
||||
@import "controls/ballooncontrols.less";
|
||||
@import "controls/reportwidgets.less";
|
||||
@import "controls/treelist.less";
|
||||
@import "controls/treeview.less";
|
||||
@import "controls/callout.less";
|
||||
@import "controls/sidenav-tree.less";
|
||||
@import "controls/panels.less";
|
||||
@import "controls/selector-group.less";
|
||||
@import "controls/tree-path.less";
|
||||
@import "controls/namevaluelist.less";
|
||||
@import "controls/progressbar.less";
|
||||
@import "controls/alert.less";
|
||||
@import "controls/scrollpad.less";
|
||||
@ -1,132 +0,0 @@
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none !important;
|
||||
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: @color-button-disabled-bg;
|
||||
color: @color-button-disabled-text;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default.on {
|
||||
background-color: #95a5a6;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn{
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
margin-left: 0!important;
|
||||
|
||||
&:last-child, &.last {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.border-right-radius(@border-radius-base)!important;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child, .last) > .btn {
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
.border-right-radius(0)!important;
|
||||
}
|
||||
|
||||
&:not(:first-child) > .btn {
|
||||
.border-left-radius(0)!important;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.btn {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn, .btn-group {
|
||||
&.offset-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
font-size: 21px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
color: @color-icon-btn-default;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
&.danger:hover:before {
|
||||
color: @color-btn-danger;
|
||||
}
|
||||
|
||||
&.pull-right:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.margin-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 17px;
|
||||
height: 17px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
&.larger {
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 13px;
|
||||
padding: 9px 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
color: @btn-default-color;
|
||||
|
||||
&:hover {
|
||||
color: @color-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,841 +0,0 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Resets to bootstrap
|
||||
//
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.transition(none);
|
||||
.box-shadow(none);
|
||||
.border-radius(3px);
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Form containers
|
||||
//
|
||||
|
||||
.form-preview {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
|
||||
>.form-group:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Form to sit flush to the element above
|
||||
&.form-flush {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nice forms
|
||||
//
|
||||
|
||||
.form-elements, .form-tabless-fields {
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.radio.nolabel label,
|
||||
.checkbox.nolabel label {
|
||||
.text-hide();
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid @color-form-field-border;
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
font-size: 13px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right -2px;
|
||||
padding-right: 30px !important;
|
||||
background-image: url('../images/bitmap-icons.png');
|
||||
|
||||
&.plus { background-position: right -124px; }
|
||||
&.search { background-position: right -84px; }
|
||||
&.user { background-position: right -41px; }
|
||||
&.lock { background-position: right 0; }
|
||||
}
|
||||
|
||||
&.growable {
|
||||
width: 110px;
|
||||
//.transition(width 0.2s);
|
||||
&:focus, &:active {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&, &.layout-item {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.box-sizing(border-box);
|
||||
|
||||
&.is-required {
|
||||
> label:after {
|
||||
color: @color-form-required-asterisk;
|
||||
vertical-align: super;
|
||||
font-size: 60%;
|
||||
content: " *";
|
||||
text-shadow: 0 0 2px darken(@color-form-required-asterisk, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&.span-full {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.span-left {
|
||||
float: left;
|
||||
width: 48.5%;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&.span-right {
|
||||
float: right;
|
||||
width: 48.5%;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
&.layout-relative {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.checkbox-field {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.number-field {
|
||||
> .form-control { text-align: right; }
|
||||
}
|
||||
|
||||
&.checkbox-align {
|
||||
padding-left: 23px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.field-slim {
|
||||
&.span-left, &.span-right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.field-indent {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
&.input-sidebar-control {
|
||||
padding-right: 35px;
|
||||
|
||||
.sidebar-control {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 34px;
|
||||
font-size: 16px;
|
||||
color: @color-input-sidebar-control;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: @color-link;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-preview {
|
||||
|
||||
.form-control {
|
||||
background-color: @color-form-field-preview;
|
||||
height: auto;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
label { cursor: default; }
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
&.before-field {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 13px;
|
||||
pointer-events: none;
|
||||
color: @color-form-field-icon;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&.right-align {
|
||||
> .icon { right: 0; }
|
||||
input { padding-right: 32px !important; }
|
||||
}
|
||||
|
||||
&.left-align {
|
||||
> .icon { left: 0; }
|
||||
input { padding-left: 32px !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.field-section {
|
||||
border-bottom: 1px solid @color-form-field-border;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 7px;
|
||||
|
||||
> h4 {
|
||||
color: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
> p:first-child,
|
||||
> h4:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.is-collapsible {
|
||||
cursor: pointer;
|
||||
|
||||
> h4:before {
|
||||
// Icon
|
||||
display: inline-block;
|
||||
.icon-FontAutumn();
|
||||
vertical-align: baseline;
|
||||
content: @caret-down;
|
||||
|
||||
margin: 0 8px;
|
||||
float: right;
|
||||
color: rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid darken(@color-form-field-border, 10%);
|
||||
> h4:before {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
resize: vertical;
|
||||
&.size-tiny { min-height: @size-tiny; }
|
||||
&.size-small { min-height: @size-small; }
|
||||
&.size-large { min-height: @size-large; }
|
||||
&.size-huge { min-height: @size-huge; }
|
||||
&.size-giant { min-height: @size-giant; }
|
||||
}
|
||||
|
||||
.field-checkboxlist {
|
||||
.checkbox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field-checkboxlist-scrollable {
|
||||
background: white;
|
||||
border: 1px solid @color-list-border;
|
||||
padding-left: 15px;
|
||||
height: @size-large + 100;
|
||||
|
||||
// First checkbox
|
||||
.checkbox {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// All others
|
||||
.checkbox ~ .checkbox { margin-top: 0; }
|
||||
}
|
||||
|
||||
.field-recordfinder {
|
||||
background-color: @color-form-field-bg;
|
||||
border: 1px solid @color-form-field-border;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.form-control {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
height: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 8px 30px 10px 11px;
|
||||
}
|
||||
.btn {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 50%;
|
||||
margin-top: -44px;
|
||||
height: 88px;
|
||||
color: lighten(@btn-default-color, 15%);
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
}
|
||||
.text-muted i {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.primary {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.recordfinder-search {
|
||||
background-position: right -81px !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
.clearfix();
|
||||
padding-bottom: 20px;
|
||||
font-size: 0;
|
||||
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
|
||||
&.no-margin-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.buttons-offset {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body.slim-container {
|
||||
.form-buttons {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @menu-breakpoint-max) {
|
||||
.form-group {
|
||||
&.span-left, &.span-right {
|
||||
width: 100%;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nice Checkboxes & Radios
|
||||
//
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-right: 15px;
|
||||
margin-left: -20px;
|
||||
|
||||
font-size: 12px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
bottom: 1px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid @color-custom-input-border;
|
||||
color: @color-custom-input-icon;
|
||||
|
||||
}
|
||||
&:hover:before {
|
||||
border-color: darken(@color-custom-input-border, 10%);
|
||||
color: darken(@color-custom-input-icon, 10%);
|
||||
}
|
||||
&:active:before {
|
||||
border-color: darken(@color-custom-input-border, 20%);
|
||||
color: darken(@color-custom-input-icon, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label:before {
|
||||
.icon(@circle);
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label:before {
|
||||
.icon(@check);
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
label:before {
|
||||
border-color: @color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
p.help-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-radio label:before {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.custom-checkbox label:before {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
//
|
||||
// ON / OFF Switcher
|
||||
//
|
||||
|
||||
.switch-field {
|
||||
.field-switch {
|
||||
padding-left: 75px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.border-radius(3px);
|
||||
|
||||
* { .box-sizing(border-box); }
|
||||
&.disabled { .opacity(.5); }
|
||||
.slide-button {
|
||||
z-index: 4;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 34px;
|
||||
top: 2px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: @color-switch-input-bg;
|
||||
.border-radius(20px);
|
||||
.transition(all 0.1s);
|
||||
}
|
||||
|
||||
label,
|
||||
> span {
|
||||
line-height: 23px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
.opacity(0);
|
||||
&:checked {
|
||||
~ .slide-button {
|
||||
right: 2px;
|
||||
}
|
||||
~ span { background-color: @color-switch-input-on; }
|
||||
~ span span {
|
||||
&:first-of-type {
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:last-of-type {
|
||||
color: #666666;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: @color-switch-input-off;
|
||||
font-size: 11px;
|
||||
.user-select(none);
|
||||
.border-radius(20px);
|
||||
|
||||
span {
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
.box-sizing(border-box);
|
||||
&:last-child {
|
||||
left: 50%;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-left: 9px;
|
||||
display: none;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nice Dropdowns
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
|
||||
//
|
||||
// Allows Select2 to work with Bootstrap
|
||||
//
|
||||
|
||||
.select2-choice {
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.select2-arrow {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container {
|
||||
padding: 0px;
|
||||
.select2-choices {
|
||||
border: 0 !important;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background-image:url(../images/loading-indicator-transparent.svg);
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
.select2-choice .select2-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open {
|
||||
border-color: @color-form-field-border-focus;
|
||||
&,.select2-choices {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&.select2-drop-above {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active {
|
||||
border-color: @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
//
|
||||
// Restyle Select2
|
||||
//
|
||||
|
||||
&.select2-container {
|
||||
.select2-choice {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 0 0 15px;
|
||||
border: none;
|
||||
background: #FFFFFF;
|
||||
|
||||
.select2-arrow {
|
||||
width: 38px;
|
||||
background: none;
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
b {
|
||||
background: none !important;
|
||||
text-align: center;
|
||||
color: @color-custom-input-icon;
|
||||
&:before { .icon(@angle-down); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled {
|
||||
background-color: #f4f4f4;
|
||||
.select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
.select2-arrow b { .opacity(.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-container-active {
|
||||
.select2-choice,
|
||||
.select2-choices {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open,
|
||||
&.select2-container.select2-dropdown-open.select2-drop-above {
|
||||
.select2-choice {
|
||||
background: @color-custom-select-bg;
|
||||
.select2-arrow {
|
||||
border-left-color: transparent;
|
||||
b {
|
||||
&:before { .icon(@angle-up); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Multi select
|
||||
//
|
||||
|
||||
.select2-container-multi {
|
||||
&.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-choices {
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
background: none;
|
||||
|
||||
.select2-search-choice {
|
||||
background: none;
|
||||
padding: 8px 15px;
|
||||
margin: 4px 0 4px 5px;
|
||||
.box-shadow(none);
|
||||
.transition(.25s linear);
|
||||
|
||||
&:hover {
|
||||
padding: 8px 7px 8px 23px;
|
||||
.select2-search-choice-close {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
.transition(.25s linear);
|
||||
opacity: 0;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop-multi {
|
||||
.select2-no-results {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Outside Select2 container
|
||||
//
|
||||
|
||||
.select2-drop {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-custom-select-border;
|
||||
border-top: none;
|
||||
|
||||
&.select2-drop-above {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-custom-select-border;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
&.select2-drop-above.select2-drop-active {
|
||||
border-top: 1px solid @color-custom-select-border;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
padding: 0;
|
||||
min-height: 36px;
|
||||
input {
|
||||
min-height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid @color-custom-select-border;
|
||||
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
.select2-no-results,
|
||||
.select2-searching,
|
||||
.select2-selection-limit {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.select2-no-results {
|
||||
padding: 7px!important;
|
||||
}
|
||||
|
||||
.select2-highlighted {
|
||||
background: @color-custom-select-bg-hover;
|
||||
}
|
||||
|
||||
> li > div {
|
||||
padding: 5px 7px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Controls inside toolbar
|
||||
//
|
||||
|
||||
[data-control=toolbar] {
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
|
||||
&.width-50 {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&.width-100 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
&.width-150 {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].form-control, label {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 7px;
|
||||
|
||||
&.standalone {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
|
||||
.select2-choice {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control.custom-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,533 +0,0 @@
|
||||
//
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
//
|
||||
// Usage:
|
||||
// <div class="control-list">
|
||||
// <table class="table data" data-control="rowlink">
|
||||
// <thead>
|
||||
// <tr>
|
||||
// <th class="list-checkbox">
|
||||
// <div class="checkbox custom-checkbox nolabel">
|
||||
// <input type="checkbox" id="checkboxAll" />
|
||||
// <label for="checkboxAll"></label>
|
||||
// </div>
|
||||
// </th>
|
||||
// <th class="sort-desc"><a href="/">Title</a></th>
|
||||
// <th class="active sort-asc"><a href="/">Created</a></th>
|
||||
// <th class="sort-desc"><a href="/">Author</a></th>
|
||||
// <th><span>Categories</span></th>
|
||||
// <th><span>Published</span></th>
|
||||
// <th><span>Updated</span></th>
|
||||
// <th class="list-setup"><a href="/" title="List options"></a></th>
|
||||
// </tr>
|
||||
// </thead>
|
||||
// <tbody>
|
||||
// <tr>
|
||||
// <td class="list-checkbox nolink">
|
||||
// <div class="checkbox custom-checkbox nolabel">
|
||||
// <input id="checkbox_1" type="checkbox" />
|
||||
// <label for="checkbox_1">Check</label>
|
||||
// </div>
|
||||
// </td>
|
||||
// <td><a href="/">Welcome to October</a></td>
|
||||
// <td>Oct 01, 2013</td>
|
||||
// <td>Adam Person</td>
|
||||
// <td>News</td>
|
||||
// <td>Oct 01, 2013</td>
|
||||
// <td>Oct 01, 2013</td>
|
||||
// <td> </td>
|
||||
// </tr>
|
||||
// </body>
|
||||
// <tfoot>
|
||||
// <tr>
|
||||
// <td colspan="8" class="list-pagination nolink">
|
||||
// <div class="control-pagination">
|
||||
// <span class="page-iteration">1-5 of 20</span>
|
||||
// <a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
|
||||
// </div>
|
||||
// </td>
|
||||
// </tr>
|
||||
// </tfoot>
|
||||
// </table>
|
||||
// </div>
|
||||
//
|
||||
|
||||
|
||||
//
|
||||
// List Data Table
|
||||
//
|
||||
|
||||
table.table.data {
|
||||
.list-head-icon(@icon) {
|
||||
> span, > a {
|
||||
&:after {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: baseline;
|
||||
.opacity(.2);
|
||||
.icon(@icon);
|
||||
}
|
||||
&:hover:after { .opacity(.6); }
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
thead {
|
||||
background: @color-list-head-bg;
|
||||
|
||||
td, th {
|
||||
border-width: 1px;
|
||||
border-top: 1px solid @color-list-border !important;
|
||||
border-color: @color-list-border;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
|
||||
> a, > span {
|
||||
display: block;
|
||||
padding: 13px 15px;
|
||||
text-transform: uppercase;
|
||||
color: @color-list-text-head;
|
||||
text-decoration: none;
|
||||
&:hover { color: @color-list-text-active; }
|
||||
}
|
||||
|
||||
&.sort-desc { .list-head-icon(@angle-down); }
|
||||
&.sort-asc { .list-head-icon(@angle-up); }
|
||||
|
||||
&.active {
|
||||
background-color: inherit;
|
||||
> span, > a {
|
||||
&:after {
|
||||
color: @color-list-active-sort;
|
||||
.opacity(1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tr th:first-child {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
td, th { background-color: @color-list-accent; }
|
||||
}
|
||||
td, th {
|
||||
padding: 11px 15px;
|
||||
color: @color-list-text;
|
||||
border-color: @color-list-grid;
|
||||
|
||||
a {
|
||||
color: @color-list-text;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.progress {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
.border-radius(0);
|
||||
.box-shadow(none);
|
||||
|
||||
div.bar {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -11px;
|
||||
bottom: -11px;
|
||||
background: @color-list-progress-bg;
|
||||
.opacity(0.3);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr:first-child {
|
||||
th, td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
border-left: 3px solid transparent;
|
||||
padding-left: 17px;
|
||||
}
|
||||
tr.active td {
|
||||
color: @color-list-text-active;
|
||||
|
||||
&:first-child {
|
||||
border-left: 3px solid @color-list-stripe-active;
|
||||
}
|
||||
}
|
||||
tr:not(.no-data):hover td, tr:not(.no-data).selected td, {
|
||||
background: @color-list-hover-bg !important;
|
||||
color: white;
|
||||
|
||||
a, span, i[class^="icon-"] {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
tr.hidden {
|
||||
td, th, td a, th a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tr.strike {
|
||||
td, th, td a, th a {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
tr.processing {
|
||||
td, th, td a, th a {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
tr.negative {
|
||||
td, th, td a, th a {
|
||||
color: #b2341c;
|
||||
}
|
||||
}
|
||||
|
||||
tr.positive {
|
||||
td, th, td a, th a {
|
||||
color: #278731;
|
||||
}
|
||||
}
|
||||
|
||||
tr.disabled, tr.deleted {
|
||||
td, th, td a, th a {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
tr.new, tr.important {
|
||||
td, th, td a, th a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
tr.safe, tr.special {
|
||||
td, th, td a, th a {
|
||||
color: #98a7a8;
|
||||
}
|
||||
}
|
||||
|
||||
td.column-break-word {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// Requires "max-width" with px value
|
||||
td.column-single-line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.column-slim {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.icons {
|
||||
td i[class^="icon-"] {
|
||||
display: inline-block;
|
||||
margin-right: 7px;
|
||||
font-size: 15px;
|
||||
color: #95a5a6;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
td.column-compact {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
a { color: @color-list-text; text-decoration: none; }
|
||||
td, th {
|
||||
border-color: @color-list-border;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
th.list-cell-type-switch,
|
||||
td.list-cell-type-switch {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-checkbox {
|
||||
padding-left: 16px;
|
||||
padding-right: 8px;
|
||||
width: 52px;
|
||||
vertical-align: top;
|
||||
border-right: 1px solid @color-list-border-light;
|
||||
.checkbox { margin: 0; }
|
||||
.custom-checkbox {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: -2px;
|
||||
label { margin-right: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
thead tr th.list-checkbox {
|
||||
padding: 18px 0 0 20px;
|
||||
}
|
||||
|
||||
.list-tree {
|
||||
width: 10px;
|
||||
padding: 0;
|
||||
|
||||
a.list-expand-collapse {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree levels 1 - 25
|
||||
.makeTreeLevel(@count) when (@count < 26) {
|
||||
tr.list-tree-level-@{count} {
|
||||
a.list-expand-collapse { left: 20px + (10 * @count); }
|
||||
td.list-cell-index-1 { padding-left: 25px + (10 * @count); }
|
||||
}
|
||||
.makeTreeLevel(@count + 1);
|
||||
}
|
||||
.makeTreeLevel(1);
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// List containers
|
||||
//
|
||||
|
||||
.list-preview {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid @color-list-border;
|
||||
|
||||
.list-header:first-child {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.control-list:last-child > table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List to sit flush to the element above (no toolbar)
|
||||
.list-flush {
|
||||
table.table.data {
|
||||
thead tr th {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// List control
|
||||
//
|
||||
|
||||
.control-list {
|
||||
p.no-data {
|
||||
padding: 18px 20px;
|
||||
margin: 0 20px;
|
||||
color: @color-list-norecords-text;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
.border-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
table.table.data {
|
||||
.list-setup {
|
||||
width: 48px;
|
||||
a {
|
||||
display: block;
|
||||
color: #000000;
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
.icon(@list-ul);
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: baseline;
|
||||
.opacity(.6);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
.opacity(1);
|
||||
color: @color-list-hover-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
|
||||
.loading-indicator {
|
||||
div {
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: @color-list-header-bg;
|
||||
padding: 0 20px 1px 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: @color-status-list-text;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.report-widget {
|
||||
.table-container {
|
||||
margin: -15px;
|
||||
|
||||
table.table.data {
|
||||
margin-bottom: 0;
|
||||
|
||||
thead tr {
|
||||
th {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
td, th { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Responsive Table
|
||||
//
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.control-list {
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
border-top: 1px solid @color-list-border;
|
||||
|
||||
thead tr {
|
||||
td, th {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
th.list-setup {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: none!important;
|
||||
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
|
||||
td {
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
padding-left: 40%!important;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
td:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 35%;
|
||||
padding: 11px 15px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
color: @color-list-text-head;
|
||||
content: attr(data-title);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td:before {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
td {
|
||||
border-left: 3px solid @color-list-stripe-active;
|
||||
&:before { color: @color-list-text-active; }
|
||||
}
|
||||
}
|
||||
|
||||
td.list-setup { display: none; }
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
td { border: none; }
|
||||
}
|
||||
|
||||
.list-checkbox {
|
||||
width: 100% !important;
|
||||
border-right: none !important;
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -5,9 +5,10 @@
|
||||
//
|
||||
|
||||
// Core variables and mixins
|
||||
@import "../../../../system/assets/vendor/bootstrap/less/variables.less";
|
||||
@import "../../../../system/assets/vendor/bootstrap/less/mixins.less";
|
||||
@import "../../../../system/assets/vendor/font-autumn/less/variables.less";
|
||||
@import "../../../../system/assets/vendor/font-autumn/less/mixins.less";
|
||||
@import "../../../system/assets/ui/less/global.less";
|
||||
@import "../../../system/assets/ui/less/site.variables.less";
|
||||
@import "../../../system/assets/ui/less/site.mixins.less";
|
||||
@import "../../../system/assets/ui/less/icon.variables.less";
|
||||
@import "../../../system/assets/ui/less/icon.mixins.less";
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
50
modules/backend/assets/less/core/bootstrap.less
vendored
50
modules/backend/assets/less/core/bootstrap.less
vendored
@ -1,50 +0,0 @@
|
||||
/*!
|
||||
* October CMS build on the Twitter Bootstrap framework.
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/variables";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/mixins";
|
||||
|
||||
// Reset
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/normalize";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/print";
|
||||
|
||||
// Core CSS
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/scaffolding";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/type";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/grid";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/tables";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/forms";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/buttons";
|
||||
|
||||
// Components
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/dropdowns";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/button-groups";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/input-groups";
|
||||
@import "../../../../system/assets/vendor/bootstrap/less/navs";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/progress-bars";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "../../../../system/assets/vendor/bootstrap/less/modals";
|
||||
@import "../../../../system/assets/vendor/bootstrap/less/tooltip";
|
||||
|
||||
// Utility classes
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/utilities";
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/responsive-utilities";
|
||||
|
||||
// Jasny
|
||||
//@import "../../../../system/assets/vendor/bootstrap/less/rowlink";
|
||||
|
||||
// Override some Bootstrap styles
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.row-compact {
|
||||
[class*="col-"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
@ -86,67 +86,6 @@
|
||||
}
|
||||
|
||||
|
||||
// Scroll markers
|
||||
// --------------------------------------------------
|
||||
|
||||
.vertical-scroll-marker(@color) {
|
||||
.scroll-marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
display: none;
|
||||
|
||||
&:after {
|
||||
.icon(@ellipsis-h);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
top: 0;
|
||||
height: 9px;
|
||||
font-size: 10px;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&.before {top: 0;}
|
||||
&.after {
|
||||
bottom: 3px;
|
||||
&:after {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll-before .scroll-marker.before {display: block;}
|
||||
&.scroll-after .scroll-marker.after {display: block;}
|
||||
}
|
||||
|
||||
.horizontal-scroll-indicators(@color) {
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
height: 9px;
|
||||
font-size: 10px;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -6px;
|
||||
.icon(@angle-left);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -8px;
|
||||
.icon(@angle-right);
|
||||
}
|
||||
|
||||
&.scroll-before:before {display: block;}
|
||||
&.scroll-after:after {display: block;}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// Flexbox LESS mixins
|
||||
// The spec: http://www.w3.org/TR/css3-flexbox
|
||||
|
||||
@ -20,12 +20,6 @@
|
||||
@link-color: darken(@brand-primary, 15%);
|
||||
@link-hover-color: darken(@link-color, 30%);
|
||||
|
||||
//
|
||||
// Override Font Awesome variables
|
||||
// --------------------------------------------------
|
||||
|
||||
@FontAutumnPath: "../../../system/assets/vendor/font-autumn/font";
|
||||
|
||||
//
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
@ -92,31 +86,6 @@
|
||||
@color-sidebarnav-back-link-bg: #2b3e50;
|
||||
@color-sidebarnav-back-link-text: #bdc3c7;
|
||||
|
||||
@color-list-active: #dddddd;
|
||||
@color-list-hover: #dddddd;
|
||||
@color-list-active-border: #e67e22;
|
||||
@color-list-arrow: #cfcfcf;
|
||||
@color-list-icon: #a1aab1;
|
||||
@color-list-parent-bg: #ffffff;
|
||||
@color-list-nav-arrow: #34495e;
|
||||
@color-list-header-bg: transparent;
|
||||
@color-list-head-bg: #ffffff;
|
||||
@color-list-progress-bg: #0181b9;
|
||||
@color-list-border: #e2e2e2;
|
||||
@color-list-border-light: #eeeeee;
|
||||
@color-list-text-head: #333333;
|
||||
@color-list-text: #666666;
|
||||
@color-list-text-active: #000000;
|
||||
@color-list-stripe-active: #ff9933;
|
||||
@color-list-accent: #f5f5f5;
|
||||
@color-list-norecords-text: #666666;
|
||||
@color-list-hover-bg: #4da7e8;
|
||||
@color-list-active-sort: #c63e26;
|
||||
@color-list-grid: #eeeeee;
|
||||
|
||||
@color-text-title: #405261;
|
||||
@color-text-description: #8f8f8f;
|
||||
|
||||
@color-scrollbar-track: transparent;
|
||||
@color-scrollbar-thumb: #aaa;
|
||||
@color-scrollpanel-border: #efefef;
|
||||
@ -129,32 +98,8 @@
|
||||
@color-richeditor-toolbar-btn-bg-active: #404040;
|
||||
@color-richeditor-toolbar-btn-color-hover: #ffffff;
|
||||
|
||||
@color-form-field-border: #e0e0e0;
|
||||
@color-form-field-border-focus: #808c8d;
|
||||
@color-form-required-asterisk: #ff0000;
|
||||
@color-form-sidebar: #ecf0f1;
|
||||
@color-form-field-preview: #f6f6f6;
|
||||
@color-form-field-bg: #ffffff;
|
||||
@color-form-field-icon: #bdbdbd;
|
||||
|
||||
@color-panel-light: #ECF0F1;
|
||||
|
||||
@color-button-disabled-bg: #dbdbdb;
|
||||
@color-button-disabled-text: #aaaaaa;
|
||||
|
||||
@color-loading-indicator-text: #999999;
|
||||
@color-stripe-loader: #0090c0;
|
||||
|
||||
@color-tab-inactive-text: #cccccc;
|
||||
@color-tab-active-text: @color-text-title;
|
||||
@color-tab-active-border: #5fb6f5;
|
||||
@color-tab-bg: #ffffff;
|
||||
@color-tab-active-marker: #ec8017;
|
||||
@color-tab-content-active-bg: #ffffff;
|
||||
@color-tab-content-border: #e3e5e7;
|
||||
|
||||
@color-ui-border: #d7d7d7;
|
||||
|
||||
@color-outer-muted-text: rgba(255,255,255,.44);
|
||||
@color-outer-heading: #feffff;
|
||||
@color-outer-description: #999999;
|
||||
@ -191,11 +136,6 @@
|
||||
@color-custom-select-bg: #f6f6f6;
|
||||
@color-custom-select-bg-hover: #4da7e8;
|
||||
|
||||
@color-popover-bg: #ffffff;
|
||||
@color-popover-border: @dropdown-border;
|
||||
@color-popover-head-bg: #d35400;
|
||||
@color-popover-head-text: #ffffff;
|
||||
|
||||
@color-filter-border: @dropdown-border;
|
||||
@color-filter-text: #949ea6;
|
||||
@color-filter-items-bg: #fafafa;
|
||||
@ -242,17 +182,9 @@
|
||||
@color-fancy-form-placeholder: #f4c69e;
|
||||
@color-fancy-form-inactive-tab: #b9530f;
|
||||
|
||||
@color-popup-header-bg: #d35400;
|
||||
@color-popup-header-text: #ECF0F1;
|
||||
@color-popup-footer-bg: transparent;
|
||||
@color-popup-content-bg: @color-body-bg;
|
||||
|
||||
@color-sortable-caret: #999999;
|
||||
@color-sortable-active: #e67e22;
|
||||
|
||||
@color-icon-btn-default: #bcc3c7;
|
||||
@color-btn-danger: #c63e26;
|
||||
|
||||
@color-balloon-control-default-text: #ffffff;
|
||||
@color-balloon-control-default-bg: #bcc3c7;
|
||||
@color-balloon-control-hover-bg: #0181b9;
|
||||
|
||||
@ -11,7 +11,35 @@
|
||||
//
|
||||
|
||||
//
|
||||
// Controls
|
||||
// October Controls
|
||||
//
|
||||
|
||||
@import "core/boot.less";
|
||||
@import "controls/simplelist.less";
|
||||
@import "controls/filters.less";
|
||||
@import "controls/scrollbar.less";
|
||||
@import "controls/filelist.less";
|
||||
@import "controls/toolbar.less";
|
||||
@import "controls/common.less";
|
||||
@import "controls/pagination.less";
|
||||
@import "controls/scoreboard.less";
|
||||
@import "controls/charts.less";
|
||||
@import "controls/inspector.less";
|
||||
@import "controls/ballooncontrols.less";
|
||||
@import "controls/reportwidgets.less";
|
||||
@import "controls/treelist.less";
|
||||
@import "controls/treeview.less";
|
||||
@import "controls/callout.less";
|
||||
@import "controls/sidenav-tree.less";
|
||||
@import "controls/panels.less";
|
||||
@import "controls/selector-group.less";
|
||||
@import "controls/tree-path.less";
|
||||
@import "controls/namevaluelist.less";
|
||||
@import "controls/alert.less";
|
||||
@import "controls/scrollpad.less";
|
||||
|
||||
//
|
||||
// UI Controls
|
||||
//
|
||||
|
||||
@import "../../../system/assets/ui/less/global.less";
|
||||
@ -25,13 +53,15 @@
|
||||
@import "../../../system/assets/ui/less/list.less";
|
||||
@import "../../../system/assets/ui/less/progressbar.less";
|
||||
@import "../../../system/assets/ui/less/dropdown.less";
|
||||
@import "../../../system/assets/ui/less/loader.less";
|
||||
@import "../../../system/assets/ui/less/popover.less";
|
||||
@import "../../../system/assets/ui/less/popup.less";
|
||||
|
||||
//
|
||||
// Combines layout and vendor styles
|
||||
//
|
||||
|
||||
// Core (shared elements)
|
||||
@import "core/bootstrap.less";
|
||||
@import "core/fonts.less";
|
||||
@import "core/animations.less";
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,6 @@
|
||||
// Basic grid system
|
||||
@import "../ui/less/site.less";
|
||||
@import "../ui/less/icon.less";
|
||||
|
||||
@fontOpenSans: 'Open Sans', Arial, sans-serif;
|
||||
@colorBase: #405261;
|
||||
|
||||
4
modules/system/assets/ui/docs/foundation.md
Normal file
4
modules/system/assets/ui/docs/foundation.md
Normal file
@ -0,0 +1,4 @@
|
||||
# Foundation
|
||||
|
||||
Welcome to the October client-side administration framework, referred to as *October Storm*.
|
||||
|
||||
87
modules/system/assets/ui/docs/inspector.md
Normal file
87
modules/system/assets/ui/docs/inspector.md
Normal file
@ -0,0 +1,87 @@
|
||||
# Inspector
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Form
|
||||
- Popover
|
||||
|
||||
# Example
|
||||
|
||||
<div class="layout-column full-height-strict justify-center align-center">
|
||||
<div class="outer-form-container layout-item center relative" id="cmplist" style="width: 690px">
|
||||
|
||||
<div class="control-componentlist">
|
||||
<ul data-control="toolbar">
|
||||
<li class="oc-icon-bullhorn">
|
||||
<span class="name">Blog archive</span>
|
||||
<span class="description">blogArchive</span>
|
||||
</li>
|
||||
<li class="oc-icon-shopping-cart">
|
||||
<span class="name">Shopping cart</span>
|
||||
<span class="description">cart</span>
|
||||
</li>
|
||||
<li class="oc-icon-plane">
|
||||
<span class="name">Flight schedule</span>
|
||||
<span class="description">flights</span>
|
||||
</li>
|
||||
<li class="oc-icon-download-alt">
|
||||
<span class="name">Download list</span>
|
||||
<span class="description">downloads</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/template" id="inspectortpl">
|
||||
<div class="popover-head">
|
||||
<h3>Blog archive</h3>
|
||||
<p>Provides access to old blog posts by category name or month.</p>
|
||||
<button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<table class="inspector-fields">
|
||||
<tr>
|
||||
<th>Alias</th>
|
||||
<td class="text"><input type="text" value="blogArchive"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Page param</th>
|
||||
<td class="active text"><input type="text" value="page"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Paginate</th>
|
||||
<td>
|
||||
<div tabindex="0" class="checkbox custom-checkbox nolabel">
|
||||
<input id="check3" type="checkbox" name="check"/>
|
||||
<label for="check3">Paginate</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Posts / page</th>
|
||||
<td class="text"><input type="text" value="20"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$('#btn1').on('show.oc.popover', function(e, popover){
|
||||
popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
|
||||
})
|
||||
|
||||
$('.control-componentlist ul li').on('click', function(){
|
||||
$(this).ocPopover({
|
||||
content: $('#inspectortpl').html(),
|
||||
// highlightModalTarget: true,
|
||||
// modal: true,
|
||||
width: 220,
|
||||
placement: 'bottom',
|
||||
container: '#cmplist',
|
||||
containerClass: 'control-inspector'
|
||||
})
|
||||
|
||||
return false
|
||||
})
|
||||
</script>
|
||||
64
modules/system/assets/ui/docs/popover.md
Normal file
64
modules/system/assets/ui/docs/popover.md
Normal file
@ -0,0 +1,64 @@
|
||||
# Popover
|
||||
|
||||
Popover
|
||||
|
||||
# Example
|
||||
|
||||
<div class="layout-column full-height-strict justify-center align-center">
|
||||
<div class="outer-form-container layout-item center relative" id="btngroup" style="width: 560px">
|
||||
<div class="btn-group">
|
||||
<a href="#" id="btn1" class="btn btn-primary oc-icon-angle-left" data-control="popover" data-container="#btngroup" data-content="This is a popover" data-placement="left">
|
||||
Popover on left
|
||||
</a>
|
||||
<a href="#" id="btn2" class="btn btn-primary oc-icon-angle-down">
|
||||
Popover on bottom
|
||||
</a>
|
||||
<a href="#" id="btn3" class="btn btn-primary oc-icon-angle-up">
|
||||
Popover on top
|
||||
</a>
|
||||
<a href="#" id="btn4" class="btn btn-primary oc-icon-angle-right" data-control="popover" data-container="#btngroup" data-content="<p>Default popover content</p>" data-placement="right" data-width="200">
|
||||
Popover on right
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('#btn1').on('show.oc.popover', function(e, popover){
|
||||
popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
|
||||
})
|
||||
|
||||
$('#btn2').on('click', function(){
|
||||
$(this).ocPopover({
|
||||
content: $('#popovertemplate').html(),
|
||||
modal: true,
|
||||
highlightModalTarget: true,
|
||||
placement: 'bottom',
|
||||
container: '#btngroup'
|
||||
})
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
$('#btn3').on('click', function(){
|
||||
$(this).ocPopover({
|
||||
content: function(element, popover) {
|
||||
return '<p>This is a generated content<button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button></p>'
|
||||
},
|
||||
placement: 'top',
|
||||
container: '#btngroup'
|
||||
})
|
||||
|
||||
return false
|
||||
})
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="popovertemplate">
|
||||
<div class="popover-body">
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<a class="btn btn-danger" href="#" onclick="$(this).trigger('close.oc.popover'); return false">Close</a>
|
||||
</div>
|
||||
</script>
|
||||
45
modules/system/assets/ui/docs/popup.md
Normal file
45
modules/system/assets/ui/docs/popup.md
Normal file
@ -0,0 +1,45 @@
|
||||
# Popups
|
||||
|
||||
Displays a modal popup
|
||||
|
||||
# Example
|
||||
|
||||
<!-- Basic Popup -->
|
||||
<a data-toggle="modal" href="#content-basic" class="btn btn-primary btn-lg">Launch basic content</a>
|
||||
|
||||
<div class="control-popup modal fade" id="content-basic" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<p>This is a very basic example of a popup...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Confirmation Popup -->
|
||||
<a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>
|
||||
|
||||
<div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Are you sure you wanna do that?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is your last chance. After this, there is no turning back.</p>
|
||||
<p>You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ajax Popup -->
|
||||
<a data-control="popup" data-ajax="popup-content.htm" href="javascript:;" class="btn btn-primary btn-lg">Launch Ajax Form</a>
|
||||
@ -1,252 +1,3 @@
|
||||
/* ========================================================================
|
||||
* Bootstrap: dropdown.js v3.1.1
|
||||
* http://getbootstrap.com/javascript/#dropdowns
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* ======================================================================== */
|
||||
|
||||
|
||||
+function ($) {
|
||||
'use strict';
|
||||
|
||||
// DROPDOWN CLASS DEFINITION
|
||||
// =========================
|
||||
|
||||
var backdrop = '.dropdown-backdrop'
|
||||
var toggle = '[data-toggle=dropdown]'
|
||||
var Dropdown = function (element) {
|
||||
$(element).on('click.bs.dropdown', this.toggle)
|
||||
}
|
||||
|
||||
Dropdown.prototype.toggle = function (e) {
|
||||
var $this = $(this)
|
||||
|
||||
if ($this.is('.disabled, :disabled')) return
|
||||
|
||||
var $parent = getParent($this)
|
||||
var isActive = $parent.hasClass('open')
|
||||
|
||||
clearMenus()
|
||||
|
||||
if (!isActive) {
|
||||
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
|
||||
// if mobile we use a backdrop because click events don't delegate
|
||||
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
|
||||
}
|
||||
|
||||
var relatedTarget = { relatedTarget: this }
|
||||
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
|
||||
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$parent
|
||||
.toggleClass('open')
|
||||
.trigger('shown.bs.dropdown', relatedTarget)
|
||||
|
||||
$this.focus()
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
Dropdown.prototype.keydown = function (e) {
|
||||
if (!/(38|40|27)/.test(e.keyCode)) return
|
||||
|
||||
var $this = $(this)
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if ($this.is('.disabled, :disabled')) return
|
||||
|
||||
var $parent = getParent($this)
|
||||
var isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
var desc = ' li:not(.divider):visible a'
|
||||
var $items = $parent.find('[role=menu]' + desc + ', [role=listbox]' + desc)
|
||||
|
||||
if (!$items.length) return
|
||||
|
||||
var index = $items.index($items.filter(':focus'))
|
||||
|
||||
if (e.keyCode == 38 && index > 0) index-- // up
|
||||
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
|
||||
if (!~index) index = 0
|
||||
|
||||
$items.eq(index).focus()
|
||||
}
|
||||
|
||||
function clearMenus(e) {
|
||||
$(backdrop).remove()
|
||||
$(toggle).each(function () {
|
||||
var $parent = getParent($(this))
|
||||
var relatedTarget = { relatedTarget: this }
|
||||
if (!$parent.hasClass('open')) return
|
||||
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
|
||||
if (e.isDefaultPrevented()) return
|
||||
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
|
||||
})
|
||||
}
|
||||
|
||||
function getParent($this) {
|
||||
var selector = $this.attr('data-target')
|
||||
|
||||
if (!selector) {
|
||||
selector = $this.attr('href')
|
||||
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
|
||||
}
|
||||
|
||||
var $parent = selector && $(selector)
|
||||
|
||||
return $parent && $parent.length ? $parent : $this.parent()
|
||||
}
|
||||
|
||||
|
||||
// DROPDOWN PLUGIN DEFINITION
|
||||
// ==========================
|
||||
|
||||
var old = $.fn.dropdown
|
||||
|
||||
$.fn.dropdown = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('bs.dropdown')
|
||||
|
||||
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
|
||||
if (typeof option == 'string') data[option].call($this)
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.dropdown.Constructor = Dropdown
|
||||
|
||||
|
||||
// DROPDOWN NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.dropdown.noConflict = function () {
|
||||
$.fn.dropdown = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// APPLY TO STANDARD DROPDOWN ELEMENTS
|
||||
// ===================================
|
||||
|
||||
$(document)
|
||||
.on('click.bs.dropdown.data-api', clearMenus)
|
||||
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)
|
||||
|
||||
}(jQuery);
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Dropdown menus.
|
||||
*
|
||||
* This script customizes the Twitter Bootstrap drop-downs.
|
||||
*
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
$(document).on('shown.bs.dropdown', '.dropdown', function(){
|
||||
$(document.body).addClass('dropdown-open')
|
||||
|
||||
var dropdown = $('.dropdown-menu', this),
|
||||
dropdownContainer = $(this).data('dropdown-container')
|
||||
|
||||
if ($('.dropdown-container', dropdown).length == 0) {
|
||||
var
|
||||
title = $('[data-toggle=dropdown]', this).text(),
|
||||
titleAttr = dropdown.data('dropdown-title'),
|
||||
timer = null;
|
||||
|
||||
if (titleAttr !== undefined)
|
||||
title = titleAttr
|
||||
|
||||
$('li:first-child', dropdown).addClass('first-item')
|
||||
dropdown.prepend($('<li/>').addClass('dropdown-title').text(title))
|
||||
|
||||
var
|
||||
container = $('<li/>').addClass('dropdown-container'),
|
||||
ul = $('<ul/>')
|
||||
|
||||
container.prepend(ul)
|
||||
ul.prepend(dropdown.children())
|
||||
dropdown.prepend(container)
|
||||
|
||||
dropdown.on('touchstart', function(){
|
||||
window.setTimeout(function(){
|
||||
dropdown.addClass('scroll')
|
||||
}, 200)
|
||||
})
|
||||
|
||||
dropdown.on('touchend', function(){
|
||||
window.setTimeout(function(){
|
||||
dropdown.removeClass('scroll')
|
||||
}, 200)
|
||||
})
|
||||
|
||||
dropdown.on('click', 'a', function(){
|
||||
if (dropdown.hasClass('scroll'))
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
if (dropdownContainer !== undefined && dropdownContainer == 'body') {
|
||||
$(this).data('oc.dropdown', dropdown)
|
||||
$(document.body).append(dropdown)
|
||||
|
||||
dropdown.css({
|
||||
'visibility': 'hidden',
|
||||
'left': 0,
|
||||
'top' : 0,
|
||||
'display': 'block'
|
||||
})
|
||||
|
||||
var targetOffset = $(this).offset(),
|
||||
targetHeight = $(this).height(),
|
||||
targetWidth = $(this).width(),
|
||||
position = {
|
||||
x: targetOffset.left,
|
||||
y: targetOffset.top + targetHeight
|
||||
},
|
||||
leftOffset = targetWidth < 30 ? -16 : 0,
|
||||
documentHeight = $(document).height(),
|
||||
dropdownHeight = dropdown.height()
|
||||
|
||||
if ((dropdownHeight + position.y) > $(document).height()) {
|
||||
position.y = targetOffset.top - dropdownHeight - 12
|
||||
dropdown.addClass('top')
|
||||
} else
|
||||
dropdown.removeClass('top')
|
||||
|
||||
dropdown.css({
|
||||
'left': position.x + leftOffset,
|
||||
'top': position.y,
|
||||
'visibility': 'visible'
|
||||
})
|
||||
}
|
||||
|
||||
if ($('.dropdown-overlay', document.body).length == 0)
|
||||
$(document.body).prepend($('<div/>').addClass('dropdown-overlay'));
|
||||
})
|
||||
|
||||
$(document).on('hidden.bs.dropdown', '.dropdown', function(){
|
||||
var dropdown = $(this).data('oc.dropdown')
|
||||
if (dropdown !== undefined) {
|
||||
dropdown.css('display', 'none')
|
||||
$(this).append(dropdown)
|
||||
}
|
||||
|
||||
$(document.body).removeClass('dropdown-open');
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
=require ../vendor/bootstrap/js/dropdown.js
|
||||
*/
|
||||
|
||||
@ -12,3 +12,141 @@
|
||||
@import "button.variables";
|
||||
@import "button.base";
|
||||
@import "button.groups";
|
||||
|
||||
@color-button-disabled-bg: #dbdbdb;
|
||||
@color-button-disabled-text: #aaaaaa;
|
||||
@color-icon-btn-default: #bcc3c7;
|
||||
@color-btn-danger: #c63e26;
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none !important;
|
||||
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: @color-button-disabled-bg;
|
||||
color: @color-button-disabled-text;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default.on {
|
||||
background-color: #95a5a6;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn{
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
margin-left: 0!important;
|
||||
|
||||
&:last-child, &.last {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.border-right-radius(@border-radius-base)!important;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child, .last) > .btn {
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
.border-right-radius(0)!important;
|
||||
}
|
||||
|
||||
&:not(:first-child) > .btn {
|
||||
.border-left-radius(0)!important;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.btn {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn, .btn-group {
|
||||
&.offset-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
font-size: 21px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
color: @color-icon-btn-default;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
&.danger:hover:before {
|
||||
color: @color-btn-danger;
|
||||
}
|
||||
|
||||
&.pull-right:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.margin-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 17px;
|
||||
height: 17px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
&.larger {
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 13px;
|
||||
padding: 9px 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
color: @btn-default-color;
|
||||
|
||||
&:hover {
|
||||
color: @color-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,6 +108,9 @@
|
||||
//
|
||||
// Colors
|
||||
// --------------------------------------------------
|
||||
@color-text-title: #405261;
|
||||
@color-text-description: #8f8f8f;
|
||||
|
||||
@color-focus: @brand-primary;
|
||||
@color-border: #cccccc;
|
||||
@color-border-light: #e1e1e1;
|
||||
|
||||
@ -4,74 +4,76 @@
|
||||
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: @table-bg;
|
||||
max-width: 100%;
|
||||
background-color: @table-bg;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Baseline styles
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @line-height-computed;
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-cell-padding;
|
||||
line-height: @line-height-base;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Bottom align for column headings
|
||||
> thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid @table-border-color;
|
||||
}
|
||||
// Remove top border from thead by default
|
||||
> caption + thead,
|
||||
> colgroup + thead,
|
||||
> thead:first-child {
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Account for multiple tbody instances
|
||||
> tbody + tbody {
|
||||
border-top: 2px solid @table-border-color;
|
||||
}
|
||||
width: 100%;
|
||||
margin-bottom: @line-height-computed;
|
||||
border-collapse: separate;
|
||||
|
||||
// Nesting
|
||||
.table {
|
||||
background-color: @body-bg;
|
||||
}
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-cell-padding;
|
||||
line-height: @line-height-base;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Bottom align for column headings
|
||||
> thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid @table-border-color;
|
||||
}
|
||||
// Remove top border from thead by default
|
||||
> caption + thead,
|
||||
> colgroup + thead,
|
||||
> thead:first-child {
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Account for multiple tbody instances
|
||||
> tbody + tbody {
|
||||
border-top: 2px solid @table-border-color;
|
||||
}
|
||||
|
||||
// Nesting
|
||||
.table {
|
||||
background-color: @body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Condensed table w/ half padding
|
||||
|
||||
.table-condensed {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-condensed-cell-padding;
|
||||
}
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-condensed-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,23 +82,23 @@ th {
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid @table-border-color;
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
border: 1px solid @table-border-color;
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead > tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 2px;
|
||||
> thead > tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -105,12 +107,12 @@ th {
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
> tbody > tr:nth-child(odd) {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-accent;
|
||||
> tbody > tr:nth-child(odd) {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -119,12 +121,12 @@ th {
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr:hover {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-hover;
|
||||
> tbody > tr:hover {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -133,19 +135,19 @@ th {
|
||||
// Reset default table behavior
|
||||
|
||||
table col[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
float: none;
|
||||
display: table-column;
|
||||
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
&[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
float: none;
|
||||
display: table-cell;
|
||||
td,
|
||||
th {
|
||||
&[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -169,65 +171,65 @@ table {
|
||||
// will display normally.
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: (@line-height-computed * 0.75);
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
border: 1px solid @table-border-color;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: (@line-height-computed * 0.75);
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
border: 1px solid @table-border-color;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Tighten up spacing
|
||||
> .table {
|
||||
margin-bottom: 0;
|
||||
// Tighten up spacing
|
||||
> .table {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Ensure the content doesn't wrap
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special overrides for the bordered tables
|
||||
> .table-bordered {
|
||||
border: 0;
|
||||
|
||||
// Nuke the appropriate borders so that the parent can handle them
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th:first-child,
|
||||
> td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
> th:last-child,
|
||||
> td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
|
||||
// chances are there will be only one `tr` in a `thead` and that would
|
||||
// remove the border altogether.
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure the content doesn't wrap
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special overrides for the bordered tables
|
||||
> .table-bordered {
|
||||
border: 0;
|
||||
|
||||
// Nuke the appropriate borders so that the parent can handle them
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th:first-child,
|
||||
> td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
> th:last-child,
|
||||
> td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
|
||||
// chances are there will be only one `tr` in a `thead` and that would
|
||||
// remove the border altogether.
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,17 +7,17 @@
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
.container {
|
||||
.container-fixed();
|
||||
.container-fixed();
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
width: @container-lg;
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
width: @container-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
.container-fluid {
|
||||
.container-fixed();
|
||||
.container-fixed();
|
||||
}
|
||||
|
||||
|
||||
@ -36,9 +36,17 @@
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
.row {
|
||||
.make-row();
|
||||
.make-row();
|
||||
}
|
||||
|
||||
// Compact rows
|
||||
|
||||
.row-compact {
|
||||
[class*="col-"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
@ -61,7 +69,7 @@
|
||||
// to tablets.
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.make-grid(sm);
|
||||
.make-grid(sm);
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +78,7 @@
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.make-grid(md);
|
||||
.make-grid(md);
|
||||
}
|
||||
|
||||
|
||||
@ -79,5 +87,5 @@
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.make-grid(lg);
|
||||
.make-grid(lg);
|
||||
}
|
||||
|
||||
@ -60,7 +60,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the small columns
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
@ -89,7 +88,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the medium columns
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
@ -118,7 +116,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the large columns
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
@ -147,7 +144,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user