Merge pull request #49 from valessiobrito/master

Fix InfoPanel contrast and compacted items
kytos · Oct 2, 2018 · ea22568 · ea22568
2 parents 3617493 + 32dfccb
commit ea22568
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 71 deletions.
diff --git a/src/components/kytos/accordion/AccordionItem.vue b/src/components/kytos/accordion/AccordionItem.vue
@@ -113,57 +113,58 @@ export default {
       content: "▴"
 
 .compacted
- .tab
-   display: inline-flex
-   width: auto
-   float: left
-
- .k-accordion-input
-   display: none
- .k-accordion-label
-   display: none
-
- .k-accordion-input
-   & ~ .tab-content
+ .k-toolbar
+  .tab
     display: inline-flex
-    margin-top: 0px
-    height: 35px
-    max-height: 100%
-    overflow: hidden
-
-   &[type=checkbox]
-     & + .k-accordion-label:after
-       content: ""
-
-   &[type=checkbox]:checked
-     & + .k-accordion-label:after
-       content: ""
-
- .tab
-  .tab-content
-   min-width: 230px
-   margin-left: 15px
-   border: none
-   &:before
-     content: ';;;;;;;'
-     font: 8px monospace
-     line-height: 5px
-     color: $fill-bar
-     filter: invert(50%)
-     opacity: 0.2
-     -webkit-transform: rotate(90deg)
-     -moz-transform: rotate(90deg)
-     -ms-transform: rotate(90deg)
-     transform: rotate(90deg)
-     border-bottom: 1px solid $fill-bar
-     pointer-events: none
-     width: 35px
-     height: 10px
-     position: absolute
-     left: -10px
-     top: 15px
-
-  .k-button-wrapper
-   min-width: 120px
+    width: auto
+    float: left
+ 
+  .k-accordion-input
+    display: none
+  .k-accordion-label
+    display: none
+ 
+  .k-accordion-input
+    & ~ .tab-content
+     display: inline-flex
+     margin-top: 0px
+     height: 35px
+     max-height: 100%
+     overflow: hidden
+ 
+    &[type=checkbox]
+      & + .k-accordion-label:after
+        content: ""
+ 
+    &[type=checkbox]:checked
+      & + .k-accordion-label:after
+        content: ""
+ 
+  .tab
+   .tab-content
+    min-width: 230px
+    margin-left: 15px
+    border: none
+    &:before
+      content: ';;;;;;;'
+      font: 8px monospace
+      line-height: 5px
+      color: $fill-bar
+      filter: invert(50%)
+      opacity: 0.2
+      -webkit-transform: rotate(90deg)
+      -moz-transform: rotate(90deg)
+      -ms-transform: rotate(90deg)
+      transform: rotate(90deg)
+      border-bottom: 1px solid $fill-bar
+      pointer-events: none
+      width: 35px
+      height: 10px
+      position: absolute
+      left: -10px
+      top: 15px
+ 
+   .k-button-wrapper
+    min-width: 120px
 
 </style>
diff --git a/src/components/kytos/chart/Timeseries.vue b/src/components/kytos/chart/Timeseries.vue
@@ -323,7 +323,7 @@ export default {
 .chart-timeseries
   width: 100%;
   float: left;
-  background-color: $fill-button-bg-h;
+  background-color: $fill-bar;
 
   text
     fill: grey;

diff --git a/src/components/kytos/misc/InfoPanel.vue b/src/components/kytos/misc/InfoPanel.vue
@@ -127,23 +127,23 @@ export default {
  position: fixed
  right: 0
  top: 0
- background-color: #222
+ background-color: $fill-panel
  width: 420px
  z-index: 999
  box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.4)
 
 .k-info-wrapper
- -webkit-flex: 1 1 auto;
- overflow-y: auto;
- height: 0px;
+ -webkit-flex: 1 1 auto
+ overflow-y: auto
+ height: 0px
 
 .k-info-title
  display: flex
  flex-direction: row
  align-items: center
 
  svg
-  fill: $fill-icon-h
+  fill: $fill-icon
   width: 50px
   height: 50px
   padding: 10px
@@ -152,11 +152,12 @@ export default {
  .panel-title
   padding: 0
   margin: 0
+  color: $fill-text
 
   & > h1
     font-size: 1.2em
     font-weight: bold
-    color: $fill-text-h
+    color: $fill-text
 
   small
     font-size: 0.7em

diff --git a/src/components/kytos/ppanel/PropertyPanelItem.vue b/src/components/kytos/ppanel/PropertyPanelItem.vue
@@ -52,29 +52,29 @@ export default {
   th
    display: table-cell
    font-size: 0.8em
-   border-right: 1px solid $fill-button-bg-h
-   border-bottom: 1px solid $fill-button-bg-h
+   border-right: 1px solid $fill-input-content
+   border-bottom: 1px solid $fill-input-content
    color: $fill-text
    text-align: right
    padding: 0.5em
    min-width: 50%
 
   td
    display: table-cell
-   color: $fill-text-h
+   color: $fill-text
    text-align: left
-   border-bottom: 1px solid $fill-button-bg-h
+   border-bottom: 1px solid $fill-input-content
    font-size: 0.8em
    padding: 0.5em
 
   &:nth-child(odd)
-   background-color: $fill-button-bg
+   background-color: $fill-menubar
 
   &:nth-child(even)
-   background-color: $fill-button-bg
+   background-color: $fill-panel
 
   &:hover *
-   color: $fill-shortkey
-   background-color: $fill-button-bg-h
+   color: $fill-text-h
+   background-color: $fill-bar
 
 </style>
diff --git a/src/components/kytos/switch/Flow.vue b/src/components/kytos/switch/Flow.vue
@@ -148,11 +148,11 @@ export default {
   margin-bottom: 5px
   width: 100%
   font-size: 0.8em
-  background: $fill-button-bg
+  color: $fill-text
+  background: $fill-input-bg
 
   &:hover
-   color: $fill-link-h
-   background: $fill-button-bg-h
+   color: $fill-text-h
 
   span
    font-weight: bold
@@ -180,6 +180,7 @@ export default {
     flex-direction: column
     position: relative
     display: table
+    background: $fill-menubar
 
     .match-l2, .match-l3
      display: flex

diff --git a/src/components/kytos/switch/Interface.vue b/src/components/kytos/switch/Interface.vue
@@ -131,11 +131,12 @@ export default {
   cursor: pointer
   padding-top: 0.3em
   width: 100%
-  background-color: $fill-button-bg
+  color: $fill-text
+  background-color: $fill-panel
 
   &:hover *
    color: $fill-link-h
-   background: $fill-button-bg-h
+   background: $fill-bar
 
   .usage
     min-width: 4px
@@ -160,6 +161,7 @@ export default {
       height: 10px
       padding: 5px 5px 5px
       flex: 0 0 auto
+      word-break: break-all
       text-align: center
 
     .x_bytes