##// END OF EJS Templates
Fix widget radii
Jonathan Frederic -
Show More
@@ -1,3 +1,6 b''
1 @widget-width: 350px;
2 @widget-width-short: 150px;
3
1 .widget-area {
4 .widget-area {
2 /*
5 /*
3 LESS file that styles IPython notebook widgets and the area they sit in.
6 LESS file that styles IPython notebook widgets and the area they sit in.
@@ -72,11 +75,11 b''
72 /* Fix the padding of the slide track so the ui-slider is sized
75 /* Fix the padding of the slide track so the ui-slider is sized
73 correctly. */
76 correctly. */
74 padding-left : 8px;
77 padding-left : 8px;
75 padding-right : 5px;
78 padding-right : 2px;
76 overflow : visible;
79 overflow : visible;
77
80
78 /* Default size of the slider */
81 /* Default size of the slider */
79 width : 350px;
82 width : @widget-width;
80 height : 5px;
83 height : 5px;
81 max-height : 5px;
84 max-height : 5px;
82 margin-top : 13px;
85 margin-top : 13px;
@@ -90,21 +93,23 b''
90
93
91 .ui-slider {
94 .ui-slider {
92 /* Inner, invisible slide div */
95 /* Inner, invisible slide div */
93 border : 0px !important;
96 border : 0px;
94 background : none !important;
97 background : none;
95
98
96 .hbox();
99 .hbox();
97 .box-flex1();
100 .box-flex1();
98
101
99 .ui-slider-handle {
102 .ui-slider-handle {
100 width : 14px !important;
103 width: 12px;
101 height : 28px !important;
104 height: 28px;
102 margin-top : -8px !important;
105 margin-top: -8px;
106 border-radius: @border-radius-base;
103 }
107 }
104
108
105 .ui-slider-range {
109 .ui-slider-range {
106 height : 12px !important;
110 height : 12px;
107 margin-top : -4px !important;
111 margin-top : -4px;
112 background : @page-backdrop-color;
108 }
113 }
109 }
114 }
110 }
115 }
@@ -114,7 +119,7 b''
114
119
115 /* Fix the padding of the slide track so the ui-slider is sized
120 /* Fix the padding of the slide track so the ui-slider is sized
116 correctly. */
121 correctly. */
117 padding-bottom : 8px;
122 padding-bottom : 5px;
118 overflow : visible;
123 overflow : visible;
119
124
120 /* Default size of the slider */
125 /* Default size of the slider */
@@ -131,8 +136,8 b''
131
136
132 .ui-slider {
137 .ui-slider {
133 /* Inner, invisible slide div */
138 /* Inner, invisible slide div */
134 border : 0px !important;
139 border : 0px;
135 background : none !important;
140 background : none;
136 margin-left : -4px;
141 margin-left : -4px;
137 margin-top : 5px;
142 margin-top : 5px;
138
143
@@ -140,40 +145,42 b''
140 .box-flex1();
145 .box-flex1();
141
146
142 .ui-slider-handle {
147 .ui-slider-handle {
143 width : 28px !important;
148 width : 28px;
144 height : 14px !important;
149 height : 12px;
145 margin-left : -9px;
150 margin-left : -9px;
151 border-radius: @border-radius-base;
146 }
152 }
147
153
148 .ui-slider-range {
154 .ui-slider-range {
149 width : 12px !important;
155 width : 12px;
150 margin-left : -1px !important;
156 margin-left : -1px;
157 background : @page-backdrop-color;
151 }
158 }
152 }
159 }
153 }
160 }
154
161
155 .widget-text {
162 .widget-text {
156 /* String Textbox - used for TextBoxView and TextAreaView */
163 /* String Textbox - used for TextBoxView and TextAreaView */
157 width : 350px;
164 width : @widget-width;
158 margin : 0px;
165 margin : 0px;
159 }
166 }
160
167
161 .widget-listbox {
168 .widget-listbox {
162 /* Listbox */
169 /* Listbox */
163 width : 350px;
170 width : @widget-width;
164 margin-bottom : 0px;
171 margin-bottom : 0px;
165 }
172 }
166
173
167 .widget-numeric-text {
174 .widget-numeric-text {
168 /* Single Line Textbox - used for IntTextView and FloatTextView */
175 /* Single Line Textbox - used for IntTextView and FloatTextView */
169 width : 150px;
176 width : @widget-width-short;
170 margin : 0px;
177 margin : 0px;
171 }
178 }
172
179
173 .widget-progress {
180 .widget-progress {
174 /* Progress Bar */
181 /* Progress Bar */
175 margin-top: 6px;
182 margin-top: 6px;
176 width : 350px;
183 min-width : @widget-width;
177
184
178 .progress-bar {
185 .progress-bar {
179 /* Disable progress bar animation */
186 /* Disable progress bar animation */
@@ -187,7 +194,8 b''
187
194
188 .widget-combo-btn {
195 .widget-combo-btn {
189 /* ComboBox Main Button */
196 /* ComboBox Main Button */
190 min-width : 125px;
197 /* Subtract 25px to account for the drop arrow button */
198 min-width : @widget-width-short - 25px;
191 }
199 }
192
200
193 .widget_item .dropdown-menu li a {
201 .widget_item .dropdown-menu li a {
General Comments 0
You need to be logged in to leave comments. Login now