Commit 25c1aec6 authored by Benjamin Kott's avatar Benjamin Kott Committed by Susanne Moog
Browse files

[TASK] Styling cleanups in several modules

This patch cleans up stylings across various modules and
streamlines the used markup as well as the folder structure.

Resolves: #90491
Releases: master

Change-Id: I7cf564da3e981f455c466dbc24a33858145525b0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63362


Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Susanne Moog's avatarSusanne Moog <look@susi.dev>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Susanne Moog's avatarSusanne Moog <look@susi.dev>
parent b66f35a0
......@@ -117,6 +117,7 @@
@import "component/module";
@import "component/panel";
@import "component/checkbox";
@import "component/simpletable";
//
// Bootstrap Utility classes
......
......@@ -21,12 +21,20 @@
@import "component/svgtree";
@import "component/elementbrowser";
@import "component/modal";
@import "component/note";
@import "component/card";
//
// Modules
//
@import "module/access";
@import "module/extensionmanager";
@import "module/install";
@import "module/page";
@import "module/recycler";
@import "module/tstemplate";
@import "module/viewpage";
@import "module/workspaces";
//
// Components from bootstrap plugins
......@@ -61,7 +69,6 @@
@import "typo3/element_contextmenu";
@import "typo3/element_docheader";
@import "typo3/element_message";
@import "typo3/element_pagetree";
@import "typo3/element_slider";
@import "typo3/element_spinner";
@import "typo3/element_tab";
......@@ -85,18 +92,7 @@
@import "typo3/main_backend_layout_wizard";
@import "typo3/main_form";
@import "typo3/main_new_content_element_wizard";
@import "typo3/module_database";
@import "typo3/module_install";
@import "typo3/module_recycler";
@import "typo3/module_scheduler";
@import "typo3/module_tstemplate";
@import "typo3/module_web_page";
@import "typo3/module_workspaces";
@import "typo3/debugconsole";
@import "typo3/module_web_list_sysnote";
@import "typo3/module_extensionmanager";
@import "typo3/module_beuser";
@import "typo3/module_cshmanual";
@import "typo3/wizard_localization";
@import "typo3/structure/element_version";
@import "typo3/structure/element_wizard";
......
//
// Notes
// ============
//
//
// Minimal Usage
// -------------
//
// <div class="note">
// <div class="note-header">
// <div class="note-header-bar">
// <div class="note-title">
// ...
// </div>
// <div class="note-actions">
// ...
// </div>
// </div>
// </div>
// <div class="note-body">
// <p>...</p>
// </div>
// </div>
//
//
// Variables
//
$note-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.25);
$note-padding: 20px;
$note-default-background: #fff;
$note-notice-background: $state-notice-bg;
$note-instruction-background: $state-info-bg;
$note-todo-background: $state-success-bg;
$note-template-background: $state-warning-bg;
//
// Component
//
.note-list {
margin: 1em 0;
}
.note {
border-radius: 2px;
margin-bottom: 1em;
overflow: hidden;
position: relative;
z-index: 1;
background-color: $note-default-background;
box-shadow: $note-shadow;
}
.note-header {
background-color: darken($note-default-background, 5%);
padding: ($note-padding / 2) $note-padding;
}
.note-header-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-left: -($note-padding / 4);
margin-right: -($note-padding / 4);
> * {
padding-left: ($note-padding / 4);
padding-right: ($note-padding / 4);
}
}
.note-actions {
margin-left: auto;
}
.note-body {
padding: $note-padding;
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
//
// Variants
//
// Instruction
.note-category-1 {
.note-header {
background-color: darken($note-instruction-background, 5%);
}
.note-body {
background-color: $note-instruction-background;
}
}
// Template
.note-category-2 {
.note-header {
background-color: darken($note-template-background, 5%);
}
.note-body {
background-color: $note-template-background;
}
}
// Notice
.note-category-3 {
.note-header {
background-color: darken($note-notice-background, 5%);
}
.note-body {
background-color: $note-notice-background;
}
}
// Todo
.note-category-4 {
.note-header {
background-color: darken($note-todo-background, 5%);
}
.note-body {
background-color: $note-todo-background;
}
}
//
// Simple Table
//
.simpletable {
padding: 0;
margin-bottom: 1.5em;
th,
td {
padding: 0.25em 1em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
//
// Legend
//
.beuser-legend {
.access-legend {
margin-bottom: 18px;
.pull-left {
margin-right: 0.5em;
}
td {
overflow: hidden;
}
.t3-icon {
margin-right: 0;
}
.number {
border: 1px solid #000;
border-radius: 2px;
......@@ -62,11 +50,3 @@
display: block;
}
}
//
// Icons
//
.col-icon img {
max-width: 28px;
max-height: 28px;
}
//
// Extensionmanager
//
.ui-toolbar {
margin-bottom: 5px;
.dataTables_filter {
float: left;
}
.extensionmanager-is-loading {
opacity: 0 !important;
}
.extensionmanager-is-hidden {
display: none !important;
}
// Paginator
.dataTables_info {
display: none;
.extensionmanager-is-shown {
display: block !important;
}
// Extension List
.extension-list-last-updated {
font-weight: bold;
padding-right: 0.4em;
cursor: help;
}
.dataTables_paginate {
float: left;
margin: 10px 0 0;
.extension-list {
.installed td {
background-color: #ccdec2;
}
.available td {
background-color: #e1e1aa;
}
.insecure {
background-color: #ffd9d9;
}
.outdated {
background-color: #d1d0ff;
}
.inactive {
color: #aaa;
}
}
// Upload form
.uploadForm {
background-color: #ededed;
border-top: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
padding: 12px;
margin-bottom: 24px;
.extension-icon {
height: 16px;
width: 16px;
}
// Loader
#terTableWrapper {
position: relative;
margin-top: 1em;
.splash-receivedata {
display: none;
position: absolute;
top: 50px;
left: 0;
right: 0;
text-align: center;
}
}
// Distributions List
......@@ -94,192 +129,3 @@
margin-top: 2.5em;
margin-bottom: 2.5em;
}
// Misc
.ui-widget-header {
background: none;
border: none;
font-weight: normal;
}
.dataTables_info {
font-size: 10px;
color: #444;
float: left;
}
.paging_two_button .ui-button {
float: left;
cursor: pointer;
}
.paging_full_numbers {
float: right;
.ui-button {
padding: 2px 6px;
margin: 0;
cursor: pointer;
color: #333 !important;
}
}
.dataTables_paginate {
width: auto;
.ui-button {
margin-right: -0.1em !important;
}
}
.typo3-extension-list {
.ext-icon {
max-height: 16px;
max-width: 16px;
}
tr.installed td {
background-color: #c8ffaa;
}
tr.available td {
background-color: #e1e1aa;
}
.inactive {
color: rgb(170, 170, 170);
}
.insecure {
color: #ff2262;
a {
color: inherit;
}
}
.outdated {
color: #0c08ff;
a {
color: inherit;
}
}
// Hide author for now
.author {
display: none;
}
}
.headerTooltip {
@include box-shadow(2px 2px 11px #666);
display: none;
width: 150px;
background-color: #ffa;
border: 1px solid #cc9;
padding: 3px;
font-size: 13px;
z-index: 1000;
}
// Loader
#terTableWrapper {
position: relative;
margin-top: 1em;
.splash-receivedata {
display: none;
position: absolute;
top: 50px;
left: 50%;
margin: 0 0 0 -150px;
a {
display: inline-block;
width: 200px;
vertical-align: top;
padding: 3px 20px;
}
&.is-shown {
display: block;
}
}
.spinner {
display: inline-block;
}
.ui-icon {
width: 16px;
height: 16px;
}
}
.time-since-last-update {
font-weight: bold;
padding-right: 0.4em;
cursor: help;
}
.is-loading {
opacity: 0;
}
// If something is hidden
.is-hidden {
display: none;
}
// Show all versions
.versions-all {
display: inline-block;
width: 20px;
text-indent: -200px;
overflow: hidden;
}
.currentVersionInfo {
padding: 0 0 20px;
td {
padding: 4px 0;
}
th {
font-weight: normal;
color: #8c8c8c;
padding: 4px 20px 4px 0;
}
}
span.ter-ext-state {
padding: 0 0 0 5px;
font-weight: bold;
text-transform: capitalize;
}
#typo3-docbody form.download {
margin-bottom: 0;
}
.typo3-extensionmanager-headerRowLeft {
display: inline-block;
.typo3-extensionmanager-searchTerFieldWrapper {
display: inline-block;
position: relative;
input {
height: 15px;
}
.t3-icon-input-clear {
position: absolute;
right: 3px;
top: 4px;
}
}
}
......@@ -309,7 +309,7 @@ $page-ce-dropzone-possible-border: $state-warning-border;
border: 1px dashed $page-ce-dropzone-border;
border-radius: $page-ce-dropzone-border-radius;
background-color: $page-ce-dropzone-bg;
margin: -38px 0 -37px 0;
margin: -38px 0 -37px;
padding: 50px 10px;
z-index: 500;
position: relative;
......
#workspace-panel {
.workspace-panel {
tr.collapsing {
transition: none;
}
......@@ -12,30 +12,28 @@
}
}
span.item-state- {
&modified {
color: #f78f25;
}
.workspace-state-modified {
color: #ff8700;
}
&moved {
color: #457fb8;
}
.workspace-state-moved {
color: #457fb8;
}
&new {
color: #3c9934;
}
.workspace-state-new {
color: #3c9934;
}
&hidden {
color: #abaaaa;
}
.workspace-state-hidden {
color: #abaaaa;
}
&deleted {
color: #000;
text-decoration: line-through;
}
.workspace-state-deleted {
color: #000;
text-decoration: line-through;
}
.legend {
.workspace-legend {
margin: 5px;
height: 18px;
color: #888;
......
//
// Pagetree
//
#typo3-pagetree-topPanelItems {
background-color: #eee;
}
#typo3-pagetree {
height: 100%;
.x-panel-bwrap,
.x-panel-body {
height: 100%;
}
ul {
padding-left: 0;
list-style: none;
}