File modules/cms/ui/themes/default/style/openrat-workbench.less
Last commit: Sun Feb 13 21:52:29 2022 +0100 dankert Fix: Very long text should not crash the UI, so the overflow is now hidden.
1 /* 2 OpenRat Content Management System 3 Copyright (C) 2002-2010 Jan Dankert 4 5 This program is free software; you can redistribute it and/or 6 modify it under the terms of the GNU General Public License 7 as published by the Free Software Foundation; either version 2 8 of the License, or (at your option) any later version. 9 10 This program is distributed in the hope that it will be useful, 11 but WITHOUT ANY WARRANTY; without even the implied warranty of 12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 GNU General Public License for more details. 14 15 You should have received a copy of the GNU General Public License 16 along with this program; if not, write to the Free Software 17 Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. 18 */ 19 20 21 /* Usage to this variable is safe to be removed */ 22 @color-overridden-by-theme: black; 23 24 .border-radius (@radius) { 25 border-radius: @radius; 26 -moz-border-radius: @radius; 27 -webkit-border-radius: @radius; 28 -khtml-border-radius: @radius; 29 } 30 31 32 @smartphones: ~"only screen and (max-width: 55rem)"; 33 @wide: ~"only screen and (min-width: 75rem)"; 34 35 36 37 .or { 38 39 &-workbench { 40 41 width: 100%; 42 height: 100%; 43 display: flex; 44 flex-direction: row; 45 visibility: hidden; 46 47 &--visible-on-dialog-open { 48 // make the menu buttons visible if a dialog is open. 49 z-index: 3; 50 } 51 52 53 &-screen { 54 /* vertical flexbox */ 55 display: flex; 56 flex-direction: column; 57 position: relative; 58 59 /* 60 https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox 61 Whenever you've got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size. 62 */ 63 //min-width: 0; 64 //min-height: 0; 65 66 //padding-top: 0.5em; 67 68 > * { 69 //min-width: 0; 70 //min-height: 0; 71 overflow-y: auto; 72 overflow-x: hidden; 73 74 //width: 100%; 75 } 76 77 78 } 79 80 &-main { 81 flex: 1; 82 min-width: 0; // min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow. 83 } 84 85 &-title { 86 height: 3.0rem; 87 max-height: 3.0rem; 88 min-height: 3.0rem; 89 overflow: hidden; 90 padding: 0.5em; 91 //opacity: 0.9; 92 93 font-size: 1.2em; 94 95 .toolbar-icon { 96 97 .arrow-down { 98 display: inline; 99 } 100 101 span.label, .arrow-down { 102 @media @smartphones { 103 display: none; 104 } 105 } 106 } 107 } 108 109 110 111 &-content { 112 flex: 1; 113 //margin-left: 33%; 114 //transition: margin-left 0.15s ease-in-out; 115 116 @media @smartphones { 117 //margin-left: 0; 118 } 119 120 //transition: opacity 0.5s ease; 121 //display: flex; 122 //flex-direction: column; 123 124 /* 125 &.is-closed { 126 flex: 0.5; 127 cursor: not-allowed; 128 pointer-events: none; 129 130 @media @smartphones { 131 // do not display the views in mobile mode. 132 flex: 0; 133 } 134 135 //overflow: hidden; 136 }*/ 137 138 139 } 140 141 /* &-section { 142 margin: 1.5em; 143 @media @smartphones { 144 margin: 0.5em; 145 } 146 147 //border: 1px solid; 148 //.border-radius(5px); 149 150 151 .or-view-toolbar { 152 display: inline; 153 } 154 155 // Wenn Sektion geschlossen, keine Toolbar anzeigen. 156 &.or--is-closed { 157 .or-view-toolbar { 158 display: none; 159 } 160 161 } 162 163 // Diabled Sections are not displayed. 164 &.or--disabled { 165 //display: none; 166 } 167 168 &.or--is-empty { 169 //display: none; 170 } 171 }*/ 172 173 174 /* */ 175 &--visible-on-small { 176 display: none; 177 } 178 179 &--visible-on-wide { 180 display: block; 181 } 182 183 &--navigation-is-small { 184 .or-workbench--visible-on-wide { 185 display: none; 186 } 187 188 .or-workbench--visible-on-small { 189 display: block; 190 } 191 } 192 193 &-navigation { 194 195 display: flex; 196 flex-direction: row; 197 width: 30em; 198 199 &-content { 200 //width: 100%; 201 flex: 1; 202 @media @smartphones { 203 flex: none; 204 } 205 } 206 &-filler { 207 flex: 0; 208 opacity: 0.6; 209 } 210 211 &-container { 212 213 width: 100%; 214 position: relative; 215 216 //position: fixed; 217 //z-index: 1; 218 //opacity: 0.9; 219 //transition: width 0.15s ease-in-out; 220 //height: 100%; 221 padding:0.7em; 222 overflow-x:hidden; // no horizontal scrolling 223 224 } 225 226 227 .or-navtree { 228 //transition: opacity 0.1s ease-in-out; 229 } 230 231 &--is-small { 232 width: 0; 233 234 //& ~ .or-workbench-workplace { 235 // margin-left: 0; 236 //} 237 238 .or-workbench-navigation-container { 239 //opacity: 0.2; 240 width: 0; 241 overflow-y: hidden; 242 243 .or-navtree { 244 opacity: 0.2; 245 } 246 247 /* 248 &:hover { 249 overflow-y: auto; 250 width: 33%; 251 opacity: 0.9; 252 253 .or-navtree { 254 opacity: 1; 255 } 256 } 257 */ 258 } 259 260 .or-navtree { 261 opacity: 0; 262 } 263 } 264 265 @media @smartphones { 266 267 width: 0; 268 269 .or-workbench-navigation-container { 270 271 /* 272 width: 0; 273 padding: 0; 274 */ 275 } 276 277 &--is-open { 278 279 .or-workbench-navigation-content { 280 width:90%; 281 } 282 .or-workbench-navigation-filler { 283 flex: 1; 284 } 285 286 position: fixed; 287 width: 100%; 288 z-index: 1; 289 opacity: 1; 290 height:100%; 291 } 292 } 293 294 295 @media @wide { 296 overflow-y: auto; 297 } 298 299 300 .or-view { 301 height: 100%; 302 } 303 304 } 305 } 306 307 308 &--visible-on-mobile { 309 display: none; 310 @media @smartphones { 311 display: inline; 312 } 313 314 } 315 &--visible-on-desktop { 316 //display: inline; 317 @media @smartphones { 318 display: none; 319 } 320 } 321 322 &-toggle-nav-small { 323 display: inline; 324 @media @smartphones { 325 display: none; 326 } 327 } 328 329 &-toggle-nav-open-close { 330 display: none; 331 @media @smartphones { 332 display: inline; 333 } 334 } 335 336 &-toolbar-icon.or-search { 337 //width: 8em; 338 @media @smartphones { 339 //width: 8em; 340 } 341 342 input { 343 @media @smartphones { 344 //width: 3em; 345 } 346 } 347 } 348 349 350 /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */ 351 &-loader 352 { 353 position: absolute; 354 top: 30%; 355 left: 0; 356 right: 0; 357 margin-left: auto; 358 margin-right: auto; 359 360 border-width: 0.5em; 361 border-style: solid; 362 border-radius: 50%; 363 visibility: hidden; 364 z-index: 6; 365 366 &--is-active { 367 368 visibility: visible; 369 width: 5em; 370 height: 5em; 371 animation: spin 2s linear infinite; 372 373 @keyframes spin { 374 0% { transform: rotate( 0deg); } 375 100% { transform: rotate(360deg); } 376 } 377 378 // Reduced Motion 379 @media screen and (prefers-reduced-motion: reduce) { 380 display: none; 381 } 382 } 383 } 384 385 386 387 } 388 389 390 391 392 393 394 @media @smartphones { 395 html { 396 font-size: 1.1em; 397 } 398 } 399
Downloadmodules/cms/ui/themes/default/style/openrat-workbench.less
History Sun, 13 Feb 2022 21:52:29 +0100 dankert Fix: Very long text should not crash the UI, so the overflow is now hidden. Sat, 18 Dec 2021 03:44:18 +0100 dankert New: Display Workbench after Theme-CSS is loaded. Tue, 30 Nov 2021 00:25:32 +0100 Jan Dankert Cleanup the notices. Mon, 29 Nov 2021 23:54:33 +0100 Jan Dankert New: Spinner image with pure css. So we can colorize it now. Mon, 29 Nov 2021 01:22:40 +0100 Jan Dankert New: Themes may contain multiple color schemes (for now only "dark" and "light"), modern browsers are selecting the right scheme. Sat, 13 Feb 2021 00:11:23 +0100 Jan Dankert New: Transition-Duration is controllable via style configuration. So there is no need for a dedicated FX on/off-switch in the profile. Sat, 13 Feb 2021 00:01:53 +0100 Jan Dankert Fix: Navigation is available, while dialog is open; Fix: Shrink Action title text if necessary. Fri, 12 Feb 2021 20:08:11 +0100 Jan Dankert Fix: Show search result on top of the navigation. Fri, 12 Feb 2021 00:43:08 +0100 Jan Dankert New: Style colors; Fix: Mobile navigation, global search. Wed, 10 Feb 2021 23:56:07 +0100 Jan Dankert Fix: Colourize images; Fix: Mobile navigation. Wed, 10 Feb 2021 23:05:46 +0100 Jan Dankert Moving the search form upon the navigation, because the search is more like a navigation. Wed, 10 Feb 2021 00:00:21 +0100 Jan Dankert Using only fullscreen views; Navigate to parent instead of complete breadcrumb. Wed, 11 Nov 2020 13:30:22 +0100 Jan Dankert A little transparent background for the menu. Wed, 11 Nov 2020 13:11:14 +0100 Jan Dankert Fixed navigation layout issues. Wed, 11 Nov 2020 00:31:13 +0100 Jan Dankert Fixing layout problems in the mobile navigation. Tue, 10 Nov 2020 01:16:21 +0100 Jan Dankert New: Background image Mon, 9 Nov 2020 22:29:34 +0100 Jan Dankert UI-Refactoring: The navigation is now on the left side with full height. Thu, 5 Nov 2020 22:56:49 +0100 Jan Dankert box-shadow should only be set in the theme css (because a color is needed and a color is theming) Thu, 5 Nov 2020 22:51:14 +0100 Jan Dankert Cleaned up the LESS files, more use of the BEM schema. Sat, 24 Oct 2020 23:51:11 +0200 Jan Dankert Cleanup LESS files, introduce BEM. Sun, 18 Oct 2020 01:30:49 +0200 Jan Dankert New component "fieldset" for better form layout. Sat, 10 Oct 2020 01:29:41 +0200 Jan Dankert Refactoring: Only using CSS classes with the 'or-'-prefix. Sun, 4 Oct 2020 23:53:25 +0200 Jan Dankert New: The tree is now hidable with a dedicated button. No more hover effect in the navigation. Sun, 4 Oct 2020 16:33:53 +0200 Jan Dankert Refactoring: Using the icon font for displaying arrows. Sun, 27 Sep 2020 04:09:05 +0200 Jan Dankert Refactoring: The tree functions should use normal templates as the other actions. Beware of the JS hell. Sun, 23 Feb 2020 04:01:30 +0100 Jan Dankert Refactoring with Namespaces for the cms modules, part 1: moving.