iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Timing and radii (#8988) 

* parameterizing dot for easy resizing.

* first pass

* all timing normalized

* seeing no need to 'reset' this transition

* getting most border radii, a little light linting.

* parameterizing dot dimensions
This commit is contained in:
Evan Rusackas 2020-01-22 17:55:57 -08:00 committed by Maxime Beauchemin
parent bf08ff591c
commit 22699a204d
17 changed files with 58 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset/assets/src/CRUD/crud.less
View File

@ -42,7 +42,7 @@
}
.frame {
border: 1px solid @gray-heading;
border-radius: 5;
border-radius: @border-radius-large;
padding: 10;
background: @gray-bg;
}

10
superset/assets/src/SqlLab/main.less
View File

@ -147,9 +147,11 @@ div.Workspace {
overflow: auto;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
@circle-diameter: 10px;
border-radius: (@circle-diameter / 2);
width: @circle-diameter;
height: @circle-diameter;
display: inline-block;
background-color: @gray-light;
line-height: 8px; // set specifically for closing 'x'
@ -255,7 +257,7 @@ div.Workspace {
.schemaPane {
flex: 0 0 300px;
max-width: 300px;
transition: transform 0.3s ease-in-out;
transition: transform @timing-normal ease-in-out;
}
.queryPane {

2
superset/assets/src/components/FilterBadgeIcon.less
View File

@ -22,7 +22,7 @@
width: 20px;
height: 20px;
background-color: @gray-light;
border-radius: 2px;
border-radius: @border-radius-normal;
z-index: 10;
path {
fill: @lightest;

4
superset/assets/src/dashboard/stylesheets/builder-sidepane.less
View File

@ -16,6 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
@import '../../../stylesheets/less/variables.less';
.dashboard-builder-sidepane {
flex: 0 0 @builder-pane-width;
z-index: 10;
@ -59,7 +61,7 @@
width: @builder-pane-width * 2;
height: 100vh;
display: flex;
transition: all 0.5s ease;
transition: all @timing-normal ease;
&.slide-in {
left: -@builder-pane-width;

15
superset/assets/src/dashboard/stylesheets/components/chart.less
View File

@ -41,14 +41,14 @@
}
&.fade-in {
border-radius: 4px;
border-radius: @border-radius-large;
box-shadow: inset 0 0 0 2px @shadow-highlight,
0 0 0 3px fade(@shadow-highlight, @opacity-light);
transition: box-shadow 1s ease-in-out;
}
&.fade-out {
border-radius: 4px;
border-radius: @border-radius-large;
box-shadow: none;
transition: box-shadow 1s ease-in-out;
}
@ -123,11 +123,14 @@
}
.dot {
height: 4px;
width: 4px;
@dot-diameter: 4px;
height: @dot-diameter;
width: @dot-diameter;
border-radius: @dot-diameter / 2;
margin: @dot-diameter / 2 0;
background-color: @gray;
border-radius: 50%;
margin: 2px 0;
display: inline-block;
.vertical-dots-container & {

4
superset/assets/src/dashboard/stylesheets/dashboard.less
View File

@ -113,11 +113,11 @@ body {
flex-direction: row;
flex-wrap: nowrap;
& > :nth-child(3) {
border-radius: 2px 0px 0px 2px;
border-radius: @border-radius-normal 0px 0px @border-radius-normal;
border-right: none;
}
& > :nth-child(4) {
border-radius: 0px 2px 2px 0px;
border-radius: 0px @border-radius-normal @border-radius-normal 0px;
}
& > :not(:nth-child(3)):not(:last-child) {
margin-right: 8px;

2
superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less
View File

@ -30,7 +30,7 @@
> .tooltip-inner {
width: 200px;
max-width: 200px;
border-radius: 4px;
border-radius: @border-radius-large;
margin-right: 8px;
padding: 16px 12px;
background-color: @gray-dark;

7
superset/assets/src/dashboard/stylesheets/filter-indicator.less
View File

@ -16,6 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
@import '../../../stylesheets/less/variables.less';
.dashboard-filter-indicators-container {
position: absolute;
right: -20px;
@ -35,7 +38,7 @@
overflow: hidden;
display: flex;
background-color: @gray-light;
transition: width 0.3s;
transition: width @timing-normal;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
@ -44,7 +47,7 @@
height: 20px;
position: absolute;
right: 100%;
transition: width 0.3s;
transition: width @timing-normal;
}
.filter-badge {

6
superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
View File

@ -130,7 +130,7 @@
&.is-selected {
border: 1px solid @gray-heading;
border-radius: 4px;
border-radius: @border-radius-large;
background-color: @gray-bg;
margin-left: -25px;
}
@ -184,7 +184,7 @@
top: 50%;
width: 18px;
height: 18px;
border-radius: 2px;
border-radius: @border-radius-normal;
margin-top: -9px;
box-shadow: inset 0 0 0 2px @gray-light;
background: #f2f2f2;
@ -257,7 +257,7 @@
position: absolute;
right: 16px;
top: 16px;
border-radius: 4px;
border-radius: @border-radius-large;
border: 1px solid @gray-light;
padding: 4px 8px 4px 8px;
font-size: @font-size-m;

2
superset/assets/src/explore/components/controls/DatasourceControl.less
View File

@ -19,7 +19,7 @@
@import '../../../../stylesheets/less/variables.less';
#datasource_menu {
border-radius: 2px;
border-radius: @border-radius-normal;
padding-left: 8px;
padding-right: 8px;
}

4
superset/assets/src/explore/components/controls/VizTypeControl.less
View File

@ -45,8 +45,8 @@
.viztype-selector-container img {
border: 1px solid @gray-light;
border-radius: 4px;
transition: border-color 0.2s;
border-radius: @border-radius-large;
transition: border-color @timing-normal;
}
.viztype-control-search-box {

2
superset/assets/src/messageToasts/stylesheets/toast.less
View File

@ -36,7 +36,7 @@
box-shadow: 0 2px 4px 0 fade(@darkest, @opacity-medium-light);
will-change: transform, opacity;
transform: translateY(-100%);
transition: transform 0.3s, opacity 0.3s;
transition: transform @timing-normal, opacity @timing-normal;
}
.toast > button {

4
superset/assets/stylesheets/less/cosmo/bootswatch.less
View File

@ -228,7 +228,7 @@ table,
.nav-pills {
& > li > a {
border-radius: 2px;
border-radius: @border-radius-normal;
}
}
@ -273,7 +273,7 @@ table,
}
.label {
border-radius: 2px;
border-radius: @border-radius-normal;
}
label {
font-weight: @font-weight-normal;

2
superset/assets/stylesheets/less/cosmo/variables.less
View File

@ -106,7 +106,7 @@
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 2px;
@border-radius-base: @border-radius-normal;
@border-radius-large: 2px;
@border-radius-small: 2px;

13
superset/assets/stylesheets/less/variables.less
View File

@ -146,6 +146,19 @@
@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
@font-family-base: @font-family-sans-serif;
/************************************************************************/
/* TRANSITIONS */
/* Timing and easings presets used in CSS transitions */
/************************************************************************/
@timing-normal: 0.3s;
/************************************************************************/
/* BORDER RADII */
/* Standard border-radius settings */
/************************************************************************/
@border-radius-normal: 2px;
@border-radius-large: (@border-radius-normal * 2);
/************************************************************************/
/* BOOTSTRAP/BOOTSWATCH/COSMO */
/* These are the legacy Cosmo theme overrides to Bootswatch's */

2
superset/assets/stylesheets/reactable-pagination.less
View File

@ -30,7 +30,7 @@
.reactable-next-page,
.reactable-previous-page {
background: @lightest;
border-radius: 2px;
border-radius: @border-radius-normal;
border: 1px solid @gray-light;
color: @gray-dark;
display: inline-block;

25
superset/assets/stylesheets/superset.less
View File

@ -63,7 +63,7 @@ input.form-control {
margin: 5px 0;
border: 1px solid @gray-light;
background-color: @gray-bg;
border-radius: 5px;
border-radius: @border-radius-large;
font-size: @font-size-s;
}
@ -116,7 +116,7 @@ hr {
span.title-block {
background-color: @gray-bg;
border-radius: 4px;
border-radius: @border-radius-large;
padding: 6px 12px;
margin: 0px 10px;
font-size: @font-size-xl;
@ -124,12 +124,6 @@ span.title-block {
.nvtooltip {
z-index: 888;
transition: opacity 0ms linear;
-moz-transition: opacity 0ms linear;
-webkit-transition: opacity 0ms linear;
transition-delay: 0ms;
-moz-transition-delay: 0ms;
-webkit-transition-delay: 0ms;
}
.nvtooltip table td {
font-size: @font-size-s !important;
@ -165,7 +159,7 @@ img.viz-thumb-option {
width: 100px;
border: 1px solid @gray;
margin-right: 5px;
border-radius: 5px;
border-radius: @border-radius-large;
}
.select2-drop.bigdrop .select2-results {
max-height: 700px;
@ -226,12 +220,12 @@ table.table-no-hover tr:hover {
box-shadow: none;
cursor: initial;
border: 1px solid @gray;
border-radius: 2px;
border-radius: @border-radius-normal;
}
.editable-title input[type='text'] {
border: 1px solid @gray;
border-radius: 2px;
border-radius: @border-radius-normal;
padding: 2px;
}
@ -439,13 +433,6 @@ table.table-no-hover tr:hover {
padding-bottom: 15px;
}
// .list-container .filters-container table tr:first-child td {
// border-top: none;
// }
// .list-container .filters-container table tr:last-child td {
// border-bottom: 1px solid @gray-light;
// }
.list-add-action .btn.btn-sm {
padding: 5px 6px;
font-size: @font-size-xs;
@ -550,7 +537,7 @@ tr.reactable-column-header th.reactable-header-sortable {
}
.metric-edit-popover-label-input {
border-radius: 4px;
border-radius: @border-radius-large;
height: 30px;
padding-left: 10px;
}