You are here

Home » API reference » Drupal PM (Project Management) 8

pm-dashboard.css in Drupal PM (Project Management) 8

Same filename and directory in other branches
  1. 7.3 pm-dashboard.css
  2. 7 pm-dashboard.css
  3. 7.2 pm-dashboard.css
#pmdashboard {
  width: 100%;
}

#pmdashboard .pmcomponent {
  display: block;
  width: 90%;
  margin: 10px;
  overflow: hidden;
  background: #efefef;
  height: 50px;
  position: relative;
  padding: 0 0 0 0;
  font-size: 20px;
  line-height: 50px;
}

#pmdashboard .pmcomponent a {
  color: #222;
  text-decoration: none;
}

#pmdashboard .pmcomponent a:hover {
  color: #777;
  text-decoration: none;
}

#pmdashboard .pmcomponent i.fa {
  border: none;
  opacity: 0.5;
  color: black;
  height: 100%;
  height: 50px;
  width: 50px;
  padding: 0px 5px;
}

#pmdashboard .pmcomponent a i.fa.fa-plus {
  border: none;
  opacity: 0.2;
  color: black;
  background: rgba(0,0,0,0.3);
  height: 100%;
  float: right;
  height: 50px;
  width: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#pmdashboard .pmcomponent a i.fa-plus:hover {
  opacity: 0.5;
}

/* Creates two columns, each 50% of page width */
div.pmdashboard {
  float: left;
  width: 50%;
}

#pmdashboard-block .pmcomponent {
  display: block;
  clear: both;
}

#pmdashboard-block {
  overflow: hidden;
}

#pmdashboard-block .pmdashboard-icon {
  display: inline;
  float: left;
}

#pmdashboard-block .pmdashboard-icon dt.pmcomponent {
  height: 32px;
  padding-top: 5px;
}

#header-region #pmdashboard-block * {
  display: inline-block;
}

.pm-use-storm-icons #pmdashboard .pmcomponent a i.fa.fa-plus {
  background: rgba(0,0,0,1) url(icons/application_add.png) no-repeat center center;
}

.pm-use-storm-icons #pmdashboard-block .pmcomponent i.fa {
  min-width: 16px;
  min-height: 16px;
  background-size: 100% auto;
}

.pm-use-storm-icons #pmdashboard .pmcomponent i.fa {
  min-width: 32px;
  min-height: 32px;
  opacity: 1;
}

.pm-use-storm-icons i.fa-institution {
  background-image: url(images/organizations.png);
}

.pm-use-storm-icons i.fa-cubes {
  background-image: url(images/projects.png);
}

.pm-use-storm-icons i.fa-cube {
  background-image: url(images/tasks.png);
}

.pm-use-storm-icons i.fa-money {
  background-image: url(images/expenses.png);
}
.pm-use-storm-icons i.fa-gear {
  background-image: url(images/configuration.png);
}

.pm-use-storm-icons i.fa-file-o {
  background-image: url(images/notes.png);
}

.pm-use-storm-icons i.fa-clock-o {
  background-image: url(images/timetrackings.png);
}

.pm-use-storm-icons .pmcomponent i.fa-tasks {
  background-image: url(images/tasks.png);
}

.pm-use-storm-icons .pmcomponent i.fa-ticket {
  background-image: url(images/tickets.png);
}

.pm-use-storm-icons .pmcomponent i.fa-users {
  background-image: url(images/teams.png);
}

File

pm-dashboard.css
View source 
  1. #pmdashboard {

  2.   width: 100%;

  3. }

  4. 

  5. #pmdashboard .pmcomponent {

  6.   display: block;

  7.   width: 90%;

  8.   margin: 10px;

  9.   overflow: hidden;

  10.   background: #efefef;

  11.   height: 50px;

  12.   position: relative;

  13.   padding: 0 0 0 0;

  14.   font-size: 20px;

  15.   line-height: 50px;

  16. }

  17. 

  18. #pmdashboard .pmcomponent a {

  19.   color: #222;

  20.   text-decoration: none;

  21. }

  22. 

  23. #pmdashboard .pmcomponent a:hover {

  24.   color: #777;

  25.   text-decoration: none;

  26. }

  27. 

  28. #pmdashboard .pmcomponent i.fa {

  29.   border: none;

  30.   opacity: 0.5;

  31.   color: black;

  32.   height: 100%;

  33.   height: 50px;

  34.   width: 50px;

  35.   padding: 0px 5px;

  36. }

  37. 

  38. #pmdashboard .pmcomponent a i.fa.fa-plus {

  39.   border: none;

  40.   opacity: 0.2;

  41.   color: black;

  42.   background: rgba(0,0,0,0.3);

  43.   height: 100%;

  44.   float: right;

  45.   height: 50px;

  46.   width: 50px;

  47.   line-height: 50px;

  48.   position: absolute;

  49.   top: 0;

  50.   right: 0;

  51. }

  52. 

  53. #pmdashboard .pmcomponent a i.fa-plus:hover {

  54.   opacity: 0.5;

  55. }

  56. 

  57. /* Creates two columns, each 50% of page width */

  58. div.pmdashboard {

  59.   float: left;

  60.   width: 50%;

  61. }

  62. 

  63. #pmdashboard-block .pmcomponent {

  64.   display: block;

  65.   clear: both;

  66. }

  67. 

  68. #pmdashboard-block {

  69.   overflow: hidden;

  70. }

  71. 

  72. #pmdashboard-block .pmdashboard-icon {

  73.   display: inline;

  74.   float: left;

  75. }

  76. 

  77. #pmdashboard-block .pmdashboard-icon dt.pmcomponent {

  78.   height: 32px;

  79.   padding-top: 5px;

  80. }

  81. 

  82. #header-region #pmdashboard-block * {

  83.   display: inline-block;

  84. }

  85. 

  86. .pm-use-storm-icons #pmdashboard .pmcomponent a i.fa.fa-plus {

  87.   background: rgba(0,0,0,1) url(icons/application_add.png) no-repeat center center;

  88. }

  89. 

  90. .pm-use-storm-icons #pmdashboard-block .pmcomponent i.fa {

  91.   min-width: 16px;

  92.   min-height: 16px;

  93.   background-size: 100% auto;

  94. }

  95. 

  96. .pm-use-storm-icons #pmdashboard .pmcomponent i.fa {

  97.   min-width: 32px;

  98.   min-height: 32px;

  99.   opacity: 1;

  100. }

  101. 

  102. .pm-use-storm-icons i.fa-institution {

  103.   background-image: url(images/organizations.png);

  104. }

  105. 

  106. .pm-use-storm-icons i.fa-cubes {

  107.   background-image: url(images/projects.png);

  108. }

  109. 

  110. .pm-use-storm-icons i.fa-cube {

  111.   background-image: url(images/tasks.png);

  112. }

  113. 

  114. .pm-use-storm-icons i.fa-money {

  115.   background-image: url(images/expenses.png);

  116. }

  117. .pm-use-storm-icons i.fa-gear {

  118.   background-image: url(images/configuration.png);

  119. }

  120. 

  121. .pm-use-storm-icons i.fa-file-o {

  122.   background-image: url(images/notes.png);

  123. }

  124. 

  125. .pm-use-storm-icons i.fa-clock-o {

  126.   background-image: url(images/timetrackings.png);

  127. }

  128. 

  129. .pm-use-storm-icons .pmcomponent i.fa-tasks {

  130.   background-image: url(images/tasks.png);

  131. }

  132. 

  133. .pm-use-storm-icons .pmcomponent i.fa-ticket {

  134.   background-image: url(images/tickets.png);

  135. }

  136. 

  137. .pm-use-storm-icons .pmcomponent i.fa-users {

  138.   background-image: url(images/teams.png);

  139. }