Commit 85837c22 authored by Andreas Steiger's avatar Andreas Steiger Committed by Susanne Moog
Browse files

[TASK] Improve SCSS of Form Framework

Cleanup SCSS of Form Framework. Improve the usage of variables.
Furthermore, optimize the structure tree spacings of Form Editor.

Resolves: #82327
Releases: master
Change-Id: Ia1088475e16e5a04999140cca5ee3ff7d713e661
Reviewed-on: https://review.typo3.org/53962

Reviewed-by: Benjamin Kott's avatarBenjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott's avatarBenjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Björn Jacob's avatarBjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Björn Jacob's avatarBjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Susanne Moog's avatarSusanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog's avatarSusanne Moog <susanne.moog@typo3.org>
parent 1873b9ab
......@@ -113,7 +113,7 @@ $callout-notice-border: $state-notice-border;
//
.callout-sm {
margin: 10px 0;
padding: $callout-padding/2;
padding: $callout-padding / 2;
.callout-title {
font-size: 1em;
......
......@@ -72,7 +72,7 @@ $card-shadow-hover-color: transparentize($card-base-color, 0.7);
.card-container {
display: flex;
flex-wrap: wrap;
margin: $card-spacing #{-$card-spacing};
margin: $card-spacing #{ - $card-spacing};
.card {
margin-left: $card-spacing;
......
......@@ -7,24 +7,24 @@
//
// Variables
//
$module-bg: #fff;
$module-color: inherit;
$module-dark-bg: #333;
$module-dark-color: #ccc;
$module-docheader-bg: #eee;
$module-docheader-border: #c3c3c3;
$module-docheader-zindex: 300;
$module-docheader-height: 65px;
$module-docheader-padding-vertical: 0;
$module-docheader-padding-horizontal: 24px;
$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
$module-docheader-bar-height: 26px;
$module-docheader-bar-margin-vertical: 4px;
$module-docheader-bar-margin-horizontal: 0;
$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal;
$module-body-padding-vertical: 24px;
$module-body-padding-horizontal: 24px;
$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;
$module-bg: #fff !default;
$module-color: inherit !default;
$module-dark-bg: #333 !default;
$module-dark-color: #ccc !default;
$module-docheader-bg: #eee !default;
$module-docheader-border: #c3c3c3 !default;
$module-docheader-zindex: 300 !default;
$module-docheader-height: 65px !default;
$module-docheader-padding-vertical: 0 !default;
$module-docheader-padding-horizontal: 24px !default;
$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal !default;
$module-docheader-bar-height: 26px !default;
$module-docheader-bar-margin-vertical: 4px !default;
$module-docheader-bar-margin-horizontal: 0 !default;
$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal !default;
$module-body-padding-vertical: 24px !default;
$module-body-padding-horizontal: 24px !default;
$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal !default;
//
// Template
......
......@@ -3,7 +3,6 @@
// ---------------
// Description: Global styles for t3editor wrapper.
//
$panel-bg-color: #f7f7f7;
$panel-border-color: #ddd;
$fullscreen-top: 64px;
......
@charset "utf-8";
//
// Form Framework
// ===========
// Contains all needed styles of the TYPO3 Form Framework.
//
//
// Variables
// Load global variables
//
@import "variables/main";
// /Build/Resources/Public/Sass/variables/_main.scss
$gray-dark: rgb(90, 90, 90);
$gray: rgb(115, 115, 115);
$brand-primary: #0078e6;
$brand-success: #79a548;
$brand-info: #6daae0;
$brand-warning: #e8a33d;
$brand-danger: #c83c3c;
$table-bg: #fafafa;
$table-bg-hover: darken($table-bg, 5%);
$panel-default-heading-bg: #ddd;
$text-color: #000;
$btn-default-bg: #eee;
$btn-default-border: #bbb;
$line-height-base: 1.5;
// $toDo remove these variables after including this file in backend.scss
// Bootstrap: variables.scss
$panel-default-text: $gray-dark;
// /Build/Resources/Public/Sass/cropper/_variables.scss
$screen-lg: 1200px; // Large screen / wide desktop
// /Build/Resources/Public/Sass/Component/_module.scss
$module-docheader-height: 65px;
$module-docheader-border: #c3c3c3;
// /Build/Resources/Public/Sass/typo3/_module_web_page.scss
$page-ce-header-hover-bg: #d0d0d0;
// /Build/Resources/Public/Sass/typo3/_element_tree.scss
$navigation-bg: #f5f5f5;
// Form Variables
//
// Variables
//
$stage-max-width: 600px;
$stage-abstract-element-height: 62px;
$stage-abstract-element-toolbar-height: 35px;
$stage-icon-container-width: 40px;
$stage-validation-list-width: 100px;
$stage-breakpoint: ($screen-lg + 100);
$stage-validation-list-width: 100px;
$stage-validation-transition-time-in: 0.2s;
$stage-validation-transition-time-out: 0.3s;
$stage-background-color: #fafafa;
$stage-element-toolbar-background: #d0d0d0;
$collection-element-background: $page-ce-header-hover-bg;
$navigation-bg: $gray-lighter;
$tree-indentation: 20px;
$tree-line-height: 20px;
//
// Mixins
......@@ -216,6 +190,21 @@ $collection-element-background: $page-ce-header-hover-bg;
}
}
.icon {
margin-top: 1px;
}
.tree li > div,
#t3-form-navigation-component-tree-root-container {
height: $tree-line-height;
> span {
display: inline-block;
vertical-align: top;
line-height: $tree-line-height;
}
}
.tree li > div:hover,
.t3-form-form-element-selected,
#t3-form-navigation-component-tree-root-container:hover,
......@@ -223,8 +212,8 @@ $collection-element-background: $page-ce-header-hover-bg;
background-color: darken($navigation-bg, 1%);
border-color: darken($navigation-bg, 10%);
border-radius: 2px;
margin-left: -2em;
padding-left: 2em;
margin-left: -$tree-indentation;
padding-left: $tree-indentation;
margin-right: -1.3em;
}
......
......@@ -7,7 +7,6 @@
// Load global Variables
//
@import "variables/main";
$grid-float-breakpoint: $screen-md-min;
//
......
......@@ -49,7 +49,7 @@ $gridder-badge-size: 20px;
border-top: 0;
bottom: 0;
left: 50%;
margin-left: -$gridder-spacing/2;
margin-left: -$gridder-spacing / 2;
content: '';
}
......
......@@ -2,7 +2,7 @@
// Variables
//
$navigation-text: #000;
$navigation-bg: rgb(245, 245, 245);
$navigation-bg: $gray-lighter;
$navigation-border: rgb(195, 195, 195);
//
......
......@@ -247,3 +247,28 @@ $bs-datetimepicker-text-shadow: none;
// Overwrite Progress bar background color
$progress-bg: #dedede;
//
// Components
// =========
//
// Module
$module-bg: #fff;
$module-color: inherit;
$module-dark-bg: #333;
$module-dark-color: #ccc;
$module-docheader-bg: #eee;
$module-docheader-border: #c3c3c3;
$module-docheader-zindex: 300;
$module-docheader-height: 65px;
$module-docheader-padding-vertical: 0;
$module-docheader-padding-horizontal: 24px;
$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
$module-docheader-bar-height: 26px;
$module-docheader-bar-margin-vertical: 4px;
$module-docheader-bar-margin-horizontal: 0;
$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal;
$module-body-padding-vertical: 24px;
$module-body-padding-horizontal: 24px;
$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;
......@@ -63,8 +63,8 @@ define(['jquery',
svgLink: {
height: 15,
paths: {
angle: 'M0 0 V21 H15',
vertical: 'M0 0 V21 H0',
angle: 'M0 0 V20 H15',
vertical: 'M0 0 V20 H0',
hidden: 'M0 0 V0 H0'
},
width: 15
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment