You are here

Home » API reference » Opigno dashboard 3.x

app.component.css in Opigno dashboard 3.x

Same filename and directory in other branches
  1. 8 ng/src/app/app.component.css
app-panel {
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background-color: #fff;
  box-shadow: 0 0 5px 5px #eee;
  padding: 2rem;
  overflow: auto;
}

.trigger-btn {
  text-align: right;
  margin-bottom: 1rem;
}

.dashboard-column-wrapper.panel-open {
  min-height: 500px;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
}

.dashboard-column-wrapper:not(.three-col-layout) .dashboard-column {
  flex: 1;
  padding: 0 6px;
}

@media screen and (max-width: 575px) {
  .dashboard-column-wrapper:not(.three-col-layout) .dashboard-column {
    flex: 1 0 100%;
  }
}

.dashboard-column-wrapper.panel-open .dashboard-column {
  margin: 0 6px;
}

.dashboard-column-wrapper .dashboard-column.wide-col {
  flex: 2;
}

.dashboard-column-wrapper.panel-open .dashboard-column.col-xl-3 {
  flex: 1.5;
}

.dashboard-column-wrapper.panel-open .dashboard-column.col-xl-4 {
  flex: 2;
}

.dashboard-column-wrapper.panel-open .dashboard-column.col-xl-5 {
  flex: 3;
}

.dashboard-column-wrapper.panel-open .dashboard-column {
  border: 1px dashed #2F3758;
  border-radius: 10px;
  padding: 20px 10px;
}

File

ng/src/app/app.component.css
View source 
  1. app-panel {

  2.   position: fixed;

  3.   z-index: 5;

  4.   top: 0;

  5.   right: 0;

  6.   bottom: 0;

  7.   width: 400px;

  8.   background-color: #fff;

  9.   box-shadow: 0 0 5px 5px #eee;

  10.   padding: 2rem;

  11.   overflow: auto;

  12. }

  13. 

  14. .trigger-btn {

  15.   text-align: right;

  16.   margin-bottom: 1rem;

  17. }

  18. 

  19. .dashboard-column-wrapper.panel-open {

  20.   min-height: 500px;

  21.   display: flex;

  22.   flex-flow: row wrap;

  23.   margin: 0;

  24. }

  25. 

  26. .dashboard-column-wrapper:not(.three-col-layout) .dashboard-column {

  27.   flex: 1;

  28.   padding: 0 6px;

  29. }

  30. 

  31. @media screen and (max-width: 575px) {

  32.   .dashboard-column-wrapper:not(.three-col-layout) .dashboard-column {

  33.     flex: 1 0 100%;

  34.   }

  35. }

  36. 

  37. .dashboard-column-wrapper.panel-open .dashboard-column {

  38.   margin: 0 6px;

  39. }

  40. 

  41. .dashboard-column-wrapper .dashboard-column.wide-col {

  42.   flex: 2;

  43. }

  44. 

  45. .dashboard-column-wrapper.panel-open .dashboard-column.col-xl-3 {

  46.   flex: 1.5;

  47. }

  48. 

  49. .dashboard-column-wrapper.panel-open .dashboard-column.col-xl-4 {

  50.   flex: 2;

  51. }

  52. 

  53. .dashboard-column-wrapper.panel-open .dashboard-column.col-xl-5 {

  54.   flex: 3;

  55. }

  56. 

  57. .dashboard-column-wrapper.panel-open .dashboard-column {

  58.   border: 1px dashed #2F3758;

  59.   border-radius: 10px;

  60.   padding: 20px 10px;

  61. }