You are here

Home » API reference » Opigno dashboard 8

app.component.css in Opigno dashboard 8

Same filename and directory in other branches
  1. 3.x 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 {
  min-height: 500px;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
}

.dashboard-column-wrapper.panel-open {
  margin-right: calc(400px);
}

.dashboard-column-wrapper .dashboard-column {
  flex: 1;
  padding: 0 10px;
}

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

.dashboard-column-wrapper .dashboard-column:first-child {
  padding-left: 0;
}

.dashboard-column-wrapper.panel-open .dashboard-column:first-child {
  margin-left: 0;
}

.dashboard-column-wrapper .dashboard-column:last-child {
  padding-right: 0;
}

.dashboard-column-wrapper.panel-open .dashboard-column:last-child {
  margin-right: 0;
}

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

.dashboard-column-wrapper.panel-open .dashboard-column {
  border: 2px dashed #ddd;
}

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 {

  20.   min-height: 500px;

  21.   display: flex;

  22.   flex-flow: row wrap;

  23.   margin: 0;

  24. }

  25. 

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

  27.   margin-right: calc(400px);

  28. }

  29. 

  30. .dashboard-column-wrapper .dashboard-column {

  31.   flex: 1;

  32.   padding: 0 10px;

  33. }

  34. 

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

  36.   margin: 0 6px;

  37. }

  38. 

  39. .dashboard-column-wrapper .dashboard-column:first-child {

  40.   padding-left: 0;

  41. }

  42. 

  43. .dashboard-column-wrapper.panel-open .dashboard-column:first-child {

  44.   margin-left: 0;

  45. }

  46. 

  47. .dashboard-column-wrapper .dashboard-column:last-child {

  48.   padding-right: 0;

  49. }

  50. 

  51. .dashboard-column-wrapper.panel-open .dashboard-column:last-child {

  52.   margin-right: 0;

  53. }

  54. 

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

  56.   flex: 2;

  57. }

  58. 

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

  60.   border: 2px dashed #ddd;

  61. }