You are here

Home » API reference » Bootstrap Paragraphs 8.2

bp-statistics.css in Bootstrap Paragraphs 8.2

The CSS file for Bootstrap Paragraphs Statistics module.

Compiled from the less file of the same name.

File

modules/bp_statistics/css/bp-statistics.css
View source 
  1. /**

  2.  * @file

  3.  * The CSS file for Bootstrap Paragraphs Statistics module.

  4.  *

  5.  * Compiled from the less file of the same name.

  6.  */

  7. /* Removes Padding on Columns (Padding is on columns inside). */

  8. .paragraph.paragraph--type--bp-statistics > .paragraph__column {

  9.   padding-left: 0;

  10.   padding-right: 0;

  11. }

  12. .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__4col {

  13.   position: relative;

  14.   min-height: 1px;

  15.   padding-left: 15px;

  16.   padding-right: 15px;

  17. }

  18. @media (min-width: 768px) {

  19.   .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__4col {

  20.     float: left;

  21.     width: 25%;

  22.   }

  23. }

  24. .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__3col {

  25.   position: relative;

  26.   min-height: 1px;

  27.   padding-left: 15px;

  28.   padding-right: 15px;

  29. }

  30. @media (min-width: 768px) {

  31.   .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__3col {

  32.     float: left;

  33.     width: 33.33333333%;

  34.   }

  35. }

  36. .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__2col {

  37.   position: relative;

  38.   min-height: 1px;

  39.   padding-left: 15px;

  40.   padding-right: 15px;

  41. }

  42. @media (min-width: 768px) {

  43.   .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__2col {

  44.     float: left;

  45.     width: 50%;

  46.   }

  47. }

  48. .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__1col {

  49.   position: relative;

  50.   min-height: 1px;

  51.   padding-left: 15px;

  52.   padding-right: 15px;

  53. }

  54. @media (min-width: 768px) {

  55.   .paragraph.paragraph--type--bp-statistics .paragraph--type--bp-statistics__1col {

  56.     float: left;

  57.     width: 100%;

  58.   }

  59. }

  60. /* These allow us to change the width on a single paragraph in a Multicolumn. */

  61. .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--tiny > .paragraph__column {

  62.   position: relative;

  63.   min-height: 1px;

  64.   padding-left: 15px;

  65.   padding-right: 15px;

  66. }

  67. @media (min-width: 768px) {

  68.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--tiny > .paragraph__column {

  69.     float: left;

  70.     width: 33.33333333%;

  71.   }

  72. }

  73. @media (min-width: 768px) {

  74.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--tiny > .paragraph__column {

  75.     margin-left: 33.33333333%;

  76.   }

  77. }

  78. .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--narrow > .paragraph__column {

  79.   position: relative;

  80.   min-height: 1px;

  81.   padding-left: 15px;

  82.   padding-right: 15px;

  83. }

  84. @media (min-width: 768px) {

  85.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--narrow > .paragraph__column {

  86.     float: left;

  87.     width: 50%;

  88.   }

  89. }

  90. @media (min-width: 768px) {

  91.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--narrow > .paragraph__column {

  92.     margin-left: 25%;

  93.   }

  94. }

  95. .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--medium > .paragraph__column {

  96.   position: relative;

  97.   min-height: 1px;

  98.   padding-left: 15px;

  99.   padding-right: 15px;

  100. }

  101. @media (min-width: 768px) {

  102.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--medium > .paragraph__column {

  103.     float: left;

  104.     width: 66.66666667%;

  105.   }

  106. }

  107. @media (min-width: 768px) {

  108.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--medium > .paragraph__column {

  109.     margin-left: 16.66666667%;

  110.   }

  111. }

  112. .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--wide > .paragraph__column {

  113.   position: relative;

  114.   min-height: 1px;

  115.   padding-left: 15px;

  116.   padding-right: 15px;

  117. }

  118. @media (min-width: 768px) {

  119.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--wide > .paragraph__column {

  120.     float: left;

  121.     width: 83.33333333%;

  122.   }

  123. }

  124. @media (min-width: 768px) {

  125.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--wide > .paragraph__column {

  126.     margin-left: 8.33333333%;

  127.   }

  128. }

  129. .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--full > .paragraph__column {

  130.   position: relative;

  131.   min-height: 1px;

  132.   padding-left: 15px;

  133.   padding-right: 15px;

  134. }

  135. @media (min-width: 768px) {

  136.   .paragraph--type--bp-statistics__1col .paragraph.paragraph--width--full > .paragraph__column {

  137.     float: left;

  138.     width: 100%;

  139.   }

  140. }

  141. /* Stat customization. */

  142. .statistic {

  143.   text-align: center;

  144. }

  145. .statistic .statistic-item {

  146.   font-size: 4rem;

  147.   font-weight: bold;

  148. }