public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(less): less cleanup of unused styles, restructuring and consolidating, part 2

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-14 21:00:25 +01:00
parent 50c79df70f
commit 9e0ed7bc8e
10 changed files with 94 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/less/base/type.less
+14
View File
@@ -240,3 +240,17 @@ a.external-link {
color: @blue;
text-decoration: underline;
}
.link {
color: @linkColor;
cursor: pointer;
}
.link:hover {
color: @linkColorHover;
}
.pointer {
cursor: pointer;
}
public/less/bootstrap/bootstrap.less
Vendored
-3
View File
@@ -18,9 +18,7 @@
@import "grid.less";
// Base CSS
@import "type.less";
@import "forms.less";
@import "tables.less";
// Components: common
@import "dropdowns.less";
@@ -38,7 +36,6 @@
// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
// Components: Misc
@import "labels-badges.less";
public/less/bootstrap/tables.less
-244
View File
@@ -1,244 +0,0 @@
//
// Tables
// --------------------------------------------------
// BASE TABLES
// -----------------
table {
max-width: 100%;
background-color: @tableBackground;
border-collapse: collapse;
border-spacing: 0;
}
// BASELINE STYLES
// ---------------
.table {
width: 100%;
margin-bottom: @baseLineHeight;
// Cells
th,
td {
padding: 8px;
line-height: @baseLineHeight;
text-align: left;
vertical-align: top;
border-top: 1px solid @tableBorder;
}
th {
font-weight: bold;
}
// Bottom align for column headings
thead th {
vertical-align: bottom;
}
// Remove top border from thead by default
caption + thead tr:first-child th,
caption + thead tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
border-top: 0;
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid @tableBorder;
}
// Nesting
.table {
background-color: @bodyBackground;
}
}
// CONDENSED TABLE W/ HALF PADDING
// -------------------------------
.table-condensed {
th,
td {
padding: 4px 5px;
}
}
// BORDERED VERSION
// ----------------
.table-bordered {
border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; // IE7 can't round corners anyway
border-left: 0;
.border-radius(@baseBorderRadius);
th,
td {
border-left: 1px solid @tableBorder;
}
// Prevent a double border
caption + thead tr:first-child th,
caption + tbody tr:first-child th,
caption + tbody tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + tbody tr:first-child th,
colgroup + tbody tr:first-child td,
thead:first-child tr:first-child th,
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top: 0;
}
// For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child,
tbody:first-child tr:first-child > th:first-child {
.border-top-left-radius(@baseBorderRadius);
}
// For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child,
tbody:first-child tr:first-child > td:last-child,
tbody:first-child tr:first-child > th:last-child {
.border-top-right-radius(@baseBorderRadius);
}
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child,
tbody:last-child tr:last-child > th:first-child,
tfoot:last-child tr:last-child > td:first-child,
tfoot:last-child tr:last-child > th:first-child {
.border-bottom-left-radius(@baseBorderRadius);
}
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child,
tbody:last-child tr:last-child > th:last-child,
tfoot:last-child tr:last-child > td:last-child,
tfoot:last-child tr:last-child > th:last-child {
.border-bottom-right-radius(@baseBorderRadius);
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
tfoot + tbody:last-child tr:last-child td:first-child {
.border-bottom-left-radius(0);
}
tfoot + tbody:last-child tr:last-child td:last-child {
.border-bottom-right-radius(0);
}
// Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child,
caption + tbody tr:first-child td:first-child,
colgroup + thead tr:first-child th:first-child,
colgroup + tbody tr:first-child td:first-child {
.border-top-left-radius(@baseBorderRadius);
}
caption + thead tr:first-child th:last-child,
caption + tbody tr:first-child td:last-child,
colgroup + thead tr:first-child th:last-child,
colgroup + tbody tr:first-child td:last-child {
.border-top-right-radius(@baseBorderRadius);
}
}
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody {
> tr:nth-child(odd) > td,
> tr:nth-child(odd) > th {
background-color: @tableBackgroundAccent;
}
}
}
// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody {
tr:hover > td,
tr:hover > th {
background-color: @tableBackgroundHover;
}
}
}
// TABLE CELL SIZING
// -----------------
// Reset default grid behavior
table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
display: table-cell;
float: none; // undo default grid column styles
margin-left: 0; // undo default grid column styles
}
// Change the column widths to account for td/th padding
.table td,
.table th {
&.span1 { .tableColumns(1); }
&.span2 { .tableColumns(2); }
&.span3 { .tableColumns(3); }
&.span4 { .tableColumns(4); }
&.span5 { .tableColumns(5); }
&.span6 { .tableColumns(6); }
&.span7 { .tableColumns(7); }
&.span8 { .tableColumns(8); }
&.span9 { .tableColumns(9); }
&.span10 { .tableColumns(10); }
&.span11 { .tableColumns(11); }
&.span12 { .tableColumns(12); }
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
.table tbody tr {
&.success > td {
background-color: @successBackground;
}
&.error > td {
background-color: @errorBackground;
}
&.warning > td {
background-color: @warningBackground;
}
&.info > td {
background-color: @infoBackground;
}
}
// Hover states for .table-hover
.table-hover tbody tr {
&.success:hover > td {
background-color: darken(@successBackground, 5%);
}
&.error:hover > td {
background-color: darken(@errorBackground, 5%);
}
&.warning:hover > td {
background-color: darken(@warningBackground, 5%);
}
&.info:hover > td {
background-color: darken(@infoBackground, 5%);
}
}
public/less/bootstrap/type.less
-1
View File
@@ -1 +0,0 @@
public/less/bootswatch.dark.less
-17
View File
@@ -5,14 +5,6 @@
// TYPOGRAPHY
// -----------------------------------------------------
html {
height: 100%;
}
body {
height: 100%;
background: @bodyBackground;
}
hr {
border-bottom: none;
@@ -253,15 +245,6 @@ a:hover {
.box-shadow(none);
}
.popover {
.border-radius(0);
&-title {
border-bottom: none;
color: @white;
}
}
.footer {
border-top: 1px solid @grayDark;
public/less/components/panel.less → public/less/components/dashboard.less
+68 -20
View File
@@ -1,3 +1,71 @@
.grafana-row {
margin-bottom: 5px;
}
.row-tab {
.dropdown-menu-right {
top: 0;
left: 33px;
}
}
.row-tab-button {
padding: 0px;
cursor: pointer;
vertical-align: middle;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
line-height: 30px;
background: @btnSuccessBackground;
color: rgba(255,255,255,.90);
}
.row-button {
width: 30px;
float: left;
cursor: pointer;
line-height: 31px;
background-color: @blueDark;
}
.row-text {
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
text-align: center;
line-height: 31px;
height: 31px;
}
.row-close {
padding: 0px;
margin: 0px;
background: @grafanaPanelBackground;
text-align: center;
}
.row-close-buttons {
position: absolute;
left: 0;
}
.row-open {
margin-top: 5px;
left: -28px;
position: absolute;
z-index: 100;
transition: .10s left;
transition-delay: .10s;
&:hover {
left: -12px;
}
}
.panel {
display: inline-block;
float: left;
@@ -144,26 +212,6 @@
}
}
.panel-ghost{
width: 100%;
.panel-container {
border: none;
background: transparent;
}
.panel-ghost-list {
margin: 10px 0 10px 20px;
}
button {
text-align: left;
min-width: 135px;
.fa {
position: relative;
left: -5px;
}
}
}
.panel-time-info {
font-weight: bold;
float: right;
public/less/bootstrap/popovers.less → public/less/components/popovers.less
+2 -7
View File
@@ -9,16 +9,13 @@
left: 0;
z-index: @zindexPopover;
display: none;
max-width: 276px;
max-width: 480px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
@@ -38,8 +35,6 @@
font-weight: normal;
line-height: 18px;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0);
&:empty {
display: none;
public/less/grafana.less
+3 -1
View File
@@ -8,6 +8,7 @@
// UTILS
@import "./utils/validation.less";
@import "./utils/angular.less";
// LAYOUTS
@import "./layout/page.less";
@@ -21,7 +22,7 @@
@import "./components/tagsinput.less";
@import "./components/tables_lists.less";
@import "./components/search.less";
@import "./components/panel.less";
@import "./components/dashboard.less";
@import "./components/tightform.less";
@import "./components/gf-form.less";
@import "./components/sidemenu.less";
@@ -36,6 +37,7 @@
@import "./components/scrollbar.less";
@import "./components/old_stuff.less";
@import "./components/navbar.less";
@import "./components/popovers.less";
// PAGES
@import "./pages/login.less";
public/less/overrides.less
-105
View File
@@ -1,112 +1,7 @@
// Backgrounds
// ---------------------
.grafana-row {
margin-bottom: 5px;
}
.row-tab {
.dropdown-menu-right {
top: 0;
left: 33px;
}
}
.row-tab-button {
padding: 0px;
cursor: pointer;
vertical-align: middle;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
line-height: 30px;
background: @btnSuccessBackground;
color: rgba(255,255,255,.90);
}
.row-button {
width: 30px;
float: left;
cursor: pointer;
line-height: 31px;
background-color: @blueDark;
}
.row-text {
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
text-align: center;
line-height: 31px;
height: 31px;
}
.row-close {
padding: 0px;
margin: 0px;
background: @grafanaPanelBackground;
text-align: center;
}
.row-close-buttons {
position: absolute;
left: 0;
}
.row-open {
margin-top: 5px;
left:-28px;
position: absolute;
z-index: 100;
transition: .10s left;
transition-delay: .10s;
-webkit-transition-delay: .10s;
}
.row-open:hover {
left:-12px;
}
.odd {
background-color: @tableBackgroundAccent;
}
.nomargin {
margin: 0px;
}
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
.table tbody + tbody {
border-top: 0px;
}
.ui-draggable-dragging {
display: block;
z-index: 9999;
}
.link {
color: @linkColor;
cursor: pointer;
}
.link:hover {
color: @linkColorHover;
}
.pointer {
cursor: pointer;
}
.popover {
max-width: 480px;
}
.tiny {
font-size: 50%;
public/less/utils/angular.less
+7
View File
@@ -0,0 +1,7 @@
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}