mirror of
https://github.com/apache/superset.git
synced 2026-05-07 17:04:58 +00:00
Carapal react mockup
This is really just a mock up written in React to try different components. It could become scaffolding to build a prototype, or not.
This commit is contained in:
Maxime Beauchemin
249
caravel/assets/javascripts/SqlLab/main.css
Normal file
249
caravel/assets/javascripts/SqlLab/main.css
Normal file
@@ -0,0 +1,249 @@
|
||||
#app {
|
||||
position: absolute;
|
||||
top: 65;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.inlineBlock {
|
||||
display: inline-block;
|
||||
}
|
||||
.valignTop {
|
||||
vertical-align: top;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.nopadding {
|
||||
padding: 0px;
|
||||
}
|
||||
.panel.nopadding .panel-body {
|
||||
padding: 0px;
|
||||
}
|
||||
.panel {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.SqlEditor .panel-heading {
|
||||
padding: 5px;
|
||||
}
|
||||
.window.panel-heading {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.loading {
|
||||
width: 50px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.pane-cell {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.SqlEditor .header {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.Workspace .btn-sm {
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 2px;
|
||||
padding: 4px;
|
||||
}
|
||||
.Workspace hr {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
div.Workspace {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
.SqlEditor .clock {
|
||||
background-color: orange;
|
||||
padding: 5px;
|
||||
}
|
||||
.sql-toolbar {
|
||||
border-bottom: 1px solid #DDD;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
.padded {
|
||||
padding: 10px;
|
||||
}
|
||||
.nav-pills {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.p-t-10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.p-t-5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.m-r-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.m-r-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.m-b-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.m-t-5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.m-t-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.p-t-10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.sqllab-toolbar {
|
||||
padding-top: 5px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.no-shadow {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.pane-west {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.ws-el .ws-el-controls { display: none; }
|
||||
.ws-el:hover .ws-el-controls { display: block; }
|
||||
.ws-el {
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.Pane2 {
|
||||
width: 0;
|
||||
}
|
||||
.running {
|
||||
background-color: lime;
|
||||
color: black;
|
||||
}
|
||||
.success {
|
||||
background-color: green;
|
||||
}
|
||||
.failed {
|
||||
background-color: red;
|
||||
}
|
||||
.ws-el:hover { border: 1px solid #DDD; }
|
||||
|
||||
.handle {
|
||||
cursor: move;
|
||||
}
|
||||
.window {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
opacity: 0.85;
|
||||
border: 1px solid #AAA;
|
||||
max-height: 600px;
|
||||
box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.SqlLab pre {
|
||||
padding: 0px !important;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
font-size: 11px;
|
||||
line-height: 125%;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.Resizer {
|
||||
background: #000;
|
||||
opacity: .2;
|
||||
z-index: 1;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.Resizer:hover {
|
||||
-webkit-transition: all 2s ease;
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.Resizer.horizontal {
|
||||
height: 10px;
|
||||
margin: -5px 0;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0);
|
||||
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.Resizer.horizontal:hover {
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.vertical {
|
||||
width: 9px;
|
||||
margin: 0 -5px;
|
||||
border-left: 5px solid rgba(255, 255, 255, 0);
|
||||
border-right: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.Resizer.vertical:hover {
|
||||
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
Resizer.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
Resizer.disabled:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.Link {
|
||||
padding: 7px 3px;
|
||||
}
|
||||
|
||||
table .label {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.popover{
|
||||
max-width:400px;
|
||||
}
|
||||
.Select-menu-outer {
|
||||
z-index: 1000;
|
||||
}
|
||||
.table-label {
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
div.tablePopover {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
div.tablePopover:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.ResultSetControls {
|
||||
padding-bottom: 3px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
Reference in New Issue
Block a user