[TASK] Optimize CSS clearfix usage 58/47558/2
authorBenjamin Kott <benjamin.kott@wfp2.com>
Sun, 10 Apr 2016 18:06:01 +0000 (20:06 +0200)
committerFrank Naegler <frank.naegler@typo3.org>
Sun, 10 Apr 2016 20:20:26 +0000 (22:20 +0200)
Releases: master
Resolves: #75483
Change-Id: Ia525a19d87be6a99ca2cc48b8561ebc800e9e34e
Reviewed-on: https://review.typo3.org/47558
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Build/Resources/Public/Less/Component/module.less
Build/Resources/Public/Less/Mixins/clearfix.less [new file with mode: 0644]
Build/Resources/Public/Less/TYPO3/_debugconsole.less
Build/Resources/Public/Less/TYPO3/_login_screen.less
Build/Resources/Public/Less/TYPO3/_module_extensionmanager.less
Build/Resources/Public/Less/TYPO3/_module_menu.less
Build/Resources/Public/Less/TYPO3/_module_web_page.less
Build/Resources/Public/Less/TYPO3/_topbar.less
Build/Resources/Public/Less/_minimal.less
typo3/sysext/install/Resources/Public/Css/InstallTool.css
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index e31f579..95b48bb 100644 (file)
@@ -55,7 +55,7 @@
 // Docheader
 //
 .module-docheader {
-       .clearfix;
+       &:extend(.clearfix all);
        position: fixed;
        width: 100%;
        top: 0;
@@ -67,7 +67,7 @@
        padding: @module-docheader-padding;
        .transition(margin-top 0.3s ease-in-out);
        .module-docheader-bar {
-               .clearfix;
+               &:extend(.clearfix all);
                min-height: @module-docheader-bar-height;
                margin: @module-docheader-bar-margin;
                line-height: @module-docheader-bar-height;
diff --git a/Build/Resources/Public/Less/Mixins/clearfix.less b/Build/Resources/Public/Less/Mixins/clearfix.less
new file mode 100644 (file)
index 0000000..24ba10d
--- /dev/null
@@ -0,0 +1,10 @@
+//
+// Clearfix
+//
+.clearfix() {
+       &:after {
+               content: "";
+               display: table;
+               clear: both;
+       }
+}
\ No newline at end of file
index 831b939..7037941 100644 (file)
@@ -8,7 +8,7 @@
        border: 1px solid @console-border-color;
 
        .topbar {
-               .clearfix();
+               &:extend(.clearfix all);
                background-color: @gray-light;
                padding: @padding-base-vertical @padding-base-horizontal;
                border-bottom: 1px solid @console-border-color;
index 4f8d350..e501aea 100644 (file)
 // Copyright
 //
 .typo3-login-copyright-link {
-       .clearfix();
+       &:extend(.clearfix all);
        > img {
                float: right;
                margin-top: -4px;
index 1f65559..73ea2a5 100644 (file)
@@ -76,7 +76,7 @@
        }
 }
 .distribution-holder {
-       .clearfix();
+       &:extend(.clearfix all);
        margin-top: 1em;
        bottom: 0px;
        margin-left: -20px;
 }
 
 .distribution-detail {
-       .clearfix();
+       &:extend(.clearfix all);
        min-width: 750px;
 }
 .distribution-detail-previewpane {
index 0b4258d..2964bfe 100644 (file)
@@ -66,7 +66,7 @@
                background-color: @module-menu-group-expanded-bg;
        }
        .typo3-module-menu-group-header {
-               .clearfix();
+               &:extend(.clearfix all);
                position: relative;
                cursor: pointer;
                display: block;
@@ -81,7 +81,7 @@
 
        // Module menu links
        .typo3-module-menu-item-link {
-               .clearfix();
+               &:extend(.clearfix all);
                position: relative;
                cursor: pointer;
                display: block;
index 0bfbc88..83a0bf4 100644 (file)
                word-wrap: break-word;
        }
        .t3-page-ce-header {
-               .clearfix();
+               &:extend(.clearfix all);
                .transition(background .15s ease-in);
                padding: (@page-grid-spacing / 2);
                border: 1px solid @page-ce-border;
index fc3a9a2..721a063 100644 (file)
        .dropdown-list {
                .list-unstyled();
                > li {
-                       .clearfix();
+                       &:extend(.clearfix all);
                        position: relative;
                        &.active .dropdown-list-link {
                                background-color: @topbar-dropdown-link-active-bg;
                        padding: 1px 0 0;
                }
                .modlink {
-                       .clearfix();
+                       &:extend(.clearfix all);
                        width: 210px;
                        .submodule-icon {
                                float: left;
index 789aead..dfede23 100644 (file)
@@ -3,12 +3,48 @@
 // Contains variables and shared components.
 //
 
+//
+// Bootstrap variables
+//
+@import "@{path-bower}/bootstrap/less/variables.less";
 
 //
 // Bootstrap mixins
 //
-@import "@{path-bower}/bootstrap/less/variables.less";
-@import "@{path-bower}/bootstrap/less/mixins.less";
+@import "@{path-bower}/bootstrap/less/mixins/hide-text.less";
+@import "@{path-bower}/bootstrap/less/mixins/opacity.less";
+@import "@{path-bower}/bootstrap/less/mixins/image.less";
+@import "@{path-bower}/bootstrap/less/mixins/labels.less";
+@import "@{path-bower}/bootstrap/less/mixins/reset-filter.less";
+@import "@{path-bower}/bootstrap/less/mixins/resize.less";
+@import "@{path-bower}/bootstrap/less/mixins/responsive-visibility.less";
+@import "@{path-bower}/bootstrap/less/mixins/size.less";
+@import "@{path-bower}/bootstrap/less/mixins/tab-focus.less";
+@import "@{path-bower}/bootstrap/less/mixins/reset-text.less";
+@import "@{path-bower}/bootstrap/less/mixins/text-emphasis.less";
+@import "@{path-bower}/bootstrap/less/mixins/text-overflow.less";
+@import "@{path-bower}/bootstrap/less/mixins/vendor-prefixes.less";
+@import "@{path-bower}/bootstrap/less/mixins/alerts.less";
+@import "@{path-bower}/bootstrap/less/mixins/buttons.less";
+@import "@{path-bower}/bootstrap/less/mixins/panels.less";
+@import "@{path-bower}/bootstrap/less/mixins/pagination.less";
+@import "@{path-bower}/bootstrap/less/mixins/list-group.less";
+@import "@{path-bower}/bootstrap/less/mixins/nav-divider.less";
+@import "@{path-bower}/bootstrap/less/mixins/forms.less";
+@import "@{path-bower}/bootstrap/less/mixins/progress-bar.less";
+@import "@{path-bower}/bootstrap/less/mixins/table-row.less";
+@import "@{path-bower}/bootstrap/less/mixins/background-variant.less";
+@import "@{path-bower}/bootstrap/less/mixins/border-radius.less";
+@import "@{path-bower}/bootstrap/less/mixins/gradients.less";
+@import "@{path-bower}/bootstrap/less/mixins/center-block.less";
+@import "@{path-bower}/bootstrap/less/mixins/nav-vertical-align.less";
+@import "@{path-bower}/bootstrap/less/mixins/grid-framework.less";
+@import "@{path-bower}/bootstrap/less/mixins/grid.less";
+
+//
+// Custom mixins
+//
+@import "Mixins/clearfix.less";
 
 //
 // Reset and dependencies
index 4e482bd..d6e3715 100644 (file)
@@ -7835,43 +7835,11 @@ button.close {
   padding: 0 24px;
   transition: margin-top 0.3s ease-in-out;
 }
-.module-docheader:before,
-.module-docheader:after {
-  content: " ";
-  display: table;
-}
-.module-docheader:after {
-  clear: both;
-}
-.module-docheader:before,
-.module-docheader:after {
-  content: " ";
-  display: table;
-}
-.module-docheader:after {
-  clear: both;
-}
 .module-docheader .module-docheader-bar {
   min-height: 26px;
   margin: 4px 0;
   line-height: 26px;
 }
-.module-docheader .module-docheader-bar:before,
-.module-docheader .module-docheader-bar:after {
-  content: " ";
-  display: table;
-}
-.module-docheader .module-docheader-bar:after {
-  clear: both;
-}
-.module-docheader .module-docheader-bar:before,
-.module-docheader .module-docheader-bar:after {
-  content: " ";
-  display: table;
-}
-.module-docheader .module-docheader-bar:after {
-  clear: both;
-}
 .module-docheader .module-docheader-bar label {
   margin-top: 0;
   margin-bottom: 0;
@@ -7915,54 +7883,25 @@ button.close {
 .module-docheader + .module-body {
   padding-top: 89px;
 }
-.clearfix:before,
 .clearfix:after,
-.dl-horizontal dd:before,
 .dl-horizontal dd:after,
-.container:before,
 .container:after,
-.container-fluid:before,
 .container-fluid:after,
-.row:before,
 .row:after,
-.form-horizontal .form-group:before,
 .form-horizontal .form-group:after,
-.btn-toolbar:before,
 .btn-toolbar:after,
-.btn-group-vertical > .btn-group:before,
 .btn-group-vertical > .btn-group:after,
-.nav:before,
 .nav:after,
-.navbar:before,
 .navbar:after,
-.navbar-header:before,
 .navbar-header:after,
-.navbar-collapse:before,
 .navbar-collapse:after,
-.panel-body:before,
 .panel-body:after,
-.modal-header:before,
 .modal-header:after,
-.modal-footer:before,
-.modal-footer:after {
-  content: " ";
+.modal-footer:after,
+.module-docheader:after,
+.module-docheader .module-docheader-bar:after {
+  content: "";
   display: table;
-}
-.clearfix:after,
-.dl-horizontal dd:after,
-.container:after,
-.container-fluid:after,
-.row:after,
-.form-horizontal .form-group:after,
-.btn-toolbar:after,
-.btn-group-vertical > .btn-group:after,
-.nav:after,
-.navbar:after,
-.navbar-header:after,
-.navbar-collapse:after,
-.panel-body:after,
-.modal-header:after,
-.modal-footer:after {
   clear: both;
 }
 .center-block {
index c6c268e..3a6d4d2 100644 (file)
@@ -7844,43 +7844,11 @@ button.close {
   padding: 0 24px;
   transition: margin-top 0.3s ease-in-out;
 }
-.module-docheader:before,
-.module-docheader:after {
-  content: " ";
-  display: table;
-}
-.module-docheader:after {
-  clear: both;
-}
-.module-docheader:before,
-.module-docheader:after {
-  content: " ";
-  display: table;
-}
-.module-docheader:after {
-  clear: both;
-}
 .module-docheader .module-docheader-bar {
   min-height: 26px;
   margin: 4px 0;
   line-height: 26px;
 }
-.module-docheader .module-docheader-bar:before,
-.module-docheader .module-docheader-bar:after {
-  content: " ";
-  display: table;
-}
-.module-docheader .module-docheader-bar:after {
-  clear: both;
-}
-.module-docheader .module-docheader-bar:before,
-.module-docheader .module-docheader-bar:after {
-  content: " ";
-  display: table;
-}
-.module-docheader .module-docheader-bar:after {
-  clear: both;
-}
 .module-docheader .module-docheader-bar label {
   margin-top: 0;
   margin-bottom: 0;
@@ -7924,60 +7892,36 @@ button.close {
 .module-docheader + .module-body {
   padding-top: 89px;
 }
-.clearfix:before,
 .clearfix:after,
-.dl-horizontal dd:before,
 .dl-horizontal dd:after,
-.container:before,
 .container:after,
-.container-fluid:before,
 .container-fluid:after,
-.row:before,
 .row:after,
-.form-horizontal .form-group:before,
 .form-horizontal .form-group:after,
-.btn-toolbar:before,
 .btn-toolbar:after,
-.btn-group-vertical > .btn-group:before,
 .btn-group-vertical > .btn-group:after,
-.nav:before,
 .nav:after,
-.navbar:before,
 .navbar:after,
-.navbar-header:before,
 .navbar-header:after,
-.navbar-collapse:before,
 .navbar-collapse:after,
-.panel-body:before,
 .panel-body:after,
-.modal-header:before,
 .modal-header:after,
-.modal-footer:before,
 .modal-footer:after,
-.pagination-block:before,
+.module-docheader:after,
+.module-docheader .module-docheader-bar:after,
 .pagination-block:after,
-.form-irre-header-body dl dd:before,
-.form-irre-header-body dl dd:after {
-  content: " ";
+.typo3-login-copyright-link:after,
+.form-irre-header-body dl dd:after,
+[id="typo3-menu"] .typo3-module-menu-group-header:after,
+[id="typo3-menu"] .typo3-module-menu-item-link:after,
+.t3-page-ce .t3-page-ce-header:after,
+.typo3-topbar-navigation-items .dropdown-list > li:after,
+.typo3-topbar-navigation-items .dropdown-list .modlink:after,
+#typo3-debug-console .topbar:after,
+.distribution-holder:after,
+.distribution-detail:after {
+  content: "";
   display: table;
-}
-.clearfix:after,
-.dl-horizontal dd:after,
-.container:after,
-.container-fluid:after,
-.row:after,
-.form-horizontal .form-group:after,
-.btn-toolbar:after,
-.btn-group-vertical > .btn-group:after,
-.nav:after,
-.navbar:after,
-.navbar-header:after,
-.navbar-collapse:after,
-.panel-body:after,
-.modal-header:after,
-.modal-footer:after,
-.pagination-block:after,
-.form-irre-header-body dl dd:after {
   clear: both;
 }
 .center-block {
@@ -11823,22 +11767,6 @@ fieldset[disabled] .btn-login.focus {
     right: -20px;
   }
 }
-.typo3-login-copyright-link:before,
-.typo3-login-copyright-link:after {
-  content: " ";
-  display: table;
-}
-.typo3-login-copyright-link:after {
-  clear: both;
-}
-.typo3-login-copyright-link:before,
-.typo3-login-copyright-link:after {
-  content: " ";
-  display: table;
-}
-.typo3-login-copyright-link:after {
-  clear: both;
-}
 .typo3-login-copyright-link > img {
   float: right;
   margin-top: -4px;
@@ -12533,22 +12461,6 @@ iframe {
   padding: 4px 9px;
   text-transform: uppercase;
 }
-[id="typo3-menu"] .typo3-module-menu-group-header:before,
-[id="typo3-menu"] .typo3-module-menu-group-header:after {
-  content: " ";
-  display: table;
-}
-[id="typo3-menu"] .typo3-module-menu-group-header:after {
-  clear: both;
-}
-[id="typo3-menu"] .typo3-module-menu-group-header:before,
-[id="typo3-menu"] .typo3-module-menu-group-header:after {
-  content: " ";
-  display: table;
-}
-[id="typo3-menu"] .typo3-module-menu-group-header:after {
-  clear: both;
-}
 [id="typo3-menu"] .typo3-module-menu-item {
   margin: 1px 0;
 }
@@ -12561,22 +12473,6 @@ iframe {
   border-radius: 0 2px 2px 0;
   text-decoration: none;
 }
-[id="typo3-menu"] .typo3-module-menu-item-link:before,
-[id="typo3-menu"] .typo3-module-menu-item-link:after {
-  content: " ";
-  display: table;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link:after {
-  clear: both;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link:before,
-[id="typo3-menu"] .typo3-module-menu-item-link:after {
-  content: " ";
-  display: table;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link:after {
-  clear: both;
-}
 [id="typo3-menu"] .typo3-module-menu-item-link:focus,
 [id="typo3-menu"] .typo3-module-menu-item-link:hover {
   outline: none;
@@ -12776,22 +12672,6 @@ iframe {
   border-radius: 2px 2px 0 0;
   background: #eaeaea;
 }
-.t3-page-ce .t3-page-ce-header:before,
-.t3-page-ce .t3-page-ce-header:after {
-  content: " ";
-  display: table;
-}
-.t3-page-ce .t3-page-ce-header:after {
-  clear: both;
-}
-.t3-page-ce .t3-page-ce-header:before,
-.t3-page-ce .t3-page-ce-header:after {
-  content: " ";
-  display: table;
-}
-.t3-page-ce .t3-page-ce-header:after {
-  clear: both;
-}
 .t3-page-ce .t3-page-ce-header-icons-left {
   float: left;
 }
@@ -13053,22 +12933,6 @@ iframe {
 .typo3-topbar-navigation-items .dropdown-list > li {
   position: relative;
 }
-.typo3-topbar-navigation-items .dropdown-list > li:before,
-.typo3-topbar-navigation-items .dropdown-list > li:after {
-  content: " ";
-  display: table;
-}
-.typo3-topbar-navigation-items .dropdown-list > li:after {
-  clear: both;
-}
-.typo3-topbar-navigation-items .dropdown-list > li:before,
-.typo3-topbar-navigation-items .dropdown-list > li:after {
-  content: " ";
-  display: table;
-}
-.typo3-topbar-navigation-items .dropdown-list > li:after {
-  clear: both;
-}
 .typo3-topbar-navigation-items .dropdown-list > li.active .dropdown-list-link {
   background-color: #484848;
   color: #ffffff;
@@ -13088,22 +12952,6 @@ iframe {
 .typo3-topbar-navigation-items .dropdown-list .modlink {
   width: 210px;
 }
-.typo3-topbar-navigation-items .dropdown-list .modlink:before,
-.typo3-topbar-navigation-items .dropdown-list .modlink:after {
-  content: " ";
-  display: table;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink:after {
-  clear: both;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink:before,
-.typo3-topbar-navigation-items .dropdown-list .modlink:after {
-  content: " ";
-  display: table;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink:after {
-  clear: both;
-}
 .typo3-topbar-navigation-items .dropdown-list .modlink .submodule-icon {
   float: left;
   margin-right: 10px;
@@ -13274,22 +13122,6 @@ iframe {
   padding: 6px 6px;
   border-bottom: 1px solid #b1b1b1;
 }
-#typo3-debug-console .topbar:before,
-#typo3-debug-console .topbar:after {
-  content: " ";
-  display: table;
-}
-#typo3-debug-console .topbar:after {
-  clear: both;
-}
-#typo3-debug-console .topbar:before,
-#typo3-debug-console .topbar:after {
-  content: " ";
-  display: table;
-}
-#typo3-debug-console .topbar:after {
-  clear: both;
-}
 #typo3-debug-console .topbar .badge {
   margin-left: 6px;
 }
@@ -13414,22 +13246,6 @@ iframe {
   bottom: 0px;
   margin-left: -20px;
 }
-.distribution-holder:before,
-.distribution-holder:after {
-  content: " ";
-  display: table;
-}
-.distribution-holder:after {
-  clear: both;
-}
-.distribution-holder:before,
-.distribution-holder:after {
-  content: " ";
-  display: table;
-}
-.distribution-holder:after {
-  clear: both;
-}
 .distribution-image {
   position: relative;
   width: 300px;
@@ -13472,22 +13288,6 @@ iframe {
 .distribution-detail {
   min-width: 750px;
 }
-.distribution-detail:before,
-.distribution-detail:after {
-  content: " ";
-  display: table;
-}
-.distribution-detail:after {
-  clear: both;
-}
-.distribution-detail:before,
-.distribution-detail:after {
-  content: " ";
-  display: table;
-}
-.distribution-detail:after {
-  clear: both;
-}
 .distribution-detail-previewpane {
   float: left;
   margin-right: 30px;