Improved buttons / page action buttons
authorMarcel Werk <burntime@woltlab.com>
Wed, 13 Jul 2016 16:51:13 +0000 (18:51 +0200)
committerMarcel Werk <burntime@woltlab.com>
Wed, 13 Jul 2016 16:51:13 +0000 (18:51 +0200)
wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Action.js
wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpToTop.js
wcfsetup/install/files/style/layout/pageHeader.scss
wcfsetup/install/files/style/ui/button.scss
wcfsetup/install/files/style/ui/pageAction.scss

index 0996f982b65010040944a09e495c6908ffda20fe..8314cd7d3be18062f5d4a79a23cc72cc9cd7df58 100644 (file)
@@ -41,6 +41,8 @@ define(['Dictionary', 'Dom/Util'], function(Dictionary, DomUtil) {
                        if (_didInit === false) this.setup();
                        
                        var listItem = elCreate('li');
+                       button.classList.add('button');
+                       button.classList.add('buttonPrimary');
                        listItem.appendChild(button);
                        elAttr(listItem, 'aria-hidden', (buttonName === 'toTop' ? 'true' : 'false'));
                        elData(listItem, 'name', buttonName);
index 77db0749a11214cf6024cc2269c183619ef9b801..6ceaeb792b1c087479d1c09747c9972ef096ee3f 100644 (file)
@@ -30,7 +30,7 @@ define(['Environment', 'Language', './Action'], function(Environment, Language,
                        button.className = 'jsTooltip';
                        button.href = '#';
                        elAttr(button, 'title', Language.get('wcf.global.scrollUp'));
-                       button.innerHTML = '<span class="icon icon16 fa-arrow-up"></span>';
+                       button.innerHTML = '<span class="icon icon32 fa-angle-up"></span>';
                        
                        button.addEventListener(WCF_CLICK_EVENT, this._jump.bind(this));
                        
index e8103de383beeba05b615efb6b329658b5a13ed6..850f5a6c78e649e99cbe199b8604b97140b29e03 100644 (file)
                        position: relative;
                        text-align: left;
                        text-overflow: ellipsis;
+                       text-transform: initial;
                        white-space: nowrap;
                        
                        &::after {
index 79a492948892239a4e228cfb8de3ed209976b386..bf42cd19b380453c856546ac923f064d92867151 100644 (file)
@@ -11,7 +11,7 @@ a.button { // a.button is required to override link formatting, such as drop-dow
        cursor: pointer;
        display: inline-block;
        outline: none;
-       padding: 6px 12px;
+       padding: 8px 18px;
        text-decoration: none;
        
        // input elements do not inherit font family, size and line-height from body
@@ -36,10 +36,15 @@ a.button { // a.button is required to override link formatting, such as drop-dow
        }
        
        &.small {
-               padding: 4px 7px;
+               padding: 6px 8px;
+               text-transform: initial;
                
                @include wcfFontSmall;
        }
+       
+       &:not(.inputPrefix) {
+               text-transform: uppercase;
+       }
 }
 
 button.buttonPrimary,
@@ -98,7 +103,8 @@ a.button {
        @include inlineList;
        
        &.smallButtons .button {
-               padding: 5px 7px;
+               padding: 6px 8px;
+               text-transform: initial;
                
                @include wcfFontSmall;
        }
index 0cfef42e411c2195600d9d62a138fe930864f6b7..4126af582528ce9d79a27849719b4dbab256fe48 100644 (file)
@@ -15,9 +15,9 @@
 }
 
 .pageAction {
-       bottom: 20px;
+       bottom: 10px;
        position: fixed;
-       right: 20px;
+       right: 10px;
        z-index: 400;
        
        @include inlineList;
                        visibility: hidden;
                }
                
-               > a {
-                       background-color: rgba(0, 0, 0, .7);
-                       border-radius: 2px;
-                       color: rgba(224, 224, 224, 1);
-                       padding: 5px 10px;
-                       
-                       > .icon {
-                               color: inherit;
-                       }
-               }
-               
-               > a:hover,
-               &.dropdownOpen > a {
-                       background-color: rgba(0, 0, 0, 1);
-                       color: rgba(255, 255, 255, 1);
+               &.toTop > a {
+                       padding: 2px;
                }
        }
 }