From f363c76842b66595c0a3b76a3b9b6022db43221d Mon Sep 17 00:00:00 2001 From: Simon Paidla Date: Thu, 28 Mar 2024 10:07:56 +0100 Subject: [PATCH] TASK // Prevent deep content nesting and refactor structure --- Classes/Eel/CssClassMappingHelper.php | 34 +- .../NodeTypes.Content.OneColumn.yaml | 39 - Configuration/NodeTypes.FlexCollection.yaml | 48 - .../NodeTypes.Override.Content.Column.yaml | 12 - ...p.yaml => Settings.FlexColumnLayouts.yaml} | 2 - Configuration/Settings.Fusion.yaml | 4 + .../{Settings.yaml => Settings.Neos.yaml} | 3 - .../Version20200904150412.yaml | 85 +- NodeTypes/Content/OneColumn.yaml | 37 + NodeTypes/ContentCollection/FirstColumn.yaml | 7 + NodeTypes/ContentCollection/FourthColumn.yaml | 7 + NodeTypes/ContentCollection/SecondColumn.yaml | 7 + NodeTypes/ContentCollection/ThirdColumn.yaml | 7 + .../Mixin/BreakpointsMixin.yaml | 1 - .../Mixin/FlexAlignContentMixin.yaml | 0 .../Mixin/FlexAlignItemsMixin.yaml | 0 .../Mixin/FlexBasisMixin.yaml | 0 .../FlexCollection.AdvancedFeatures.yaml | 2 +- .../Mixin/FlexCollection.BasicFeatures.yaml | 2 +- .../FlexCollection.IntermediateFeatures.yaml | 2 +- NodeTypes/Mixin/FlexCollection.yaml | 12 + .../Mixin/FlexContainer.AdvancedFeatures.yaml | 2 +- .../Mixin/FlexContainer.BasicFeatures.yaml | 2 +- .../FlexContainer.IntermediateFeatures.yaml | 2 +- .../Mixin/FlexDirectionMixin.yaml | 0 .../Mixin/FlexJustifyMixin.yaml | 2 +- .../Mixin/FlexOrderMixin.yaml | 4 +- .../Mixin/FlexShrinkMixin.yaml | 1 - .../Mixin/FlexWrapMixin.yaml | 0 .../Mixin/VerticalSeparatorMixin.yaml | 0 .../Mixin/VisualMixin.yaml | 0 .../Neos.NodeTypes.ColumnLayouts/Column.yaml | 12 + .../FourColumn.yaml | 0 .../ThreeColumn.yaml | 0 .../TwoColumn.yaml | 0 README.md | 186 ++-- .../{Content => Component}/MultiColumn.fusion | 0 .../Fusion/Component/SingleColumn.fusion | 48 + .../OneColumn.fusion | 0 .../Fusion/Content/SingleColumn.fusion | 3 - .../Scss/BootstrapAdditionalFlexClasses.scss | 1 - Resources/Private/Scss/Mixins/_FlexBasis.scss | 44 +- Resources/Private/Scss/_Variables.scss | 8 +- .../de/NodeTypes/FlexAlignContentMixin.xlf | 2 +- .../Css/BootstrapAdditionalFlexClasses.css | 279 +++++- Resources/Public/Css/TailwindFlexClasses.css | 822 +++++++++++++++++- package.json | 20 +- 47 files changed, 1443 insertions(+), 306 deletions(-) delete mode 100644 Configuration/NodeTypes.Content.OneColumn.yaml delete mode 100644 Configuration/NodeTypes.FlexCollection.yaml delete mode 100644 Configuration/NodeTypes.Override.Content.Column.yaml rename Configuration/{Settings.CssClassMapping.Bootstrap.yaml => Settings.FlexColumnLayouts.yaml} (99%) create mode 100644 Configuration/Settings.Fusion.yaml rename Configuration/{Settings.yaml => Settings.Neos.yaml} (68%) create mode 100644 NodeTypes/Content/OneColumn.yaml create mode 100644 NodeTypes/ContentCollection/FirstColumn.yaml create mode 100644 NodeTypes/ContentCollection/FourthColumn.yaml create mode 100644 NodeTypes/ContentCollection/SecondColumn.yaml create mode 100644 NodeTypes/ContentCollection/ThirdColumn.yaml rename Configuration/NodeTypes.Mixin.BreakpointsMixin.yaml => NodeTypes/Mixin/BreakpointsMixin.yaml (99%) rename Configuration/NodeTypes.Mixin.FlexAlignContentMixin.yaml => NodeTypes/Mixin/FlexAlignContentMixin.yaml (100%) rename Configuration/NodeTypes.Mixin.FlexAlignItemsMixin.yaml => NodeTypes/Mixin/FlexAlignItemsMixin.yaml (100%) rename Configuration/NodeTypes.Mixin.FlexBasisMixin.yaml => NodeTypes/Mixin/FlexBasisMixin.yaml (100%) rename Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml => NodeTypes/Mixin/FlexCollection.AdvancedFeatures.yaml (98%) rename Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml => NodeTypes/Mixin/FlexCollection.BasicFeatures.yaml (99%) rename Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml => NodeTypes/Mixin/FlexCollection.IntermediateFeatures.yaml (98%) create mode 100644 NodeTypes/Mixin/FlexCollection.yaml rename Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml => NodeTypes/Mixin/FlexContainer.AdvancedFeatures.yaml (96%) rename Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml => NodeTypes/Mixin/FlexContainer.BasicFeatures.yaml (99%) rename Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml => NodeTypes/Mixin/FlexContainer.IntermediateFeatures.yaml (97%) rename Configuration/NodeTypes.Mixin.FlexDirectionMixin.yaml => NodeTypes/Mixin/FlexDirectionMixin.yaml (100%) rename Configuration/NodeTypes.Mixin.FlexJustifyMixin.yaml => NodeTypes/Mixin/FlexJustifyMixin.yaml (99%) rename Configuration/NodeTypes.Mixin.FlexOrderMixin.yaml => NodeTypes/Mixin/FlexOrderMixin.yaml (95%) rename Configuration/NodeTypes.Mixin.FlexShrinkMixin.yaml => NodeTypes/Mixin/FlexShrinkMixin.yaml (99%) rename Configuration/NodeTypes.Mixin.FlexWrapMixin.yaml => NodeTypes/Mixin/FlexWrapMixin.yaml (100%) rename Configuration/NodeTypes.Mixin.VerticalSeparatorMixin.yaml => NodeTypes/Mixin/VerticalSeparatorMixin.yaml (100%) rename Configuration/NodeTypes.Mixin.VisualMixin.yaml => NodeTypes/Mixin/VisualMixin.yaml (100%) create mode 100644 NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/Column.yaml rename Configuration/NodeTypes.Override.Content.FourColumn.yaml => NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/FourColumn.yaml (100%) rename Configuration/NodeTypes.Override.Content.ThreeColumn.yaml => NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/ThreeColumn.yaml (100%) rename Configuration/NodeTypes.Override.Content.TwoColumn.yaml => NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/TwoColumn.yaml (100%) rename Resources/Private/Fusion/{Content => Component}/MultiColumn.fusion (100%) create mode 100644 Resources/Private/Fusion/Component/SingleColumn.fusion rename Resources/Private/Fusion/{Overrides/Neos.NodeTypes.ColumnLayouts => Content}/OneColumn.fusion (100%) delete mode 100644 Resources/Private/Fusion/Content/SingleColumn.fusion diff --git a/Classes/Eel/CssClassMappingHelper.php b/Classes/Eel/CssClassMappingHelper.php index f38d2cf..e6c144f 100644 --- a/Classes/Eel/CssClassMappingHelper.php +++ b/Classes/Eel/CssClassMappingHelper.php @@ -1,38 +1,38 @@ cssClassMapping) === false) { return $concatenatedCssClasses; @@ -43,7 +43,7 @@ public function replace($concatenatedCssClasses, $configurationKey): string $replacedCssClasses = []; foreach ($cssClasses as $cssClass) { - if (trim($cssClass) === ''){ + if (trim($cssClass) === '') { continue; } if (array_key_exists($cssClass, $replacements)) { @@ -59,12 +59,10 @@ public function replace($concatenatedCssClasses, $configurationKey): string /** * @param string $methodName - * * @return boolean */ public function allowsCallOfMethod($methodName): bool { return true; } - -} \ No newline at end of file +} diff --git a/Configuration/NodeTypes.Content.OneColumn.yaml b/Configuration/NodeTypes.Content.OneColumn.yaml deleted file mode 100644 index 953f37e..0000000 --- a/Configuration/NodeTypes.Content.OneColumn.yaml +++ /dev/null @@ -1,39 +0,0 @@ -'TechDivision.NodeTypes.FlexColumnLayouts:OneColumn': - superTypes: - 'Neos.NodeTypes.ColumnLayouts:Column': true - ui: - label: 'One column content' - position: 100 - childNodes: - column0: - type: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn' - properties: - layout: - defaultValue: '100' - ui: - reloadIfChanged: true - inspector: - editorOptions: - values: - '100': - label: '100%' - flexDirection: [ ] - flexWrap: [ ] - flexAlignItems: [ ] - flexAlignContent: [ ] - smFlexDirection: [ ] - smFlexWrap: [ ] - smFlexAlignItems: [ ] - smFlexAlignContent: [ ] - mdFlexDirection: [ ] - mdFlexWrap: [ ] - mdFlexAlignItems: [ ] - mdFlexAlignContent: [ ] - lgFlexDirection: [ ] - lgFlexWrap: [ ] - lgFlexAlignItems: [ ] - lgFlexAlignContent: [ ] - xlFlexDirection: [ ] - xlFlexWrap: [ ] - xlFlexAlignItems: [ ] - xlFlexAlignContent: [ ] diff --git a/Configuration/NodeTypes.FlexCollection.yaml b/Configuration/NodeTypes.FlexCollection.yaml deleted file mode 100644 index 2b03567..0000000 --- a/Configuration/NodeTypes.FlexCollection.yaml +++ /dev/null @@ -1,48 +0,0 @@ -# default collection properties of a flex column -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': - # for a better overview, we remove the auto-generated column name here - label: "${String.cropAtWord(String.trim(String.stripTags(String.pregReplace(q(node).property('title') || q(node).property('text') || ((I18n.translate(node.nodeType.label) || node.nodeType.name)), '/|\\x{00a0}|[^[:print:]]|\\s+/u', ' '))), 100, '...')}" - abstract: true - superTypes: - 'Neos.Neos:ContentCollection': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true -###### Uncomment or extend the [nodeType] below to activate the [Intermediate ] or [Advanced ] features. ###### -# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true -# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true - - - - -# add flex collection to every column nodetype -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn': - ui: - label: 'Col 1' - icon: 'icon-dice-one' - inlineEditable: true - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true - -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.SecondColumn': - ui: - label: 'Col 2' - icon: 'icon-dice-two' - inlineEditable: true - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true - -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.ThirdColumn': - ui: - label: 'Col 3' - icon: 'icon-dice-three' - inlineEditable: true - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true - -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FourthColumn': - ui: - label: 'Col 4' - icon: 'icon-dice-four' - inlineEditable: true - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true - diff --git a/Configuration/NodeTypes.Override.Content.Column.yaml b/Configuration/NodeTypes.Override.Content.Column.yaml deleted file mode 100644 index 51659a6..0000000 --- a/Configuration/NodeTypes.Override.Content.Column.yaml +++ /dev/null @@ -1,12 +0,0 @@ -# override with extended properties for default flex container -'Neos.NodeTypes.ColumnLayouts:Column': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true -###### Overwrite the [nodeType] within your project to activate the [Intermediate ] exclusive or [Advanced ] features. ###### -# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true -# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true - ui: - inspector: - groups: - column: - position: 'start 100' diff --git a/Configuration/Settings.CssClassMapping.Bootstrap.yaml b/Configuration/Settings.FlexColumnLayouts.yaml similarity index 99% rename from Configuration/Settings.CssClassMapping.Bootstrap.yaml rename to Configuration/Settings.FlexColumnLayouts.yaml index bd43510..4428d3b 100644 --- a/Configuration/Settings.CssClassMapping.Bootstrap.yaml +++ b/Configuration/Settings.FlexColumnLayouts.yaml @@ -3,7 +3,6 @@ TechDivision: FlexColumnLayouts: cssClassMapping: bootstrap: - 'flex': 'd-flex' 'flex-col': 'flex-column' @@ -115,7 +114,6 @@ TechDivision: 'lg:items-center': 'align-items-lg-center' 'xl:items-center': 'align-items-xl-center' - #ADVANCED Configuration/NodeTypes.FlexCollection.yaml properties 'content-between': 'align-content-between' diff --git a/Configuration/Settings.Fusion.yaml b/Configuration/Settings.Fusion.yaml new file mode 100644 index 0000000..f97caa1 --- /dev/null +++ b/Configuration/Settings.Fusion.yaml @@ -0,0 +1,4 @@ +Neos: + Fusion: + defaultContext: + 'CssClassMapping': 'TechDivision\NodeTypes\FlexColumnLayouts\Eel\CssClassMappingHelper' diff --git a/Configuration/Settings.yaml b/Configuration/Settings.Neos.yaml similarity index 68% rename from Configuration/Settings.yaml rename to Configuration/Settings.Neos.yaml index 62dadca..308aba1 100644 --- a/Configuration/Settings.yaml +++ b/Configuration/Settings.Neos.yaml @@ -9,6 +9,3 @@ Neos: TechDivision.NodeTypes.FlexColumnLayouts: - 'Main' - 'NodeTypes/*' - Fusion: - defaultContext: - 'CssClassMapping': 'TechDivision\NodeTypes\FlexColumnLayouts\Eel\CssClassMappingHelper' \ No newline at end of file diff --git a/Migrations/ContentRepository/Version20200904150412.yaml b/Migrations/ContentRepository/Version20200904150412.yaml index 3dea6dd..84ba099 100644 --- a/Migrations/ContentRepository/Version20200904150412.yaml +++ b/Migrations/ContentRepository/Version20200904150412.yaml @@ -1,119 +1,90 @@ up: comments: 'This migration changes all your existing grid columns' migration: - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'Neos.Neos:ContentCollection' - - - type: 'NodeName' + - type: 'NodeName' settings: nodeName: 'column0' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'Neos.Neos:ContentCollection' - - - type: 'NodeName' + - type: 'NodeName' settings: nodeName: 'column1' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.SecondColumn' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'Neos.Neos:ContentCollection' - - - type: 'NodeName' + - type: 'NodeName' settings: nodeName: 'column2' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.ThirdColumn' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'Neos.Neos:ContentCollection' - - - type: 'NodeName' + - type: 'NodeName' settings: nodeName: 'column3' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FourthColumn' down: migration: - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'Neos.Neos:ContentCollection' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.SecondColumn' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'Neos.Neos:ContentCollection' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.ThirdColumn' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'Neos.Neos:ContentCollection' - - - filters: - - - type: 'NodeType' + - filters: + - type: 'NodeType' settings: nodeType: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FourthColumn' transformations: - - - type: 'ChangeNodeType' + - type: 'ChangeNodeType' settings: newType: 'Neos.Neos:ContentCollection' - diff --git a/NodeTypes/Content/OneColumn.yaml b/NodeTypes/Content/OneColumn.yaml new file mode 100644 index 0000000..358d8b1 --- /dev/null +++ b/NodeTypes/Content/OneColumn.yaml @@ -0,0 +1,37 @@ +'TechDivision.NodeTypes.FlexColumnLayouts:OneColumn': + superTypes: + 'Neos.NodeTypes.ColumnLayouts:Column': true + 'Neos.Neos:ContentCollection': true + ui: + label: 'One column content' + position: 100 + properties: + layout: + defaultValue: '100' + ui: + reloadIfChanged: true + inspector: + editorOptions: + values: + '100': + label: '100%' + flexDirection: [] + flexWrap: [] + flexAlignItems: [] + flexAlignContent: [] + smFlexDirection: [] + smFlexWrap: [] + smFlexAlignItems: [] + smFlexAlignContent: [] + mdFlexDirection: [] + mdFlexWrap: [] + mdFlexAlignItems: [] + mdFlexAlignContent: [] + lgFlexDirection: [] + lgFlexWrap: [] + lgFlexAlignItems: [] + lgFlexAlignContent: [] + xlFlexDirection: [] + xlFlexWrap: [] + xlFlexAlignItems: [] + xlFlexAlignContent: [] diff --git a/NodeTypes/ContentCollection/FirstColumn.yaml b/NodeTypes/ContentCollection/FirstColumn.yaml new file mode 100644 index 0000000..1101ef2 --- /dev/null +++ b/NodeTypes/ContentCollection/FirstColumn.yaml @@ -0,0 +1,7 @@ +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn': + ui: + label: 'Col 1' + icon: 'icon-dice-one' + inlineEditable: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true diff --git a/NodeTypes/ContentCollection/FourthColumn.yaml b/NodeTypes/ContentCollection/FourthColumn.yaml new file mode 100644 index 0000000..25c96b6 --- /dev/null +++ b/NodeTypes/ContentCollection/FourthColumn.yaml @@ -0,0 +1,7 @@ +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FourthColumn': + ui: + label: 'Col 4' + icon: 'icon-dice-four' + inlineEditable: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true diff --git a/NodeTypes/ContentCollection/SecondColumn.yaml b/NodeTypes/ContentCollection/SecondColumn.yaml new file mode 100644 index 0000000..3450a2e --- /dev/null +++ b/NodeTypes/ContentCollection/SecondColumn.yaml @@ -0,0 +1,7 @@ +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.SecondColumn': + ui: + label: 'Col 2' + icon: 'icon-dice-two' + inlineEditable: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true diff --git a/NodeTypes/ContentCollection/ThirdColumn.yaml b/NodeTypes/ContentCollection/ThirdColumn.yaml new file mode 100644 index 0000000..3ba6cc0 --- /dev/null +++ b/NodeTypes/ContentCollection/ThirdColumn.yaml @@ -0,0 +1,7 @@ +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.ThirdColumn': + ui: + label: 'Col 3' + icon: 'icon-dice-three' + inlineEditable: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': true diff --git a/Configuration/NodeTypes.Mixin.BreakpointsMixin.yaml b/NodeTypes/Mixin/BreakpointsMixin.yaml similarity index 99% rename from Configuration/NodeTypes.Mixin.BreakpointsMixin.yaml rename to NodeTypes/Mixin/BreakpointsMixin.yaml index b41d542..0903908 100644 --- a/Configuration/NodeTypes.Mixin.BreakpointsMixin.yaml +++ b/NodeTypes/Mixin/BreakpointsMixin.yaml @@ -60,4 +60,3 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Md': true 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Lg': true 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Xl': true - diff --git a/Configuration/NodeTypes.Mixin.FlexAlignContentMixin.yaml b/NodeTypes/Mixin/FlexAlignContentMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.FlexAlignContentMixin.yaml rename to NodeTypes/Mixin/FlexAlignContentMixin.yaml diff --git a/Configuration/NodeTypes.Mixin.FlexAlignItemsMixin.yaml b/NodeTypes/Mixin/FlexAlignItemsMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.FlexAlignItemsMixin.yaml rename to NodeTypes/Mixin/FlexAlignItemsMixin.yaml diff --git a/Configuration/NodeTypes.Mixin.FlexBasisMixin.yaml b/NodeTypes/Mixin/FlexBasisMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.FlexBasisMixin.yaml rename to NodeTypes/Mixin/FlexBasisMixin.yaml diff --git a/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml b/NodeTypes/Mixin/FlexCollection.AdvancedFeatures.yaml similarity index 98% rename from Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml rename to NodeTypes/Mixin/FlexCollection.AdvancedFeatures.yaml index a97a3dc..7e41359 100644 --- a/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml +++ b/NodeTypes/Mixin/FlexCollection.AdvancedFeatures.yaml @@ -3,4 +3,4 @@ abstract: true superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true diff --git a/Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml b/NodeTypes/Mixin/FlexCollection.BasicFeatures.yaml similarity index 99% rename from Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml rename to NodeTypes/Mixin/FlexCollection.BasicFeatures.yaml index b53cb3f..ba363ca 100644 --- a/Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml +++ b/NodeTypes/Mixin/FlexCollection.BasicFeatures.yaml @@ -3,4 +3,4 @@ abstract: true superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexOrderMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true diff --git a/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml b/NodeTypes/Mixin/FlexCollection.IntermediateFeatures.yaml similarity index 98% rename from Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml rename to NodeTypes/Mixin/FlexCollection.IntermediateFeatures.yaml index f88139c..be9ff90 100644 --- a/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml +++ b/NodeTypes/Mixin/FlexCollection.IntermediateFeatures.yaml @@ -2,4 +2,4 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': abstract: true superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true diff --git a/NodeTypes/Mixin/FlexCollection.yaml b/NodeTypes/Mixin/FlexCollection.yaml new file mode 100644 index 0000000..fed151e --- /dev/null +++ b/NodeTypes/Mixin/FlexCollection.yaml @@ -0,0 +1,12 @@ +# default collection properties of a flex column +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': + # for a better overview, we remove the auto-generated column name here + label: "${String.cropAtWord(String.trim(String.stripTags(String.pregReplace(q(node).property('title') || q(node).property('text') || ((I18n.translate(node.nodeType.label) || node.nodeType.name)), '/|\\x{00a0}|[^[:print:]]|\\s+/u', ' '))), 100, '...')}" + abstract: true + superTypes: + 'Neos.Neos:ContentCollection': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true +###### Uncomment or extend the [nodeType] below to activate the [Intermediate] or [Advanced] features. ###### +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true + diff --git a/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml b/NodeTypes/Mixin/FlexContainer.AdvancedFeatures.yaml similarity index 96% rename from Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml rename to NodeTypes/Mixin/FlexContainer.AdvancedFeatures.yaml index 98e787b..4c71fe2 100644 --- a/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml +++ b/NodeTypes/Mixin/FlexContainer.AdvancedFeatures.yaml @@ -5,4 +5,4 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexWrapMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis diff --git a/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml b/NodeTypes/Mixin/FlexContainer.BasicFeatures.yaml similarity index 99% rename from Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml rename to NodeTypes/Mixin/FlexContainer.BasicFeatures.yaml index 6301aa3..eeeafdc 100644 --- a/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml +++ b/NodeTypes/Mixin/FlexContainer.BasicFeatures.yaml @@ -2,4 +2,4 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': abstract: true superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true diff --git a/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml b/NodeTypes/Mixin/FlexContainer.IntermediateFeatures.yaml similarity index 97% rename from Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml rename to NodeTypes/Mixin/FlexContainer.IntermediateFeatures.yaml index 719a720..4de2a7b 100644 --- a/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml +++ b/NodeTypes/Mixin/FlexContainer.IntermediateFeatures.yaml @@ -3,4 +3,4 @@ abstract: true superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexDirectionMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignItemsMixin': true \ No newline at end of file + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignItemsMixin': true diff --git a/Configuration/NodeTypes.Mixin.FlexDirectionMixin.yaml b/NodeTypes/Mixin/FlexDirectionMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.FlexDirectionMixin.yaml rename to NodeTypes/Mixin/FlexDirectionMixin.yaml diff --git a/Configuration/NodeTypes.Mixin.FlexJustifyMixin.yaml b/NodeTypes/Mixin/FlexJustifyMixin.yaml similarity index 99% rename from Configuration/NodeTypes.Mixin.FlexJustifyMixin.yaml rename to NodeTypes/Mixin/FlexJustifyMixin.yaml index 2676376..cec93b3 100644 --- a/Configuration/NodeTypes.Mixin.FlexJustifyMixin.yaml +++ b/NodeTypes/Mixin/FlexJustifyMixin.yaml @@ -132,4 +132,4 @@ 'xl:justify-around': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexJustifyMixin:properties.flexJustify.selectBoxEditor.values.justify-around' 'xl:justify-evenly': - label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexJustifyMixin:properties.flexJustify.selectBoxEditor.values.justify-evenly' \ No newline at end of file + label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexJustifyMixin:properties.flexJustify.selectBoxEditor.values.justify-evenly' diff --git a/Configuration/NodeTypes.Mixin.FlexOrderMixin.yaml b/NodeTypes/Mixin/FlexOrderMixin.yaml similarity index 95% rename from Configuration/NodeTypes.Mixin.FlexOrderMixin.yaml rename to NodeTypes/Mixin/FlexOrderMixin.yaml index 487f91a..01a8e34 100644 --- a/Configuration/NodeTypes.Mixin.FlexOrderMixin.yaml +++ b/NodeTypes/Mixin/FlexOrderMixin.yaml @@ -88,7 +88,7 @@ 'lg:order-2': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-2' 'lg:order-3': - label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-3' + label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-3' 'lg:order-last': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-last' xlFlexOrder: @@ -110,6 +110,6 @@ 'xl:order-2': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-2' 'xl:order-3': - label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-3' + label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-3' 'xl:order-last': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexOrderMixin:properties.flexOrder.selectBoxEditor.values.order-last' diff --git a/Configuration/NodeTypes.Mixin.FlexShrinkMixin.yaml b/NodeTypes/Mixin/FlexShrinkMixin.yaml similarity index 99% rename from Configuration/NodeTypes.Mixin.FlexShrinkMixin.yaml rename to NodeTypes/Mixin/FlexShrinkMixin.yaml index 9fdd9ff..f41051f 100644 --- a/Configuration/NodeTypes.Mixin.FlexShrinkMixin.yaml +++ b/NodeTypes/Mixin/FlexShrinkMixin.yaml @@ -93,4 +93,3 @@ label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexAlignContentMixin:properties.flexShrink.selectBoxEditor.values.flex-shrink' 'xl:flex-shrink-0': label: 'TechDivision.NodeTypes.FlexColumnLayouts:NodeTypes.FlexAlignContentMixin:properties.flexShrink.selectBoxEditor.values.flex-shrink-0' - diff --git a/Configuration/NodeTypes.Mixin.FlexWrapMixin.yaml b/NodeTypes/Mixin/FlexWrapMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.FlexWrapMixin.yaml rename to NodeTypes/Mixin/FlexWrapMixin.yaml diff --git a/Configuration/NodeTypes.Mixin.VerticalSeparatorMixin.yaml b/NodeTypes/Mixin/VerticalSeparatorMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.VerticalSeparatorMixin.yaml rename to NodeTypes/Mixin/VerticalSeparatorMixin.yaml diff --git a/Configuration/NodeTypes.Mixin.VisualMixin.yaml b/NodeTypes/Mixin/VisualMixin.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.VisualMixin.yaml rename to NodeTypes/Mixin/VisualMixin.yaml diff --git a/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/Column.yaml b/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/Column.yaml new file mode 100644 index 0000000..13b9246 --- /dev/null +++ b/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/Column.yaml @@ -0,0 +1,12 @@ +# override with extended properties for default flex container +'Neos.NodeTypes.ColumnLayouts:Column': + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true + ###### Overwrite the [nodeType] within your project to activate the [Intermediate ] exclusive or [Advanced ] features. ###### + # 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true + # 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true + ui: + inspector: + groups: + column: + position: 'start 100' diff --git a/Configuration/NodeTypes.Override.Content.FourColumn.yaml b/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/FourColumn.yaml similarity index 100% rename from Configuration/NodeTypes.Override.Content.FourColumn.yaml rename to NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/FourColumn.yaml diff --git a/Configuration/NodeTypes.Override.Content.ThreeColumn.yaml b/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/ThreeColumn.yaml similarity index 100% rename from Configuration/NodeTypes.Override.Content.ThreeColumn.yaml rename to NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/ThreeColumn.yaml diff --git a/Configuration/NodeTypes.Override.Content.TwoColumn.yaml b/NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/TwoColumn.yaml similarity index 100% rename from Configuration/NodeTypes.Override.Content.TwoColumn.yaml rename to NodeTypes/Override/Neos.NodeTypes.ColumnLayouts/TwoColumn.yaml diff --git a/README.md b/README.md index 8249404..aab0248 100644 --- a/README.md +++ b/README.md @@ -1,78 +1,90 @@ # Flex-ColumnLayouts for Neos CMS + Based on [TailwindCSS](https://tailwindcss.com/), but offers also css classes for [Bootstrap4](https://getbootstrap.com/docs/4.4/utilities/flex/). -It extends your standard Neos-ColumnLayouts with flex properties so you can adjust every column with [css flex properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). +It extends your standard Neos-ColumnLayouts with flex properties, so you can adjust every column with [css flex properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). ## Get started -1. Install the package via packagist: Add `"techdivision/flexcolumnlayouts" : "~2.0"` to the require section of the composer.json or run `composer require techdivision/flexcolumnlayouts`. + +1. Install the package via packagist: Add `"techdivision/flexcolumnlayouts" : "~4.0"` to the require section of the composer.json or run `composer require techdivision/flexcolumnlayouts`. 2. If needed (i.e. nothing follow the instructions under "TailwindCSS" or "Bootstrap4" 3. Apply a node migration, if you want to use this feature on existing nodes. ## For editors -You find a whole lot of settings now in your multi column nodes. -We kept the css names instead of more speaking ones and added some links to an interactive documentation right in the inspector. -Flex is sometimes better understood if you [try it out](https://yoksel.github.io/flex-cheatsheet/). -*Note: All the settings can be overidden per breakpoint.* +You find a lot of settings now in your multi-column nodes. +We kept the css names instead of more speaking ones and added some links to an interactive documentation right in the inspector. +Flex is sometimes better understood if you [try it out](https://yoksel.github.io/flex-cheatsheet/). +_Note: All the settings can be overidden per breakpoint._ ### NodeType level + Here you can see, how it looks like on NodeType level: You have plenty of options to adjust your columns IF YOU EXTEND ALL ADVANCED FEATURES WITH SUPERTYPES [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features) -![NodeType level](Documentation/assets/FlexColumnLayouts-NodeType.png "NodeType level") +![NodeType level](Documentation/assets/FlexColumnLayouts-NodeType.png 'NodeType level') -You have the following options for the whole grid -* _Layout_: (as usual, but per breakpoint) -like 50/50, 60/33 or similar -* [flex-direction](https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) -* [flex-wrap](https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) -* [justify-content](https://yoksel.github.io/flex-cheatsheet/#section-justify-content) -* [align-items](https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) -* [align-content](https://yoksel.github.io/flex-cheatsheet/#section-align-content) +You have the following options for the whole grid -### Column level +- _Layout_: (as usual, but per breakpoint) + like 50/50, 60/33 or similar +- [flex-direction](https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) +- [flex-wrap](https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) +- [justify-content](https://yoksel.github.io/flex-cheatsheet/#section-justify-content) +- [align-items](https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) +- [align-content](https://yoksel.github.io/flex-cheatsheet/#section-align-content) -Here you can see, how it looks like on Column level: There you can override your options. +### Column level -![Column level](Documentation/assets/FlexColumnLayouts-Column.png "Column level") +Here you can see, how it looks like on Column level: There you can override your options. +![Column level](Documentation/assets/FlexColumnLayouts-Column.png 'Column level') -* Override width: Here you can override the width on a column-basis, so that you can have individual grids like 25/33 and dont have to add fixed layouts for that -* [flex-order](https://yoksel.github.io/flex-cheatsheet/#section-order) -* [flex-shrink](https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink) -* Inline-Styles: background-color, text-color and background-image (experimental, just inline-styling - too specific to generalize) +- Override width: Here you can override the width on a column-basis, so that you can have individual grids like 25/33 and dont have to add fixed layouts for that +- [flex-order](https://yoksel.github.io/flex-cheatsheet/#section-order) +- [flex-shrink](https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink) +- Inline-Styles: background-color, text-color and background-image (experimental, just inline-styling - too specific to generalize) ### Principle + The idea behind this package is to have a full extendable set of options for flex layouts available, so you can: + 1. Do some experiments 2. Check which layouts improve experience, readability and layout on your website 3. Build new NodeTypes from that template -Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones. Therefore we keep the default features as simple as possible. [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features) - +Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones. Therefore we keep the default features as simple as possible. [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features) ## For developers ### TailwindCSS + If you already use tailwindcss in your project, you are all set and the classnames will be available to you. If not, you have several choices: -1. (default) include the small css we deliver with this package which only include tailwind flex classnames + +1. (default) include the small css we deliver with this package which only include tailwind flex classnames 2. include the latest [tailwind css build](https://tailwindcss.com/docs/installation) in your project (might be oversized) 3. include the scss files we provide in this package that produces tailwind-like classes + ```scss -@import "Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/TailwindFlexClasses"; +@import 'Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/TailwindFlexClasses'; ``` ### Bootstrap 4 & 5 Support -If you are using Bootstrap 4 or 5 in your project and have [Flex Utilities 4](https://getbootstrap.com/docs/4.4/utilities/flex/) or [Flex Utilities 5](https://getbootstrap.com/docs/5.0/utilities/flex/) available, you just have to: -* Add the small stylesheet -`Resources/Public/Css/BootstrapAdditionalFlexClasses.css` -to your page that adds some classes that bootstrap doesn't provide. -* Or include the scss file + +If you are using Bootstrap 4 or 5 in your project and have [Flex Utilities 4](https://getbootstrap.com/docs/4.4/utilities/flex/) or [Flex Utilities 5](https://getbootstrap.com/docs/5.0/utilities/flex/) available, you just have to: + +- Add the small stylesheet + `Resources/Public/Css/BootstrapAdditionalFlexClasses.css` + to your page that adds some classes that bootstrap doesn't provide. +- Or include the scss file + ```scss -@import "Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/BootstrapAdditionalFlexClasses"; +@import 'Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/BootstrapAdditionalFlexClasses'; ``` -* For sure you need to add some fusion code to replace the tailwind classnames, which are a bit different: -(For replacement, we have a mapping file, where you can see the differences: `Configuration/Settings.CssClassMapping.Bootstrap.yaml` + +- For sure, you need to add some fusion code to replace the tailwind classnames, which are a bit different: + (For replacement, we have a mapping file, where you can see the differences: `Configuration/Settings.CssClassMapping.Bootstrap.yaml` + ``` prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { containerClasses.@process.replaceClasses { @@ -86,13 +98,14 @@ prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { } ``` -### Adding or Changing wrapper or column classes +### Adding or Changing wrapper or column classes + +In case if you want wrap the Flex-Container you can easily add your desired class (in this case container-fluid or container) within the fusion for MultiColumn. Also, you can add classes for Columns like this: -In case if you want wrap the Flex-Container you can easily add your desired class (in this case container-fluid or container) within the fusion for MultiColumn. Also you can add classes for Columns like this: ``` prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { - - # add behaviour class and change wrapper class of wrapperClasses + + # add behaviour class and change wrapper class of wrapperClasses wrapperClasses = Neos.Fusion:Join { wrapper = 'my-wrapper-class' behaviour = 'container-fluid' @@ -114,8 +127,8 @@ prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { } ``` - ### Node Migration + In case you do not start with a fresh project, but want to have those features available on your existing multi-column containers as well, we provided you with a node migration: **Use with caution and only if you know what you are doing!** @@ -129,84 +142,84 @@ If you include the scss files, you can overwrite the breakpoint variables define ```scss $flexBreakpointConfiguration: ( - '640px': 'sm\\:', - '768px': 'md\\:', - '1024px': 'lg\\:', - '1280px': 'xl\\:' + '640px': 'sm\\:', + '768px': 'md\\:', + '1024px': 'lg\\:', + '1280px': 'xl\\:', ); ``` -#### Remove/Adjust breakpoint +#### Remove/Adjust breakpoint To get rid of a breakpoint you just have to remove the breakpoint from SCCS and change the YAML configuration. e.g. you want to remove the md breakpoint and edit some labels to increase the usability for the Editor + ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Md': false #disable mdBreakpoint - ui: - inspector: - groups: - defaultBreakpoint: - label: 'Default (smallest)' - smBreakpoint: - label: 'Phone (sm) >= 576px' - lgBreakpoint: - label: 'Tablet (lg) >= 992px' - xlBreakpoint: - label: 'Desktop (xl) >= 1400px' + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Md': false #disable mdBreakpoint + ui: + inspector: + groups: + defaultBreakpoint: + label: 'Default (smallest)' + smBreakpoint: + label: 'Phone (sm) >= 576px' + lgBreakpoint: + label: 'Tablet (lg) >= 992px' + xlBreakpoint: + label: 'Desktop (xl) >= 1400px' ``` - - ## Enable More Flex-Properties -On Default only the basic features are enabled, to keep it simple but essential features for a better usability for editors. +On Default only the basic features are enabled, to keep it simple but essential features for a better usability for editors. Extend flex-properties with more advanced features -To activate the [ Intermediate ] or [ Advanced ] features, you could activate them by extending the superTypes as follows: - +To activate the [ Intermediate ] or [ Advanced ] features, you could activate them by extending the superTypes as follows: ### Flex Grid: out of the box: only define Grid-Col sizes for breakpoints. #### Intermediate level will enable flex-properties: -- flex-direction (https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) -- align-items (https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) + +- flex-direction (https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) +- align-items (https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) Add this to your YAML-Configuration: + ```yaml 'Neos.NodeTypes.ColumnLayouts:Column': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true ``` #### Advanced level will enable all from Intermediate and enable flex-properties: -- justify-content (https://yoksel.github.io/flex-cheatsheet/#section-justify-content) -- flex-wrap (https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) -- align-content: (https://yoksel.github.io/flex-cheatsheet/#section-align-content) + +- justify-content (https://yoksel.github.io/flex-cheatsheet/#section-justify-content) +- flex-wrap (https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) +- align-content: (https://yoksel.github.io/flex-cheatsheet/#section-align-content) Add this to your YAML-Configuration: + ```yaml 'Neos.NodeTypes.ColumnLayouts:Column': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ``` +### Flex Column: - -### Flex Column: - -- order: (https://yoksel.github.io/flex-cheatsheet/#section-order) +- order: (https://yoksel.github.io/flex-cheatsheet/#section-order) #### Intermediate level will enable: -- flex-basis (https://yoksel.github.io/flex-cheatsheet/#section-flex-basis) - +- flex-basis (https://yoksel.github.io/flex-cheatsheet/#section-flex-basis) Add this to your YAML-Configuration: + ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: @@ -214,29 +227,30 @@ Add this to your YAML-Configuration: ``` #### Advanced level will enable all from Intermediate and enable flex-properties: -- flex-shrink (https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink)) + +- flex-shrink (https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink)) Add this to your YAML-Configuration: + ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true ``` - - ## Disable nesting of grids + ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': - constraints: - nodeTypes: - 'Neos.NodeTypes.ColumnLayouts:Column': false + constraints: + nodeTypes: + 'Neos.NodeTypes.ColumnLayouts:Column': false ``` - ## Attention -*Consider the loading order of your loaded packages!* + +_Consider the loading order of your loaded packages!_ ## Contribution + If you want to contribute or found a bug, pls provide a PR or file an issue - or get in touch with us! - diff --git a/Resources/Private/Fusion/Content/MultiColumn.fusion b/Resources/Private/Fusion/Component/MultiColumn.fusion similarity index 100% rename from Resources/Private/Fusion/Content/MultiColumn.fusion rename to Resources/Private/Fusion/Component/MultiColumn.fusion diff --git a/Resources/Private/Fusion/Component/SingleColumn.fusion b/Resources/Private/Fusion/Component/SingleColumn.fusion new file mode 100644 index 0000000..2543309 --- /dev/null +++ b/Resources/Private/Fusion/Component/SingleColumn.fusion @@ -0,0 +1,48 @@ +prototype(TechDivision.NodeTypes.FlexColumnLayouts:SingleColumn) < prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { + columns > + columns = Neos.Neos:ContentCollection { + attributes = Neos.Fusion:Attributes { + class > + class = TechDivision.NodeTypes.FlexColumnLayouts:Helper.CssClasses { + flexItem = ${'flex-item'} + layout = TechDivision.NodeTypes.FlexColumnLayouts:Helper.CssClasses { + basis = ${q(node).property('flexBasis') ? q(node).property('flexBasis') : (q(parentNode).property('layout') ? 'flex-basis-' + String.split(q(parentNode).property('layout'), '-')[columnIteration.index] : '')} + smBasis = ${q(node).property('smFlexBasis') ? q(node).property('smFlexBasis') : (q(parentNode).property('smLayout') ? 'sm:flex-basis-' + String.split(q(parentNode).property('smLayout'), '-')[columnIteration.index] : '')} + mdBasis = ${q(node).property('mdFlexBasis') ? q(node).property('mdFlexBasis') : (q(parentNode).property('mdLayout') ? 'md:flex-basis-' + String.split(q(parentNode).property('mdLayout'), '-')[columnIteration.index] : '')} + lgBasis = ${q(node).property('lgFlexBasis') ? q(node).property('lgFlexBasis') : (q(parentNode).property('lgLayout') ? 'lg:flex-basis-' + String.split(q(parentNode).property('lgLayout'), '-')[columnIteration.index] : '')} + xlBasis = ${q(node).property('xlFlexBasis') ? q(node).property('xlFlexBasis') : (q(parentNode).property('xlLayout') ? 'xl:flex-basis-' + String.split(q(parentNode).property('xlLayout'), '-')[columnIteration.index] : '')} + } + shrink = TechDivision.NodeTypes.FlexColumnLayouts:Helper.CssClasses { + shrink = ${q(node).property('flexShrink')} + smShrink = ${q(node).property('smFlexShrink')} + mdShrink = ${q(node).property('mdFlexShrink')} + lgShrink = ${q(node).property('lgFlexShrink')} + xlShrink = ${q(node).property('xlFlexShrink')} + } + order = TechDivision.NodeTypes.FlexColumnLayouts:Helper.CssClasses { + order = ${q(node).property('flexOrder')} + smOrder = ${q(node).property('smFlexOrder')} + mdOrder = ${q(node).property('mdFlexOrder')} + lgOrder = ${q(node).property('lgFlexOrder')} + xlOrder = ${q(node).property('xlFlexOrder')} + } + } + style = TechDivision.NodeTypes.FlexColumnLayouts:Helper.VisualStyles + } + + @cache { + mode = 'cached' + entryIdentifier { + node = ${node} + } + entryTags { + # Whenever the node changes the matched condition could change + 1 = ${Neos.Caching.nodeTag(node)} + # Whenever the parent nodes changes the layout could change + 2 = ${Neos.Caching.nodeTag(parentNode)} + # Whenever the childs (the actual content) changes we need to flush this cache + 3 = ${Neos.Caching.descendantOfTag(node)} + } + } + } +} diff --git a/Resources/Private/Fusion/Overrides/Neos.NodeTypes.ColumnLayouts/OneColumn.fusion b/Resources/Private/Fusion/Content/OneColumn.fusion similarity index 100% rename from Resources/Private/Fusion/Overrides/Neos.NodeTypes.ColumnLayouts/OneColumn.fusion rename to Resources/Private/Fusion/Content/OneColumn.fusion diff --git a/Resources/Private/Fusion/Content/SingleColumn.fusion b/Resources/Private/Fusion/Content/SingleColumn.fusion deleted file mode 100644 index ef52d3e..0000000 --- a/Resources/Private/Fusion/Content/SingleColumn.fusion +++ /dev/null @@ -1,3 +0,0 @@ -prototype(TechDivision.NodeTypes.FlexColumnLayouts:SingleColumn) < prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { - columns.collection = ${q(node).children('[instanceof TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection]')} -} diff --git a/Resources/Private/Scss/BootstrapAdditionalFlexClasses.scss b/Resources/Private/Scss/BootstrapAdditionalFlexClasses.scss index 1571560..00debb2 100644 --- a/Resources/Private/Scss/BootstrapAdditionalFlexClasses.scss +++ b/Resources/Private/Scss/BootstrapAdditionalFlexClasses.scss @@ -14,7 +14,6 @@ @each $size in map-keys($configuration) { @include flex-breakpoint($size, $flexMediaCondition) { $prefix: map-get($configuration, $size); - @include flex-basis($prefix); @include flex-order($prefix); @include vertical-separator($prefix); diff --git a/Resources/Private/Scss/Mixins/_FlexBasis.scss b/Resources/Private/Scss/Mixins/_FlexBasis.scss index e79ee61..8f218ba 100644 --- a/Resources/Private/Scss/Mixins/_FlexBasis.scss +++ b/Resources/Private/Scss/Mixins/_FlexBasis.scss @@ -1,11 +1,37 @@ @mixin flex-basis($prefix: '') { - .#{$prefix}flex-basis-20{flex-basis:20%} - .#{$prefix}flex-basis-25{flex-basis:25%} - .#{$prefix}flex-basis-33{flex-basis:33.3333%} - .#{$prefix}flex-basis-40{flex-basis:40%} - .#{$prefix}flex-basis-50{flex-basis:50%} - .#{$prefix}flex-basis-60{flex-basis:60%} - .#{$prefix}flex-basis-66{flex-basis:66.6666%} - .#{$prefix}flex-basis-75{flex-basis:75%} - .#{$prefix}flex-basis-100{flex-basis:100%} + .#{$prefix}flex-basis-20 { + flex-basis: 20%; + } + + .#{$prefix}flex-basis-25 { + flex-basis: 25%; + } + + .#{$prefix}flex-basis-33 { + flex-basis: 33.3333%; + } + + .#{$prefix}flex-basis-40 { + flex-basis: 40%; + } + + .#{$prefix}flex-basis-50 { + flex-basis: 50%; + } + + .#{$prefix}flex-basis-60 { + flex-basis: 60%; + } + + .#{$prefix}flex-basis-66 { + flex-basis: 66.6666%; + } + + .#{$prefix}flex-basis-75 { + flex-basis: 75%; + } + + .#{$prefix}flex-basis-100 { + flex-basis: 100%; + } } diff --git a/Resources/Private/Scss/_Variables.scss b/Resources/Private/Scss/_Variables.scss index 70522d1..2c7a933 100644 --- a/Resources/Private/Scss/_Variables.scss +++ b/Resources/Private/Scss/_Variables.scss @@ -4,8 +4,8 @@ $flexMediaCondition: 'min-width:' !default; // Define media query sizes and a css class prefix for this size // To disable the media-query-builder unset the variable like this: '$flexBreakpointConfiguration: null;' $flexBreakpointConfiguration: ( - '640px': 'sm\\:', - '768px': 'md\\:', - '1024px': 'lg\\:', - '1280px': 'xl\\:' + '640px': 'sm\\:', + '768px': 'md\\:', + '1024px': 'lg\\:', + '1280px': 'xl\\:', ) !default; diff --git a/Resources/Private/Translations/de/NodeTypes/FlexAlignContentMixin.xlf b/Resources/Private/Translations/de/NodeTypes/FlexAlignContentMixin.xlf index 92c073b..4e4b16b 100644 --- a/Resources/Private/Translations/de/NodeTypes/FlexAlignContentMixin.xlf +++ b/Resources/Private/Translations/de/NodeTypes/FlexAlignContentMixin.xlf @@ -8,7 +8,7 @@ Align your content within the container. The content can be placed centered, on the bottom/top or even with space between or around. Attention: requires Layout "none" or entirely more as "100%" (multi-line)! Further Documentation: https://yoksel.github.io/flex-cheatsheet/#section-align-content - Anordnung des Inhalts, dieser kann mittig, oben/unten oder auch mit Abstand zwischen oder außenrum platziert werden. Achtung: benötigt das Layout "none" oder eine Gesamtbreite von mehr als 100% (multi-line)! Weitere Dokumentation: https://yoksel.github.io/flex-cheatsheet/#section-align-content + Anordnung des Inhalts, dieser kann mittig, oben, unten oder auch mit Abstand zwischen oder außenrum platziert werden. Achtung: benötigt das Layout "none" oder eine Gesamtbreite von mehr als 100% (multi-line)! Weitere Dokumentation: https://yoksel.github.io/flex-cheatsheet/#section-align-content none diff --git a/Resources/Public/Css/BootstrapAdditionalFlexClasses.css b/Resources/Public/Css/BootstrapAdditionalFlexClasses.css index 50bf846..6fecca9 100644 --- a/Resources/Public/Css/BootstrapAdditionalFlexClasses.css +++ b/Resources/Public/Css/BootstrapAdditionalFlexClasses.css @@ -1 +1,278 @@ -.flex-basis-20{flex-basis:20%}.flex-basis-25{flex-basis:25%}.flex-basis-33{flex-basis:33.3333%}.flex-basis-40{flex-basis:40%}.flex-basis-50{flex-basis:50%}.flex-basis-60{flex-basis:60%}.flex-basis-66{flex-basis:66.6666%}.flex-basis-75{flex-basis:75%}.flex-basis-100{flex-basis:100%}.order-first{order:-9999}.order-last{order:9999}.order-none{order:0}.vertical-separator .flex-item{position:relative}.vertical-separator .flex-item:not(:first-child){padding-left:2rem}.vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}@media (min-width: 640px){.sm\:flex-basis-20{flex-basis:20%}.sm\:flex-basis-25{flex-basis:25%}.sm\:flex-basis-33{flex-basis:33.3333%}.sm\:flex-basis-40{flex-basis:40%}.sm\:flex-basis-50{flex-basis:50%}.sm\:flex-basis-60{flex-basis:60%}.sm\:flex-basis-66{flex-basis:66.6666%}.sm\:flex-basis-75{flex-basis:75%}.sm\:flex-basis-100{flex-basis:100%}.sm\:order-first{order:-9999}.sm\:order-last{order:9999}.sm\:order-none{order:0}.sm\:vertical-separator .flex-item{position:relative}.sm\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.sm\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.sm\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 768px){.md\:flex-basis-20{flex-basis:20%}.md\:flex-basis-25{flex-basis:25%}.md\:flex-basis-33{flex-basis:33.3333%}.md\:flex-basis-40{flex-basis:40%}.md\:flex-basis-50{flex-basis:50%}.md\:flex-basis-60{flex-basis:60%}.md\:flex-basis-66{flex-basis:66.6666%}.md\:flex-basis-75{flex-basis:75%}.md\:flex-basis-100{flex-basis:100%}.md\:order-first{order:-9999}.md\:order-last{order:9999}.md\:order-none{order:0}.md\:vertical-separator .flex-item{position:relative}.md\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.md\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.md\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 1024px){.lg\:flex-basis-20{flex-basis:20%}.lg\:flex-basis-25{flex-basis:25%}.lg\:flex-basis-33{flex-basis:33.3333%}.lg\:flex-basis-40{flex-basis:40%}.lg\:flex-basis-50{flex-basis:50%}.lg\:flex-basis-60{flex-basis:60%}.lg\:flex-basis-66{flex-basis:66.6666%}.lg\:flex-basis-75{flex-basis:75%}.lg\:flex-basis-100{flex-basis:100%}.lg\:order-first{order:-9999}.lg\:order-last{order:9999}.lg\:order-none{order:0}.lg\:vertical-separator .flex-item{position:relative}.lg\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.lg\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.lg\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 1280px){.xl\:flex-basis-20{flex-basis:20%}.xl\:flex-basis-25{flex-basis:25%}.xl\:flex-basis-33{flex-basis:33.3333%}.xl\:flex-basis-40{flex-basis:40%}.xl\:flex-basis-50{flex-basis:50%}.xl\:flex-basis-60{flex-basis:60%}.xl\:flex-basis-66{flex-basis:66.6666%}.xl\:flex-basis-75{flex-basis:75%}.xl\:flex-basis-100{flex-basis:100%}.xl\:order-first{order:-9999}.xl\:order-last{order:9999}.xl\:order-none{order:0}.xl\:vertical-separator .flex-item{position:relative}.xl\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.xl\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.xl\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}} +.flex-basis-20 { + flex-basis: 20%; +} +.flex-basis-25 { + flex-basis: 25%; +} +.flex-basis-33 { + flex-basis: 33.3333%; +} +.flex-basis-40 { + flex-basis: 40%; +} +.flex-basis-50 { + flex-basis: 50%; +} +.flex-basis-60 { + flex-basis: 60%; +} +.flex-basis-66 { + flex-basis: 66.6666%; +} +.flex-basis-75 { + flex-basis: 75%; +} +.flex-basis-100 { + flex-basis: 100%; +} +.order-first { + order: -9999; +} +.order-last { + order: 9999; +} +.order-none { + order: 0; +} +.vertical-separator .flex-item { + position: relative; +} +.vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; +} +.vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); +} +.vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; +} +@media (min-width: 640px) { + .sm\:flex-basis-20 { + flex-basis: 20%; + } + .sm\:flex-basis-25 { + flex-basis: 25%; + } + .sm\:flex-basis-33 { + flex-basis: 33.3333%; + } + .sm\:flex-basis-40 { + flex-basis: 40%; + } + .sm\:flex-basis-50 { + flex-basis: 50%; + } + .sm\:flex-basis-60 { + flex-basis: 60%; + } + .sm\:flex-basis-66 { + flex-basis: 66.6666%; + } + .sm\:flex-basis-75 { + flex-basis: 75%; + } + .sm\:flex-basis-100 { + flex-basis: 100%; + } + .sm\:order-first { + order: -9999; + } + .sm\:order-last { + order: 9999; + } + .sm\:order-none { + order: 0; + } + .sm\:vertical-separator .flex-item { + position: relative; + } + .sm\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .sm\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .sm\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 768px) { + .md\:flex-basis-20 { + flex-basis: 20%; + } + .md\:flex-basis-25 { + flex-basis: 25%; + } + .md\:flex-basis-33 { + flex-basis: 33.3333%; + } + .md\:flex-basis-40 { + flex-basis: 40%; + } + .md\:flex-basis-50 { + flex-basis: 50%; + } + .md\:flex-basis-60 { + flex-basis: 60%; + } + .md\:flex-basis-66 { + flex-basis: 66.6666%; + } + .md\:flex-basis-75 { + flex-basis: 75%; + } + .md\:flex-basis-100 { + flex-basis: 100%; + } + .md\:order-first { + order: -9999; + } + .md\:order-last { + order: 9999; + } + .md\:order-none { + order: 0; + } + .md\:vertical-separator .flex-item { + position: relative; + } + .md\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .md\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .md\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 1024px) { + .lg\:flex-basis-20 { + flex-basis: 20%; + } + .lg\:flex-basis-25 { + flex-basis: 25%; + } + .lg\:flex-basis-33 { + flex-basis: 33.3333%; + } + .lg\:flex-basis-40 { + flex-basis: 40%; + } + .lg\:flex-basis-50 { + flex-basis: 50%; + } + .lg\:flex-basis-60 { + flex-basis: 60%; + } + .lg\:flex-basis-66 { + flex-basis: 66.6666%; + } + .lg\:flex-basis-75 { + flex-basis: 75%; + } + .lg\:flex-basis-100 { + flex-basis: 100%; + } + .lg\:order-first { + order: -9999; + } + .lg\:order-last { + order: 9999; + } + .lg\:order-none { + order: 0; + } + .lg\:vertical-separator .flex-item { + position: relative; + } + .lg\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .lg\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .lg\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 1280px) { + .xl\:flex-basis-20 { + flex-basis: 20%; + } + .xl\:flex-basis-25 { + flex-basis: 25%; + } + .xl\:flex-basis-33 { + flex-basis: 33.3333%; + } + .xl\:flex-basis-40 { + flex-basis: 40%; + } + .xl\:flex-basis-50 { + flex-basis: 50%; + } + .xl\:flex-basis-60 { + flex-basis: 60%; + } + .xl\:flex-basis-66 { + flex-basis: 66.6666%; + } + .xl\:flex-basis-75 { + flex-basis: 75%; + } + .xl\:flex-basis-100 { + flex-basis: 100%; + } + .xl\:order-first { + order: -9999; + } + .xl\:order-last { + order: 9999; + } + .xl\:order-none { + order: 0; + } + .xl\:vertical-separator .flex-item { + position: relative; + } + .xl\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .xl\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .xl\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} diff --git a/Resources/Public/Css/TailwindFlexClasses.css b/Resources/Public/Css/TailwindFlexClasses.css index 11c9f2f..9c53444 100644 --- a/Resources/Public/Css/TailwindFlexClasses.css +++ b/Resources/Public/Css/TailwindFlexClasses.css @@ -1 +1,821 @@ -.content-center{align-content:center}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-no-wrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink{flex-shrink:1}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.order-first{order:-9999}.order-last{order:9999}.order-none{order:0}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.vertical-separator .flex-item{position:relative}.vertical-separator .flex-item:not(:first-child){padding-left:2rem}.vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}@media (min-width: 640px){.sm\:content-center{align-content:center}.sm\:content-start{align-content:flex-start}.sm\:content-end{align-content:flex-end}.sm\:content-between{align-content:space-between}.sm\:content-around{align-content:space-around}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:flex-row{flex-direction:row}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:flex-col{flex-direction:column}.sm\:flex-col-reverse{flex-direction:column-reverse}.sm\:flex-wrap{flex-wrap:wrap}.sm\:flex-wrap-reverse{flex-wrap:wrap-reverse}.sm\:flex-no-wrap{flex-wrap:nowrap}.sm\:flex-1{flex:1 1 0%}.sm\:flex-auto{flex:1 1 auto}.sm\:flex-initial{flex:0 1 auto}.sm\:flex-none{flex:none}.sm\:flex-grow-0{flex-grow:0}.sm\:flex-grow{flex-grow:1}.sm\:flex-shrink-0{flex-shrink:0}.sm\:flex-shrink{flex-shrink:1}.sm\:flex-basis-20{flex-basis:20%}.sm\:flex-basis-25{flex-basis:25%}.sm\:flex-basis-33{flex-basis:33.3333%}.sm\:flex-basis-40{flex-basis:40%}.sm\:flex-basis-50{flex-basis:50%}.sm\:flex-basis-60{flex-basis:60%}.sm\:flex-basis-66{flex-basis:66.6666%}.sm\:flex-basis-75{flex-basis:75%}.sm\:flex-basis-100{flex-basis:100%}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.sm\:justify-start{justify-content:flex-start}.sm\:justify-end{justify-content:flex-end}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:justify-around{justify-content:space-around}.sm\:justify-evenly{justify-content:space-evenly}.sm\:order-first{order:-9999}.sm\:order-last{order:9999}.sm\:order-none{order:0}.sm\:self-auto{align-self:auto}.sm\:self-start{align-self:flex-start}.sm\:self-end{align-self:flex-end}.sm\:self-center{align-self:center}.sm\:self-stretch{align-self:stretch}.sm\:vertical-separator .flex-item{position:relative}.sm\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.sm\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.sm\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 768px){.md\:content-center{align-content:center}.md\:content-start{align-content:flex-start}.md\:content-end{align-content:flex-end}.md\:content-between{align-content:space-between}.md\:content-around{align-content:space-around}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:flex-col{flex-direction:column}.md\:flex-col-reverse{flex-direction:column-reverse}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-wrap-reverse{flex-wrap:wrap-reverse}.md\:flex-no-wrap{flex-wrap:nowrap}.md\:flex-1{flex:1 1 0%}.md\:flex-auto{flex:1 1 auto}.md\:flex-initial{flex:0 1 auto}.md\:flex-none{flex:none}.md\:flex-grow-0{flex-grow:0}.md\:flex-grow{flex-grow:1}.md\:flex-shrink-0{flex-shrink:0}.md\:flex-shrink{flex-shrink:1}.md\:flex-basis-20{flex-basis:20%}.md\:flex-basis-25{flex-basis:25%}.md\:flex-basis-33{flex-basis:33.3333%}.md\:flex-basis-40{flex-basis:40%}.md\:flex-basis-50{flex-basis:50%}.md\:flex-basis-60{flex-basis:60%}.md\:flex-basis-66{flex-basis:66.6666%}.md\:flex-basis-75{flex-basis:75%}.md\:flex-basis-100{flex-basis:100%}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:justify-center{justify-content:center}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:order-first{order:-9999}.md\:order-last{order:9999}.md\:order-none{order:0}.md\:self-auto{align-self:auto}.md\:self-start{align-self:flex-start}.md\:self-end{align-self:flex-end}.md\:self-center{align-self:center}.md\:self-stretch{align-self:stretch}.md\:vertical-separator .flex-item{position:relative}.md\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.md\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.md\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 1024px){.lg\:content-center{align-content:center}.lg\:content-start{align-content:flex-start}.lg\:content-end{align-content:flex-end}.lg\:content-between{align-content:space-between}.lg\:content-around{align-content:space-around}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:flex-col{flex-direction:column}.lg\:flex-col-reverse{flex-direction:column-reverse}.lg\:flex-wrap{flex-wrap:wrap}.lg\:flex-wrap-reverse{flex-wrap:wrap-reverse}.lg\:flex-no-wrap{flex-wrap:nowrap}.lg\:flex-1{flex:1 1 0%}.lg\:flex-auto{flex:1 1 auto}.lg\:flex-initial{flex:0 1 auto}.lg\:flex-none{flex:none}.lg\:flex-grow-0{flex-grow:0}.lg\:flex-grow{flex-grow:1}.lg\:flex-shrink-0{flex-shrink:0}.lg\:flex-shrink{flex-shrink:1}.lg\:flex-basis-20{flex-basis:20%}.lg\:flex-basis-25{flex-basis:25%}.lg\:flex-basis-33{flex-basis:33.3333%}.lg\:flex-basis-40{flex-basis:40%}.lg\:flex-basis-50{flex-basis:50%}.lg\:flex-basis-60{flex-basis:60%}.lg\:flex-basis-66{flex-basis:66.6666%}.lg\:flex-basis-75{flex-basis:75%}.lg\:flex-basis-100{flex-basis:100%}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.lg\:justify-start{justify-content:flex-start}.lg\:justify-end{justify-content:flex-end}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:justify-evenly{justify-content:space-evenly}.lg\:order-first{order:-9999}.lg\:order-last{order:9999}.lg\:order-none{order:0}.lg\:self-auto{align-self:auto}.lg\:self-start{align-self:flex-start}.lg\:self-end{align-self:flex-end}.lg\:self-center{align-self:center}.lg\:self-stretch{align-self:stretch}.lg\:vertical-separator .flex-item{position:relative}.lg\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.lg\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.lg\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}}@media (min-width: 1280px){.xl\:content-center{align-content:center}.xl\:content-start{align-content:flex-start}.xl\:content-end{align-content:flex-end}.xl\:content-between{align-content:space-between}.xl\:content-around{align-content:space-around}.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}.xl\:flex-row{flex-direction:row}.xl\:flex-row-reverse{flex-direction:row-reverse}.xl\:flex-col{flex-direction:column}.xl\:flex-col-reverse{flex-direction:column-reverse}.xl\:flex-wrap{flex-wrap:wrap}.xl\:flex-wrap-reverse{flex-wrap:wrap-reverse}.xl\:flex-no-wrap{flex-wrap:nowrap}.xl\:flex-1{flex:1 1 0%}.xl\:flex-auto{flex:1 1 auto}.xl\:flex-initial{flex:0 1 auto}.xl\:flex-none{flex:none}.xl\:flex-grow-0{flex-grow:0}.xl\:flex-grow{flex-grow:1}.xl\:flex-shrink-0{flex-shrink:0}.xl\:flex-shrink{flex-shrink:1}.xl\:flex-basis-20{flex-basis:20%}.xl\:flex-basis-25{flex-basis:25%}.xl\:flex-basis-33{flex-basis:33.3333%}.xl\:flex-basis-40{flex-basis:40%}.xl\:flex-basis-50{flex-basis:50%}.xl\:flex-basis-60{flex-basis:60%}.xl\:flex-basis-66{flex-basis:66.6666%}.xl\:flex-basis-75{flex-basis:75%}.xl\:flex-basis-100{flex-basis:100%}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.xl\:justify-start{justify-content:flex-start}.xl\:justify-end{justify-content:flex-end}.xl\:justify-center{justify-content:center}.xl\:justify-between{justify-content:space-between}.xl\:justify-around{justify-content:space-around}.xl\:justify-evenly{justify-content:space-evenly}.xl\:order-first{order:-9999}.xl\:order-last{order:9999}.xl\:order-none{order:0}.xl\:self-auto{align-self:auto}.xl\:self-start{align-self:flex-start}.xl\:self-end{align-self:flex-end}.xl\:self-center{align-self:center}.xl\:self-stretch{align-self:stretch}.xl\:vertical-separator .flex-item{position:relative}.xl\:vertical-separator .flex-item:not(:first-child){padding-left:2rem}.xl\:vertical-separator .flex-item:not(:last-child){padding-right:calc(2rem + 2px)}.xl\:vertical-separator .flex-item:not(:last-child)::after{content:'';background-color:black;height:100%;width:2px;position:absolute;right:0;top:0}} +.content-center { + align-content: center; +} +.content-start { + align-content: flex-start; +} +.content-end { + align-content: flex-end; +} +.content-between { + align-content: space-between; +} +.content-around { + align-content: space-around; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +.flex-row { + flex-direction: row; +} +.flex-row-reverse { + flex-direction: row-reverse; +} +.flex-col { + flex-direction: column; +} +.flex-col-reverse { + flex-direction: column-reverse; +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse; +} +.flex-no-wrap { + flex-wrap: nowrap; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-auto { + flex: 1 1 auto; +} +.flex-initial { + flex: 0 1 auto; +} +.flex-none { + flex: none; +} +.flex-grow-0 { + flex-grow: 0; +} +.flex-grow { + flex-grow: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} +.flex-shrink { + flex-shrink: 1; +} +.items-start { + align-items: flex-start; +} +.items-end { + align-items: flex-end; +} +.items-center { + align-items: center; +} +.items-baseline { + align-items: baseline; +} +.items-stretch { + align-items: stretch; +} +.justify-start { + justify-content: flex-start; +} +.justify-end { + justify-content: flex-end; +} +.justify-center { + justify-content: center; +} +.justify-between { + justify-content: space-between; +} +.justify-around { + justify-content: space-around; +} +.justify-evenly { + justify-content: space-evenly; +} +.order-first { + order: -9999; +} +.order-last { + order: 9999; +} +.order-none { + order: 0; +} +.self-auto { + align-self: auto; +} +.self-start { + align-self: flex-start; +} +.self-end { + align-self: flex-end; +} +.self-center { + align-self: center; +} +.self-stretch { + align-self: stretch; +} +.vertical-separator .flex-item { + position: relative; +} +.vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; +} +.vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); +} +.vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; +} +@media (min-width: 640px) { + .sm\:content-center { + align-content: center; + } + .sm\:content-start { + align-content: flex-start; + } + .sm\:content-end { + align-content: flex-end; + } + .sm\:content-between { + align-content: space-between; + } + .sm\:content-around { + align-content: space-around; + } + .sm\:flex { + display: flex; + } + .sm\:inline-flex { + display: inline-flex; + } + .sm\:flex-row { + flex-direction: row; + } + .sm\:flex-row-reverse { + flex-direction: row-reverse; + } + .sm\:flex-col { + flex-direction: column; + } + .sm\:flex-col-reverse { + flex-direction: column-reverse; + } + .sm\:flex-wrap { + flex-wrap: wrap; + } + .sm\:flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + .sm\:flex-no-wrap { + flex-wrap: nowrap; + } + .sm\:flex-1 { + flex: 1 1 0%; + } + .sm\:flex-auto { + flex: 1 1 auto; + } + .sm\:flex-initial { + flex: 0 1 auto; + } + .sm\:flex-none { + flex: none; + } + .sm\:flex-grow-0 { + flex-grow: 0; + } + .sm\:flex-grow { + flex-grow: 1; + } + .sm\:flex-shrink-0 { + flex-shrink: 0; + } + .sm\:flex-shrink { + flex-shrink: 1; + } + .sm\:flex-basis-20 { + flex-basis: 20%; + } + .sm\:flex-basis-25 { + flex-basis: 25%; + } + .sm\:flex-basis-33 { + flex-basis: 33.3333%; + } + .sm\:flex-basis-40 { + flex-basis: 40%; + } + .sm\:flex-basis-50 { + flex-basis: 50%; + } + .sm\:flex-basis-60 { + flex-basis: 60%; + } + .sm\:flex-basis-66 { + flex-basis: 66.6666%; + } + .sm\:flex-basis-75 { + flex-basis: 75%; + } + .sm\:flex-basis-100 { + flex-basis: 100%; + } + .items-start { + align-items: flex-start; + } + .items-end { + align-items: flex-end; + } + .items-center { + align-items: center; + } + .items-baseline { + align-items: baseline; + } + .items-stretch { + align-items: stretch; + } + .sm\:justify-start { + justify-content: flex-start; + } + .sm\:justify-end { + justify-content: flex-end; + } + .sm\:justify-center { + justify-content: center; + } + .sm\:justify-between { + justify-content: space-between; + } + .sm\:justify-around { + justify-content: space-around; + } + .sm\:justify-evenly { + justify-content: space-evenly; + } + .sm\:order-first { + order: -9999; + } + .sm\:order-last { + order: 9999; + } + .sm\:order-none { + order: 0; + } + .sm\:self-auto { + align-self: auto; + } + .sm\:self-start { + align-self: flex-start; + } + .sm\:self-end { + align-self: flex-end; + } + .sm\:self-center { + align-self: center; + } + .sm\:self-stretch { + align-self: stretch; + } + .sm\:vertical-separator .flex-item { + position: relative; + } + .sm\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .sm\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .sm\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 768px) { + .md\:content-center { + align-content: center; + } + .md\:content-start { + align-content: flex-start; + } + .md\:content-end { + align-content: flex-end; + } + .md\:content-between { + align-content: space-between; + } + .md\:content-around { + align-content: space-around; + } + .md\:flex { + display: flex; + } + .md\:inline-flex { + display: inline-flex; + } + .md\:flex-row { + flex-direction: row; + } + .md\:flex-row-reverse { + flex-direction: row-reverse; + } + .md\:flex-col { + flex-direction: column; + } + .md\:flex-col-reverse { + flex-direction: column-reverse; + } + .md\:flex-wrap { + flex-wrap: wrap; + } + .md\:flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + .md\:flex-no-wrap { + flex-wrap: nowrap; + } + .md\:flex-1 { + flex: 1 1 0%; + } + .md\:flex-auto { + flex: 1 1 auto; + } + .md\:flex-initial { + flex: 0 1 auto; + } + .md\:flex-none { + flex: none; + } + .md\:flex-grow-0 { + flex-grow: 0; + } + .md\:flex-grow { + flex-grow: 1; + } + .md\:flex-shrink-0 { + flex-shrink: 0; + } + .md\:flex-shrink { + flex-shrink: 1; + } + .md\:flex-basis-20 { + flex-basis: 20%; + } + .md\:flex-basis-25 { + flex-basis: 25%; + } + .md\:flex-basis-33 { + flex-basis: 33.3333%; + } + .md\:flex-basis-40 { + flex-basis: 40%; + } + .md\:flex-basis-50 { + flex-basis: 50%; + } + .md\:flex-basis-60 { + flex-basis: 60%; + } + .md\:flex-basis-66 { + flex-basis: 66.6666%; + } + .md\:flex-basis-75 { + flex-basis: 75%; + } + .md\:flex-basis-100 { + flex-basis: 100%; + } + .items-start { + align-items: flex-start; + } + .items-end { + align-items: flex-end; + } + .items-center { + align-items: center; + } + .items-baseline { + align-items: baseline; + } + .items-stretch { + align-items: stretch; + } + .md\:justify-start { + justify-content: flex-start; + } + .md\:justify-end { + justify-content: flex-end; + } + .md\:justify-center { + justify-content: center; + } + .md\:justify-between { + justify-content: space-between; + } + .md\:justify-around { + justify-content: space-around; + } + .md\:justify-evenly { + justify-content: space-evenly; + } + .md\:order-first { + order: -9999; + } + .md\:order-last { + order: 9999; + } + .md\:order-none { + order: 0; + } + .md\:self-auto { + align-self: auto; + } + .md\:self-start { + align-self: flex-start; + } + .md\:self-end { + align-self: flex-end; + } + .md\:self-center { + align-self: center; + } + .md\:self-stretch { + align-self: stretch; + } + .md\:vertical-separator .flex-item { + position: relative; + } + .md\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .md\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .md\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 1024px) { + .lg\:content-center { + align-content: center; + } + .lg\:content-start { + align-content: flex-start; + } + .lg\:content-end { + align-content: flex-end; + } + .lg\:content-between { + align-content: space-between; + } + .lg\:content-around { + align-content: space-around; + } + .lg\:flex { + display: flex; + } + .lg\:inline-flex { + display: inline-flex; + } + .lg\:flex-row { + flex-direction: row; + } + .lg\:flex-row-reverse { + flex-direction: row-reverse; + } + .lg\:flex-col { + flex-direction: column; + } + .lg\:flex-col-reverse { + flex-direction: column-reverse; + } + .lg\:flex-wrap { + flex-wrap: wrap; + } + .lg\:flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + .lg\:flex-no-wrap { + flex-wrap: nowrap; + } + .lg\:flex-1 { + flex: 1 1 0%; + } + .lg\:flex-auto { + flex: 1 1 auto; + } + .lg\:flex-initial { + flex: 0 1 auto; + } + .lg\:flex-none { + flex: none; + } + .lg\:flex-grow-0 { + flex-grow: 0; + } + .lg\:flex-grow { + flex-grow: 1; + } + .lg\:flex-shrink-0 { + flex-shrink: 0; + } + .lg\:flex-shrink { + flex-shrink: 1; + } + .lg\:flex-basis-20 { + flex-basis: 20%; + } + .lg\:flex-basis-25 { + flex-basis: 25%; + } + .lg\:flex-basis-33 { + flex-basis: 33.3333%; + } + .lg\:flex-basis-40 { + flex-basis: 40%; + } + .lg\:flex-basis-50 { + flex-basis: 50%; + } + .lg\:flex-basis-60 { + flex-basis: 60%; + } + .lg\:flex-basis-66 { + flex-basis: 66.6666%; + } + .lg\:flex-basis-75 { + flex-basis: 75%; + } + .lg\:flex-basis-100 { + flex-basis: 100%; + } + .items-start { + align-items: flex-start; + } + .items-end { + align-items: flex-end; + } + .items-center { + align-items: center; + } + .items-baseline { + align-items: baseline; + } + .items-stretch { + align-items: stretch; + } + .lg\:justify-start { + justify-content: flex-start; + } + .lg\:justify-end { + justify-content: flex-end; + } + .lg\:justify-center { + justify-content: center; + } + .lg\:justify-between { + justify-content: space-between; + } + .lg\:justify-around { + justify-content: space-around; + } + .lg\:justify-evenly { + justify-content: space-evenly; + } + .lg\:order-first { + order: -9999; + } + .lg\:order-last { + order: 9999; + } + .lg\:order-none { + order: 0; + } + .lg\:self-auto { + align-self: auto; + } + .lg\:self-start { + align-self: flex-start; + } + .lg\:self-end { + align-self: flex-end; + } + .lg\:self-center { + align-self: center; + } + .lg\:self-stretch { + align-self: stretch; + } + .lg\:vertical-separator .flex-item { + position: relative; + } + .lg\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .lg\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .lg\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 1280px) { + .xl\:content-center { + align-content: center; + } + .xl\:content-start { + align-content: flex-start; + } + .xl\:content-end { + align-content: flex-end; + } + .xl\:content-between { + align-content: space-between; + } + .xl\:content-around { + align-content: space-around; + } + .xl\:flex { + display: flex; + } + .xl\:inline-flex { + display: inline-flex; + } + .xl\:flex-row { + flex-direction: row; + } + .xl\:flex-row-reverse { + flex-direction: row-reverse; + } + .xl\:flex-col { + flex-direction: column; + } + .xl\:flex-col-reverse { + flex-direction: column-reverse; + } + .xl\:flex-wrap { + flex-wrap: wrap; + } + .xl\:flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + .xl\:flex-no-wrap { + flex-wrap: nowrap; + } + .xl\:flex-1 { + flex: 1 1 0%; + } + .xl\:flex-auto { + flex: 1 1 auto; + } + .xl\:flex-initial { + flex: 0 1 auto; + } + .xl\:flex-none { + flex: none; + } + .xl\:flex-grow-0 { + flex-grow: 0; + } + .xl\:flex-grow { + flex-grow: 1; + } + .xl\:flex-shrink-0 { + flex-shrink: 0; + } + .xl\:flex-shrink { + flex-shrink: 1; + } + .xl\:flex-basis-20 { + flex-basis: 20%; + } + .xl\:flex-basis-25 { + flex-basis: 25%; + } + .xl\:flex-basis-33 { + flex-basis: 33.3333%; + } + .xl\:flex-basis-40 { + flex-basis: 40%; + } + .xl\:flex-basis-50 { + flex-basis: 50%; + } + .xl\:flex-basis-60 { + flex-basis: 60%; + } + .xl\:flex-basis-66 { + flex-basis: 66.6666%; + } + .xl\:flex-basis-75 { + flex-basis: 75%; + } + .xl\:flex-basis-100 { + flex-basis: 100%; + } + .items-start { + align-items: flex-start; + } + .items-end { + align-items: flex-end; + } + .items-center { + align-items: center; + } + .items-baseline { + align-items: baseline; + } + .items-stretch { + align-items: stretch; + } + .xl\:justify-start { + justify-content: flex-start; + } + .xl\:justify-end { + justify-content: flex-end; + } + .xl\:justify-center { + justify-content: center; + } + .xl\:justify-between { + justify-content: space-between; + } + .xl\:justify-around { + justify-content: space-around; + } + .xl\:justify-evenly { + justify-content: space-evenly; + } + .xl\:order-first { + order: -9999; + } + .xl\:order-last { + order: 9999; + } + .xl\:order-none { + order: 0; + } + .xl\:self-auto { + align-self: auto; + } + .xl\:self-start { + align-self: flex-start; + } + .xl\:self-end { + align-self: flex-end; + } + .xl\:self-center { + align-self: center; + } + .xl\:self-stretch { + align-self: stretch; + } + .xl\:vertical-separator .flex-item { + position: relative; + } + .xl\:vertical-separator .flex-item:not(:first-child) { + padding-left: 2rem; + } + .xl\:vertical-separator .flex-item:not(:last-child) { + padding-right: calc(2rem + 2px); + } + .xl\:vertical-separator .flex-item:not(:last-child)::after { + content: ''; + background-color: black; + height: 100%; + width: 2px; + position: absolute; + right: 0; + top: 0; + } +} diff --git a/package.json b/package.json index 3155b79..6c7db3b 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "description": "", - "license": "GNU GPLv3", - "private": true, - "scripts": { - "build-css": "node-sass --output-style compressed --output Resources/Public/Css/ Resources/Private/Scss/" - }, - "dependencies": { - "node-sass": "^4" - } -} \ No newline at end of file + "description": "", + "license": "GNU GPLv3", + "private": true, + "scripts": { + "build-css": "node-sass --output-style compressed --output Resources/Public/Css/ Resources/Private/Scss/" + }, + "dependencies": { + "node-sass": "^4" + } +}