[BUGFIX] Prevent cut off font icons on zoom 70/37070/3
authorBenjamin Kott <benjamin.kott@outlook.com>
Sat, 21 Feb 2015 15:23:23 +0000 (16:23 +0100)
committerWouter Wolters <typo3@wouterwolters.nl>
Sat, 21 Feb 2015 16:25:02 +0000 (17:25 +0100)
Font icons were cut off on top when browser is zoomed
or subpixel placement is not ideal.

Also corrected the wrong placed CSS classes in the
extension manager on extension import.

Releases: master
Resolves: #65212
Change-Id: If073b9a65550caaa816e68adde3c7758dd9586e3
Reviewed-on: http://review.typo3.org/37070
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
12 files changed:
typo3/sysext/backend/Resources/Public/Css/visual/main_content.css
typo3/sysext/extensionmanager/Classes/ViewHelpers/DownloadExtensionViewHelper.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_deprecated.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagination.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_icons.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_extensionmanager.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_module_web_list.less
typo3/sysext/t3skin/Resources/Private/Styles/font-awesome/variables.less
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/t3skin/stylesheets/sprites/_t3-icon.css [deleted file]

index 4dfda75..0ae8a48 100644 (file)
@@ -7,26 +7,6 @@ a img {
        border: none;
 }
 
-span.t3-icon {
-       display: inline-block;
-       position: relative;
-       overflow: hidden;
-}
-
-.t3-icon {
-       background-image:url('../../../../../../gfx/icon_fatalerror.gif');
-       background-repeat:no-repeat;
-       width: 16px;
-       height: 16px;
-       font-size: 1px;
-       line-height:0;
-}
-
-.t3-icon .c-inputButton {
-       width:16px;
-       height:16px;
-}
-
 .typo3-newRecord-treeline {
        padding-right: 20px;
 }
index 7794211..04ac182 100644 (file)
@@ -54,11 +54,17 @@ class DownloadExtensionViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\FormViewH
                ), 'Download');
                $this->tag->addAttribute('data-href', $uri);
 
-               // @TODO Clean-up
-               $iconClasses = 'btn btn-default fa fa-cloud-download';
-               $label = '<div class="btn-group"><button title="' . LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') .
-                       '" type="submit" class="' . $iconClasses . '" value="' .
-                       LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '" /></div>';
+               $label = '
+                       <div class="btn-group">
+                               <button
+                                       title="' . LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '"
+                                       type="submit"
+                                       class="btn btn-default"
+                                       value="' . LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '"
+                               >
+                                       <span class="t3-icon fa fa-cloud-download"></span>
+                               </button>
+                       </div>';
 
                $this->tag->setContent($label . $pathSelector);
                $this->tag->addAttribute('class', 'download');
index a96025e..2ad6242 100644 (file)
        padding: 6px;
 }
 
-.t3-row-header span.t3-icon {
-       margin-right: 3px;
-}
-
 .typo3-tstemplate-ceditor-control {
        margin-right: 6px;
        vertical-align: bottom;
index 54550a1..63d4b45 100644 (file)
@@ -15,7 +15,7 @@
                margin: 0;
        }
 
-       span.t3-icon {
+       .t3-icon {
                margin-bottom: 2px;
        }
 
index f33b8f6..41e3648 100644 (file)
@@ -4,7 +4,6 @@
 .pagination {
     .t3-icon {
         margin: 0;
-        text-align: center;
     }
     .paginator-input {
         display: inline-block;
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_icons.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_icons.less
new file mode 100644 (file)
index 0000000..92dc963
--- /dev/null
@@ -0,0 +1,35 @@
+//
+// Icons
+//
+.t3-icon {
+       display: inline-block;
+       position: relative;
+       vertical-align: middle;
+       background-image: url('../../../../../../gfx/icon_fatalerror.gif');
+       background-repeat: no-repeat;
+       margin-right: 2px;
+       width: 16px;
+       height: 16px;
+       text-align: center;
+       &.fa {
+               background: none;
+               font-size: 14px;
+       }
+       .c-inputButton {
+               width:16px;
+               height:16px;
+       }
+}
+.t3-icon-overlay {
+       display: block;
+       position: absolute;
+       left: 0;
+       top: 0;
+       width: 16px;
+       height: 16px;
+       text-decoration: none;
+       padding: 0;
+}
+.t3-icon-empty {
+       background-image: none;
+}
index 3887239..a2b37a4 100644 (file)
 }
 
 .typo3-extension-list {
-       // Import extension
-       .t3-icon,
-       .t3-icon:hover {
-               border: none;
-               background-color: transparent;
-       }
        // Hide author for now
        .author {
                display: none;
index 761c8e7..7cb8028 100644 (file)
@@ -28,13 +28,6 @@ table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-hidden {
        visibility: hidden;
 }
 
-table.typo3-dblist tr td div.typo3-clipCtrl span.t3-icon,
-table.typo3-dblist tr td div.typo3-DBctrl span.t3-icon {
-       float: left;
-       margin-left: 1px;
-       margin-right: 1px;
-}
-
 table.typo3-dblist tr td.col-icon {
        vertical-align: middle;
        width: 20px;
index 3106a5b..0d5a03a 100644 (file)
@@ -9,11 +9,6 @@
 @fa-inverse:          #fff;
 @fa-li-width:         (30em / 14);
 
-.t3-icon.fa {
-       background: none;
-       font-size: 14px;
-}
-
 @fa-var-adjust: "\f042";
 @fa-var-adn: "\f170";
 @fa-var-align-center: "\f037";
index 88fe099..be4e737 100644 (file)
 @import "TYPO3/_element_label.less";
 @import "TYPO3/_element_buttons.less";
 @import "TYPO3/_fonts.less";
+@import "TYPO3/_icons.less";
 @import "TYPO3/_login_screen.less";
 @import "TYPO3/_main_body.less";
 @import "TYPO3/_main_content.less";
index 35e4b38..17375d7 100644 (file)
@@ -5385,10 +5385,6 @@ button.close {
  *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
-.t3-icon.fa {
-  background: none;
-  font-size: 14px;
-}
 /* FONT PATH
  * -------------------------- */
 @font-face {
@@ -7154,9 +7150,6 @@ button.close {
 .tableheader td {
   padding: 6px;
 }
-.t3-row-header span.t3-icon {
-  margin-right: 3px;
-}
 .typo3-tstemplate-ceditor-control {
   margin-right: 6px;
   vertical-align: bottom;
@@ -7935,7 +7928,7 @@ table#typo3-history-item img {
   padding: 0;
   margin: 0;
 }
-#typo3-pagetree span.t3-icon {
+#typo3-pagetree .t3-icon {
   margin-bottom: 2px;
 }
 #typo3-pagetree ul {
@@ -9322,7 +9315,6 @@ table#typo3-tree tr:hover {
 }
 .pagination .t3-icon {
   margin: 0;
-  text-align: center;
 }
 .pagination .paginator-input {
   display: inline-block;
@@ -9395,6 +9387,38 @@ table#typo3-tree tr:hover {
   font-weight: bold;
   font-style: italic;
 }
+.t3-icon {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  background-image: url('../../../../../../gfx/icon_fatalerror.gif');
+  background-repeat: no-repeat;
+  margin-right: 2px;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.t3-icon.fa {
+  background: none;
+  font-size: 14px;
+}
+.t3-icon .c-inputButton {
+  width: 16px;
+  height: 16px;
+}
+.t3-icon-overlay {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  text-decoration: none;
+  padding: 0;
+}
+.t3-icon-empty {
+  background-image: none;
+}
 #typo3-index-php {
   background: #ebebeb;
   min-width: 400px;
@@ -11119,11 +11143,6 @@ fieldset[disabled] .live-search-list .x-btn button.active {
 .is-hidden {
   display: none;
 }
-.typo3-extension-list .t3-icon,
-.typo3-extension-list .t3-icon:hover {
-  border: none;
-  background-color: transparent;
-}
 .typo3-extension-list .author {
   display: none;
 }
@@ -11449,12 +11468,6 @@ table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning {
 table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-hidden {
   visibility: hidden;
 }
-table.typo3-dblist tr td div.typo3-clipCtrl span.t3-icon,
-table.typo3-dblist tr td div.typo3-DBctrl span.t3-icon {
-  float: left;
-  margin-left: 1px;
-  margin-right: 1px;
-}
 table.typo3-dblist tr td.col-icon {
   vertical-align: middle;
   width: 20px;
diff --git a/typo3/sysext/t3skin/stylesheets/sprites/_t3-icon.css b/typo3/sysext/t3skin/stylesheets/sprites/_t3-icon.css
deleted file mode 100644 (file)
index 70d9c38..0000000
+++ /dev/null
@@ -1,17 +0,0 @@
-span.t3-icon {
-       margin-right: 2px;
-       vertical-align: middle;
-}
-span.t3-icon-overlay {
-       display: block;
-       width: 16px;
-       height: 16px;
-       position: absolute;
-       left: 0;
-       top: 0;
-       text-decoration: none;
-       padding: 0;
-}
-.t3-icon-empty {
-       background-image: none;
-}