瀏覽代碼

fix(alwaysontop): change the size of the toolbar

master
hristoterezov 7 年之前
父節點
當前提交
70422f4a47
共有 3 個檔案被更改,包括 24 行新增1 行删除
  1. 20
    0
      css/_toolbars.scss
  2. 2
    0
      css/_variables.scss
  3. 2
    1
      react/features/always-on-top/AlwaysOnTop.js

+ 20
- 0
css/_toolbars.scss 查看文件

50
         display: inline-block;
50
         display: inline-block;
51
     }
51
     }
52
 
52
 
53
+    /**
54
+     * Always on top overrides.
55
+     */
56
+    &.always-on-top {
57
+        /**
58
+         * Toolbar button styles for always on top.
59
+         */
60
+        > .button {
61
+            font-size: $alwaysOnTopToolbarFontSize;
62
+            height: $alwaysOnTopToolbarSize;
63
+            line-height: $alwaysOnTopToolbarSize;
64
+            width: $alwaysOnTopToolbarSize;
65
+        }
66
+    }
67
+
53
     /**
68
     /**
54
      * Toolbar button styles.
69
      * Toolbar button styles.
55
      */
70
      */
128
         border-radius: 3px;
143
         border-radius: 3px;
129
         opacity: 0;
144
         opacity: 0;
130
 
145
 
146
+        &.always-on-top {
147
+            height: $alwaysOnTopToolbarSize;
148
+            top: 10px;
149
+        }
150
+
131
         @include transform(translateX(-50%));
151
         @include transform(translateX(-50%));
132
 
152
 
133
         > div:first-child .button {
153
         > div:first-child .button {

+ 2
- 0
css/_variables.scss 查看文件

32
 /**
32
 /**
33
  * Toolbar
33
  * Toolbar
34
  */
34
  */
35
+$alwaysOnTopToolbarFontSize: 1em;
36
+$alwaysOnTopToolbarSize: 30px;
35
 $defaultToolbarSize: 50px;
37
 $defaultToolbarSize: 50px;
36
 $defaultFilmStripOnlyToolbarSize: 37px;
38
 $defaultFilmStripOnlyToolbarSize: 37px;
37
 $secToolbarFontSize: 1.9em;
39
 $secToolbarFontSize: 1.9em;

+ 2
- 1
react/features/always-on-top/AlwaysOnTop.js 查看文件

251
      */
251
      */
252
     render() {
252
     render() {
253
         const className
253
         const className
254
-            = `toolbar_primary ${this.state.visible ? 'fadeIn' : 'fadeOut'}`;
254
+            = `toolbar_primary always-on-top ${
255
+                this.state.visible ? 'fadeIn' : 'fadeOut'}`;
255
 
256
 
256
         return (
257
         return (
257
             <StatelessToolbar
258
             <StatelessToolbar

Loading…
取消
儲存