diff --git a/public/less/base/type.less b/public/less/base/type.less index cefc051c091..b0cbecb4f6c 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -240,3 +240,17 @@ a.external-link { color: @blue; text-decoration: underline; } + + +.link { + color: @linkColor; + cursor: pointer; +} + +.link:hover { + color: @linkColorHover; +} + +.pointer { + cursor: pointer; +} diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 5001c873541..4a3559318ed 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -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"; diff --git a/public/less/bootstrap/tables.less b/public/less/bootstrap/tables.less deleted file mode 100644 index 0e35271e11f..00000000000 --- a/public/less/bootstrap/tables.less +++ /dev/null @@ -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%); - } -} diff --git a/public/less/bootstrap/type.less b/public/less/bootstrap/type.less deleted file mode 100644 index 8b137891791..00000000000 --- a/public/less/bootstrap/type.less +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 4cece97d3f9..ea9bc4901e1 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -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; diff --git a/public/less/components/panel.less b/public/less/components/dashboard.less similarity index 72% rename from public/less/components/panel.less rename to public/less/components/dashboard.less index 19bf93ed49a..09b8d40e32c 100644 --- a/public/less/components/panel.less +++ b/public/less/components/dashboard.less @@ -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; diff --git a/public/less/bootstrap/popovers.less b/public/less/components/popovers.less similarity index 91% rename from public/less/bootstrap/popovers.less rename to public/less/components/popovers.less index aae35c8cd56..0d4516b080c 100644 --- a/public/less/bootstrap/popovers.less +++ b/public/less/components/popovers.less @@ -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; diff --git a/public/less/grafana.less b/public/less/grafana.less index b57b3eaa1c4..eb6cacae6dc 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -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"; diff --git a/public/less/overrides.less b/public/less/overrides.less index 2f2aedb373b..d20340c4c98 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -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%; diff --git a/public/less/utils/angular.less b/public/less/utils/angular.less new file mode 100644 index 00000000000..1519b249920 --- /dev/null +++ b/public/less/utils/angular.less @@ -0,0 +1,7 @@ + + +[ng\:cloak], [ng-cloak], .ng-cloak { + display: none !important; +} + +