diff --git a/modules/system/assets/ui/docs/tab.md b/modules/system/assets/ui/docs/tab.md new file mode 100644 index 000000000..f755debef --- /dev/null +++ b/modules/system/assets/ui/docs/tab.md @@ -0,0 +1,32 @@ +# Tabs + +## Content tabs + +Content tabs are heavier tabs designed for displaying content. + +# Example + +
+ +
+
+
+ Tab one content +
+
+
+
+ Tab two content +
+
+
+
+ Tab three content +
+
+
+
diff --git a/modules/system/assets/ui/docs/tooltip.md b/modules/system/assets/ui/docs/tooltip.md new file mode 100644 index 000000000..8c4c5c752 --- /dev/null +++ b/modules/system/assets/ui/docs/tooltip.md @@ -0,0 +1,30 @@ +# Tooltips + +Tooltips are an alternative to the standard browser title tooltip. + +## Tooltip markup +A standard tooltip + +
+
+
Create a new blog post based on this
+
+ +## Spawning tooltips +Tooltips can be automatically created when the mouse enters an element using the `data-toggle="tooltip"` tag. + + + Some link + + +# Example + +
+
+
Create a new blog post based on this
+
\ No newline at end of file diff --git a/modules/backend/assets/js/october.tab.js b/modules/system/assets/ui/js/tab.js similarity index 98% rename from modules/backend/assets/js/october.tab.js rename to modules/system/assets/ui/js/tab.js index a4d5bf344..0cdb4274c 100644 --- a/modules/backend/assets/js/october.tab.js +++ b/modules/system/assets/ui/js/tab.js @@ -1,3 +1,8 @@ +/* +=require ../vendor/bootstrap/js/transition.js +=require ../vendor/bootstrap/js/tab.js +*/ + /* * Tab control. * @@ -60,6 +65,7 @@ * - Toolbar (october.toolbar.js) * - Touchwipe (jquery.touchwipe.min.js) */ + +function ($) { "use strict"; var Tab = function (element, options) { @@ -106,7 +112,7 @@ self.unmodifyTab($(ev.target).closest('ul.nav-tabs > li, div.tab-content > div')) }) - this.$tabsContainer.on('shown.bs.tab', 'li', function(){ + this.$tabsContainer.on('shown.oc.tab', 'li', function(){ // self.$tabsContainer.dragScroll('fixScrollClasses') $(window).trigger('oc.updateUi') diff --git a/modules/backend/assets/js/october.tooltip.js b/modules/system/assets/ui/js/tooltip.js similarity index 76% rename from modules/backend/assets/js/october.tooltip.js rename to modules/system/assets/ui/js/tooltip.js index c48f21920..43bc701d1 100644 --- a/modules/backend/assets/js/october.tooltip.js +++ b/modules/system/assets/ui/js/tooltip.js @@ -1,3 +1,8 @@ +/* +=require ../vendor/bootstrap/js/transition.js +=require ../vendor/bootstrap/js/tab.js +*/ + /* * Implement the tooltip control automatically * diff --git a/modules/system/assets/ui/less/tab.base.less b/modules/system/assets/ui/less/tab.base.less new file mode 100644 index 000000000..18fbc2274 --- /dev/null +++ b/modules/system/assets/ui/less/tab.base.less @@ -0,0 +1,226 @@ +// +// Navs +// -------------------------------------------------- + + +// Base class +// -------------------------------------------------- + +.nav { + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + &:extend(.clearfix all); + + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: @nav-link-padding; + &:hover, + &:focus { + text-decoration: none; + background-color: @nav-link-hover-bg; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &.disabled > a { + color: @nav-disabled-link-color; + + &:hover, + &:focus { + color: @nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; + } + } + } + + // Open dropdowns + .open > a { + &, + &:hover, + &:focus { + background-color: @nav-link-hover-bg; + border-color: @link-color; + } + } +} + + +// Tabs +// ------------------------- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid @nav-tabs-border-color; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > a { + margin-right: 2px; + line-height: @line-height-base; + border: 1px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + &:hover { + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; + } + } + + // Active state, and its :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: @nav-tabs-active-link-hover-color; + background-color: @nav-tabs-active-link-hover-bg; + border: 1px solid @nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + .nav-justified(); + .nav-tabs-justified(); + } +} + + +// Pills +// ------------------------- +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: @nav-pills-border-radius; + } + + li { + margin-left: 2px; + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + color: @nav-pills-active-link-hover-color; + background-color: @nav-pills-active-link-hover-bg; + } + } + } +} + + +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } +} + + +// Nav variations +// -------------------------------------------------- + +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + + > li { + float: none; + > a { + text-align: center; + margin-bottom: 5px; + } + } + + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } + + @media (min-width: @screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } +} + +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { + border-bottom: 0; + + > li > a { + // Override margin from .nav-tabs + margin-right: 0; + border-radius: @border-radius-base; + } + + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid @nav-tabs-justified-link-border-color; + } + + @media (min-width: @screen-sm-min) { + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + border-radius: @border-radius-base @border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } + } +} + + +// Tabbable tabs +// ------------------------- + +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } +} + + +// Dropdowns +// ------------------------- + +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); +} diff --git a/modules/backend/assets/less/controls/tab.less b/modules/system/assets/ui/less/tab.less similarity index 86% rename from modules/backend/assets/less/controls/tab.less rename to modules/system/assets/ui/less/tab.less index 92fc7c61c..a97858cf5 100644 --- a/modules/backend/assets/less/controls/tab.less +++ b/modules/system/assets/ui/less/tab.less @@ -1,8 +1,52 @@ +// +// Dependencies +// -------------------------------------------------- + +@import "global.less"; +@import "icon.less"; + // // Tabs control // - The control supports 3 basic CSS classes: master, primary and secondary. // -------------------------------------------------- +@import "tab.base.less"; + +@color-scroll-indicator: #bbbbbb; + +@color-tab-border: #d7d7d7; +@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; + +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; + +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; + +@nav-open-link-hover-color: #fff; + +@nav-tabs-border-color: #ddd; + +@nav-tabs-link-hover-border-color: @gray-lighter; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-border-color: #ddd; + +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; + +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: @component-active-color; + + .control-tabs { position: relative; @@ -14,8 +58,8 @@ .horizontal-scroll-indicators(@color-scroll-indicator); - &.scroll-active-before:before {color: @color-tab-active-border;} - &.scroll-active-after:after {color: @color-tab-active-border;} + &.scroll-active-before:before { color: @color-tab-active-border; } + &.scroll-active-after:after { color: @color-tab-active-border; } &:before, &:after { top: 5px; @@ -194,7 +238,7 @@ height: 1px; width: 100%; content: ' '; - border-bottom: 1px solid @color-ui-border; + border-bottom: 1px solid @color-tab-border; } > li { @@ -307,7 +351,7 @@ > li { padding-right: 10px; margin-right: 10px; - border-right: 1px solid @color-ui-border; + border-right: 1px solid @color-tab-border; a { font-size: 12px; diff --git a/modules/system/assets/ui/less/tooltip.less b/modules/system/assets/ui/less/tooltip.less new file mode 100644 index 000000000..2b1ec0027 --- /dev/null +++ b/modules/system/assets/ui/less/tooltip.less @@ -0,0 +1,108 @@ +// +// Dependencies +// -------------------------------------------------- + +@import "global.less"; + +// +// Tooltips +// -------------------------------------------------- + +@tooltip-max-width: 200px; +@tooltip-color: #fff; +@tooltip-bg: #000; +@tooltip-opacity: .9; + +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-bg; + +// Base class +.tooltip { + position: absolute; + z-index: @zindex-tooltip; + display: block; + visibility: visible; + font-size: @font-size-small; + line-height: 1.4; + .opacity(0); + + &.in { .opacity(@tooltip-opacity); } + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: @tooltip-max-width; + padding: 3px 8px; + color: @tooltip-color; + text-align: center; + text-decoration: none; + background-color: @tooltip-bg; + border-radius: @border-radius-base; +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + left: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + right: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; + border-right-color: @tooltip-arrow-color; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; + border-left-color: @tooltip-arrow-color; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + left: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + right: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } +}