diff --git a/app/assets/sass/app.scss b/app/assets/sass/app.scss
index 8049dbe..da78824 100644
--- a/app/assets/sass/app.scss
+++ b/app/assets/sass/app.scss
@@ -45,6 +45,8 @@
@import 'modules-objects/togglable-tabs';
@import 'modules-objects/problems';
@import 'modules-objects/panes';
+@import 'modules-objects/filters';
+@import 'modules-objects/data-table';
//----------------------------------*\
// INTERFACE MODULES
diff --git a/app/assets/sass/global/_default.scss b/app/assets/sass/global/_default.scss
index 155f882..69d3312 100644
--- a/app/assets/sass/global/_default.scss
+++ b/app/assets/sass/global/_default.scss
@@ -219,6 +219,9 @@ tbody {
menu,
nav {
+ margin:0;
+ padding:0;
+
a {text-decoration:none;}
ol,
diff --git a/app/assets/sass/global/_helpers.scss b/app/assets/sass/global/_helpers.scss
index 066ea2a..ce67869 100644
--- a/app/assets/sass/global/_helpers.scss
+++ b/app/assets/sass/global/_helpers.scss
@@ -115,9 +115,10 @@ body:after {
.state--hidden {display:none;}
.state--visible {display:block;}
/* .state--current {} */
+/* .state--hasChild {} */
/* .state--open {} */
/* .state--close {} */
/* .state--error {} */
-/* .state--warning {} */
-/* .state--ok {} */
+/* .state--warning {} */
+/* .state--ok {} */
/* etc. */
diff --git a/app/assets/sass/global/_typography.scss b/app/assets/sass/global/_typography.scss
index bc252a5..34e87c6 100644
--- a/app/assets/sass/global/_typography.scss
+++ b/app/assets/sass/global/_typography.scss
@@ -7,6 +7,7 @@
// Tracking 300 PSD = Combien en letterspacing CSS ?
}
+
%typo-title {font:400 em(24, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-subtitle {font:700 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
diff --git a/app/assets/sass/modules-interface/_main.scss b/app/assets/sass/modules-interface/_main.scss
index 7c93208..7a035ca 100644
--- a/app/assets/sass/modules-interface/_main.scss
+++ b/app/assets/sass/modules-interface/_main.scss
@@ -35,7 +35,7 @@
}
&:first-child {text-align:left;}
-
+
&.state--error {color:$_color_error;}
&.state--warning {color:$_color_warning;}
&.state--ok {color:$_color_ok;}
@@ -74,7 +74,7 @@
td,
th {border-top:0;}
}
-
+
th {@extend %typo-header-table;}
}
}
@@ -95,4 +95,61 @@
}
}
-.main__content {}
+.main__content {
+ padding:$_space $_space_narrow;
+
+ @include large-xlarge-screen {
+ padding:$_space;
+ }
+
+ // Togglable tabs variations
+ .tablist {margin-bottom:$_space;}
+
+ .tabpanel__tab {
+ font-size:1em;
+
+ @include large-xlarge-screen {
+ font-size:em(24, $_base_font_size);
+ }
+ }
+}
+
+.main__content__header {
+
+ .main__content__title,
+ .main__content__alert {
+
+ @include large-xlarge-screen {
+ float:left;
+ margin-top:0;
+ }
+ }
+}
+
+.main__content__title {
+ margin-right:$_space_narrow;
+
+ @include large-xlarge-screen {
+ display:inline-block;
+ }
+
+ .color-scheme--dark & {
+ color:$_color_omega;
+ }
+
+ .color-scheme--light & {
+ color:$_color_alpha;
+ }
+}
+
+.main__content__alert {
+ @extend %typo-more-info;
+ background:$_color_ok;
+ color:$_color_omega;
+ display:inline-block;
+ padding:8px 11px;
+
+ &.state--error {background:$_color_error;}
+ &.state--warning {background:$_color_warning;}
+ &.state--ok {background:$_color_ok;}
+}
diff --git a/app/assets/sass/modules-objects/_data-table.scss b/app/assets/sass/modules-objects/_data-table.scss
new file mode 100644
index 0000000..c046e3a
--- /dev/null
+++ b/app/assets/sass/modules-objects/_data-table.scss
@@ -0,0 +1,165 @@
+//----------------------------------*\
+// DATA TABLE
+//----------------------------------*/
+
+.data-table {
+ width:100%;
+
+ input[type="checkbox"] {background:red;}
+
+ .color-scheme--dark & {
+ color:$_color_omega;
+ }
+
+ .color-scheme--light & {
+ color:$_color_alpha;
+ }
+
+ a {
+ display:inline-block;
+ text-decoration:none;
+
+ .color-scheme--dark & {
+ color:$_color_omega;
+ }
+
+ .color-scheme--light & {
+ color:$_color_alpha;
+ }
+ }
+
+ td, th {
+ border-style:solid;
+ border-width:0 0 1px;
+ padding-left:$_space_narrow;
+ padding-right:$_space_narrow;
+ vertical-align:top;
+
+ .color-scheme--dark & {
+ border-color:$_color_dark_beta;
+ }
+
+ .color-scheme--light & {
+ border-color:$_color_light_beta;
+ }
+ }
+
+ thead {
+ th {
+ border-style:solid;
+ border-width:0 0 0 1px;
+ padding-top:$_space_narrow;
+ vertical-align:middle;
+
+ .color-scheme--dark & {
+ background:$_color_dark_beta;
+ border-color:$_color_dark_gamma;
+
+ &.state--current {background:$_color_dark_alpha;}
+ }
+
+ .color-scheme--light & {
+ background:$_color_light_beta;
+ border-color:$_color_light_gamma;
+
+ &.state--current {background:$_color_light_alpha;}
+ }
+
+ &.data-table__host,
+ &.data-table__checkbox {border:0;}
+ }
+ }
+
+ .state--hasChild,
+ .state--isChild {
+
+ td, th {
+
+ .color-scheme--dark & {
+ background:$_color_dark_beta;
+ }
+
+ .color-scheme--light & {
+ background:$_color_light_beta;
+ }
+ }
+ }
+}
+
+.data-table__data {
+ margin:0;
+
+ .state--error &,
+ .state--warning &,
+ .state--ok & {
+ position:relative;
+
+ &:before {
+ top:0;
+ font-family:"adagios-fontawesome";
+ left:0;
+ position:absolute;
+ z-index:988888;
+ }
+ }
+
+ .state--error & {
+ @extend .ico-error;
+ padding-left:(16 + $_space_narrow);
+
+ &:before {
+ color:$_color_error;
+ font-size:em(13, $_base_font_size);
+ }
+ }
+
+ .state--warning & {
+ @extend .ico-warning;
+ padding-left:(16 + $_space_narrow);
+
+ &:before {
+ color:$_color_warning;
+ font-size:em(16, $_base_font_size);
+ }
+ }
+
+ .state--ok & {
+ @extend .ico-ok;
+ padding-left:(18 + $_space_narrow);
+
+ &:before {
+ color:$_color_ok;
+ font-size:em(20, $_base_font_size);
+ }
+ }
+}
+
+.data-table__checkbox {width:auto;}
+
+.data-table__host {width:percentage(367 / 1200);}
+
+.data-table__service__summary,
+.data-table__duration,
+.data-table__lastcheck {
+ @extend %typo-more-info--little;
+
+ .color-scheme--dark & {
+ color:$_color_dark_delta;
+ }
+
+ .color-scheme--light & {
+ color:$_color_light_delta;
+ }
+}
+
+.data-table__service {
+ width:percentage(501 / 1200);
+ //.data-table__service__name {}
+
+ .data-table__service__summary {
+ font-style:italic;
+ margin-left:0;
+ }
+}
+
+.data-table__duration {width:percentage(166 / 1200);}
\ No newline at end of file
diff --git a/app/assets/sass/modules-objects/_filters.scss b/app/assets/sass/modules-objects/_filters.scss
new file mode 100644
index 0000000..88f4e88
--- /dev/null
+++ b/app/assets/sass/modules-objects/_filters.scss
@@ -0,0 +1,128 @@
+//----------------------------------*\
+// FILTERS
+//----------------------------------*/
+.filters__list {
+ border-style:solid;
+ border-width:1px 0;
+ position:relative;
+
+ .color-scheme--dark & {
+ background:$_color_dark_gamma;
+ border-color:$_color_dark_beta;
+ }
+
+ .color-scheme--light & {
+ background:$_color_light_gamma;
+ border-color:$_color_light_beta;
+ }
+}
+
+.filters__item {
+ display:inline-block;
+ float:left;
+ position:relative;
+
+ &.filters__item--settings {float:right;}
+}
+
+.filters__sublist {
+ padding:$_space_narrow;
+
+ .filters__item,
+ .filters__subitem {display:block;}
+}
+
+
+.filters__button {
+ @extend %button-reset;
+ @extend %colorLink;
+ border-style:solid;
+ border-width:0 0 0 1px;
+ display:block;
+ min-height:56px;
+ padding:0 $_space_narrow;
+ position:relative;
+ width:auto;
+
+ .color-scheme--dark & {
+ border-color:$_color_dark_beta;
+ }
+
+ .color-scheme--light & {
+ border-color:$_color_light_beta;
+ }
+
+ .filters__item--more &,
+ .filters__item--settings & {border-right-width:1px;}
+
+ .filters__item--problems & {
+ min-width:180px;
+ text-align:left;
+
+ .ico-down-dir {float:right;}
+ }
+
+ .filters__item--more & {
+ min-width:87px;
+ text-align:left;
+ text-transform:lowercase;
+
+ .ico-down-dir {
+ float:right;
+ }
+ }
+
+ &[aria-expanded="true"],
+ &:hover {
+ .color-scheme--dark & {
+ background:$_color_dark_beta;
+ color:$_color_omega;
+ }
+
+ .color-scheme--light & {
+ background:$_color_light_beta;
+ color:$_color_alpha;
+ }
+ }
+}
+
+.filters__panel {
+ left:0;
+ min-width:100%;
+ position:absolute;
+ top:100%;
+ z-index:999999;
+
+ .color-scheme--dark & {
+ background:$_color_dark_beta;
+ }
+
+ .color-scheme--light & {
+ background:$_color_light_beta;
+ }
+
+ .filters__item--more & {
+ display:block;
+
+ @include large-xlarge-screen {
+ display:inline;
+ }
+ }
+
+ .filters__item--settings & {
+ left:auto;
+ right:0;
+ }
+}
+
+.filters__link {
+ &.state--current {
+ .color-scheme--dark & {
+ color:$_color_omega;
+ }
+
+ .color-scheme--light & {
+ color:$_color_alpha;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/assets/sass/modules-objects/_panes.scss b/app/assets/sass/modules-objects/_panes.scss
index a499b67..a9a37dd 100644
--- a/app/assets/sass/modules-objects/_panes.scss
+++ b/app/assets/sass/modules-objects/_panes.scss
@@ -1,3 +1,6 @@
+//----------------------------------*\
+// PANES
+//----------------------------------*/
.panes {
background:aquamarine;
display:table;
diff --git a/app/assets/sass/modules-objects/_togglable-tabs.scss b/app/assets/sass/modules-objects/_togglable-tabs.scss
index ec9d167..daa5bb0 100644
--- a/app/assets/sass/modules-objects/_togglable-tabs.scss
+++ b/app/assets/sass/modules-objects/_togglable-tabs.scss
@@ -1,9 +1,7 @@
//----------------------------------*\
// TOGGLABLE TABS
//----------------------------------*/
-.tablist__list {
- display:block;
-}
+.tablist {}
.tablist__item {
display:block;
@@ -12,22 +10,25 @@
}
.tabpanel__tab {
- border:solid white;
+ border-style:solid;
border-width:0 0 1px;
- display:block;
+ display:block;
line-height:1;
- margin:0 4px;
+ margin:0 0 0 ($_space / 3);
padding:0 $_space .5em 0;
position:relative;
+ text-decoration:none;
+
+ @include large-xlarge-screen {
+ margin:0 0 0 $_space;
+ }
&[aria-expanded="true"] {
border-width:0 0 3px;
color:$_color_omega;
}
- :first-child > & {
- margin-left:0;
- }
+ :first-child > & {margin:0;}
&:after {
bottom:em($_base_font_size);
diff --git a/app/components/sidebar/sidebar.html b/app/components/sidebar/sidebar.html
index eeadb5a..57a3779 100644
--- a/app/components/sidebar/sidebar.html
+++ b/app/components/sidebar/sidebar.html
@@ -1,7 +1,7 @@