diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css index f55774a..77745ba 100644 --- a/core/modules/outside_in/css/outside_in.module.css +++ b/core/modules/outside_in/css/outside_in.module.css @@ -3,8 +3,7 @@ * Styling for Outside-In module. */ -/* style the offcanvas container */ - +/* Style the offcanvas container. */ #offcanvas { box-sizing: border-box; position: fixed; @@ -13,51 +12,52 @@ display: inline-block; width: 25%; -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -o-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - /* 2s delay matches transition speed to transform speed */ + -moz-transform: translateX(100%); + -o-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + /* 2s delay matches transition speed to transform speed. */ -webkit-transition: all .7s ease-in-out 2s; - -moz-transition: all .7s ease-in-out 2s; - transition: all .7s ease-in-out 2s; + -moz-transition: all .7s ease-in-out 2s; + transition: all .7s ease-in-out 2s; z-index: 500; } [dir="rtl"] #offcanvas { text-align: right; -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); + -moz-transform: translateX(-100%); + -o-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } #main-canvas-wrapper.js-tray-open #offcanvas { -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -o-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } #main-canvas-wrapper #main-canvas { display: inline-block; width: 100%; -webkit-transition: all .7s ease-in-out; - -moz-transition: all .7s ease-in-out; - transition: all .7s ease-in-out; + -moz-transition: all .7s ease-in-out; + transition: all .7s ease-in-out; } #main-canvas-wrapper.js-tray-open #main-canvas { left: 0; /* LTR */ width: 75%; -webkit-transition: all .7s ease-in-out; - -moz-transition: all .7s ease-in-out; - transition: all .7s ease-in-out; + -moz-transition: all .7s ease-in-out; + transition: all .7s ease-in-out; } [dir="rtl"] #main-canvas-wrapper.js-tray-open #main-canvas { right: 0; } -/* button that closes the offcanvas tray */ +/* Button that closes the offcanvas tray. */ +/* @todo Add hover state. */ #offcanvas > button.offcanvasClose, -#offcanvas > button.offcanvasClose:hover { /* todo: add hover state */ +#offcanvas > button.offcanvasClose:hover { position: absolute; right: 15px; /* LTR */ top: 15px; @@ -98,17 +98,18 @@ #offcanvas .form-item { width: 100%; } -/* Change background when in edit mode an over editable item. - * Focus not taking effect because offcanvas load blurs element. todo: add .is-active +/** + * Change background when in edit mode an over editable item. + * Focus not taking effect because offcanvas load blurs element. */ +/* @todo Add .is-active. */ #main-canvas.js-outside-in-edit-mode .outside-in-editable:hover, -#main-canvas.js-outside-in-edit-mode .outside-in-editable:focus { - background-color: rgba(0,0,0,0.1); +#main-canvas.js-outside-in-edit-mode .outside-in-editable:focus { + background-color: rgba(0, 0, 0, 0.1); } -/* Highlight editable regions in edit mode -@todo Clean up this css. -*/ +/* Highlight editable regions in edit mode. */ +/* @todo Clean up this css. */ #main-canvas.js-outside-in-edit-mode .outside-in-editable { outline: -webkit-focus-ring-color auto 2px; outline-color: -webkit-focus-ring-color; @@ -116,12 +117,12 @@ outline-width: 1px; } -/* edit toolbar tab. todo: move changes into toolbar module when outside-in is not experimental */ +/* Edit toolbar tab. */ +/* @todo Move changes into toolbar module when outside-in is not experimental. */ .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab { float: left; } -/* always hide the toolbar tray in edit mode */ +/* Always hide the toolbar tray in edit mode. */ #toolbar-bar.js-outside-in-edit-mode .toolbar-tray .is-active { display: none; } - diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css index 7fb064c..1329fa9 100644 --- a/core/modules/outside_in/css/outside_in.theme.css +++ b/core/modules/outside_in/css/outside_in.theme.css @@ -3,66 +3,67 @@ * Visual styling for Outside-In module. */ -/* style the edit tab in the toolbar. todo: move this into core when module is not experimental. */ +/* Style the edit tab in the toolbar. */ +/* @todo Move this into core when module is not experimental. */ -/* smooth transitions between all toolbar states */ +/* Smooth transitions between all toolbar states. */ .toolbar-tab, .toolbar-item, .toolbar-icon:before { -webkit-transition: all .7s ease-in-out; - -moz-transition: all .7s ease-in-out; - transition: all .7s ease-in-out; + -moz-transition: all .7s ease-in-out; + transition: all .7s ease-in-out; } -/* style for both edit and editing states */ +/* Style for both edit and editing states. */ button.toolbar-icon.toolbar-icon-edit.toolbar-item { background: #0e69be; background-image: -webkit-linear-gradient(top, #0094f0, #0e69be); - background-image: linear-gradient(to bottom, #0094f0, #0e69be); + background-image: linear-gradient(to bottom, #0094f0, #0e69be); } button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover, -button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus, { +button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus { background-image: -webkit-linear-gradient(top, #0094f0, #0e69be); - background-image: linear-gradient(to bottom, #0094f0, #0e69be); + background-image: linear-gradient(to bottom, #0094f0, #0e69be); color: #fff; } button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover, -button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus, { +button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus { background-image: url(../../images/core/icons/ffffff/pencil.svg); } button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover, button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus { background-image: -webkit-linear-gradient(top, #0094f0, #0e69be); - background-image: linear-gradient(to bottom, #0094f0, #0e69be); + background-image: linear-gradient(to bottom, #0094f0, #0e69be); outline: none; } -button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > toolbar-icon-edit:before { +button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before { background-image: url(../../images/core/icons/ffffff/pencil.svg); } #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before { background-image: url(../../images/core/icons/ffffff/pencil.svg); } -/* toolbar when in edit mode */ +/* Toolbar when in edit mode. */ #toolbar-bar.js-outside-in-edit-mode { background-color: #fff; } -/* change text color for white background */ +/* Change text color for white background. */ #toolbar-bar.js-outside-in-edit-mode .toolbar-item { color: #999; } #toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active { color: #333; } -/* set color back to white for 'editing' button only */ +/* Set color back to white for 'editing' button only. */ #toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active { color: #fff; } #toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover { background-image: -webkit-linear-gradient(top, #0094f0, #0e69be); - background-image: linear-gradient(to bottom, #0094f0, #0e69be); + background-image: linear-gradient(to bottom, #0094f0, #0e69be); } -/* style the offcanvas container */ +/* Style the offcanvas container. */ div#offcanvas { background: #fff; border-left: 1px solid #ddd; /* LTR */ @@ -73,7 +74,7 @@ div#offcanvas { box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.1); } -/* stle the tray header */ +/* Style the tray header. */ #offcanvas h1 { font-size: 120%; border-bottom: 1px solid #ddd; diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js index fdcf515..43dfce9 100644 --- a/core/modules/outside_in/js/offcanvas.js +++ b/core/modules/outside_in/js/offcanvas.js @@ -87,7 +87,8 @@ * The HTTP status code. */ Drupal.AjaxCommands.prototype.openOffCanvas = function (ajax, response, status) { - // Discover display/viewport size. TODO: work in breakpoints for tray size. + // Discover display/viewport size. + // @todo Work in breakpoints for tray size. var $pageWrapper = $('#main-canvas-wrapper'); var pageWidth = $pageWrapper.width(); diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index 8fd0f42..8948780 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -98,7 +98,7 @@ var isActiveMode = function () { return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); - } + }; var setToggleActiveMode = function (forceActive) { forceActive = forceActive || false; diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml index 57c4b0b..7784954 100644 --- a/core/modules/outside_in/outside_in.libraries.yml +++ b/core/modules/outside_in/outside_in.libraries.yml @@ -4,7 +4,6 @@ drupal.outside_in: js/outside_in.js: {} css: component: - css/outside_in.base.css: {} css/outside_in.module.css: {} css/outside_in.theme.css: {} dependencies: diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module index db122c5..488f3a6 100644 --- a/core/modules/outside_in/outside_in.module +++ b/core/modules/outside_in/outside_in.module @@ -5,7 +5,6 @@ * Allows configuring blocks and other configuration from the front-end of the site. */ -use Drupal\Core\Plugin\PluginFormInterface; use Drupal\Core\Routing\RouteMatchInterface; use Drupal\outside_in\Block\BlockEntityOffCanvasForm;