You are here

Home » API reference » Formatter Suite 8

formatter_suite.css in Formatter Suite 8

Style usage of the Formatter Suite's field formatters.

File

css/formatter_suite.css
View source 
  1. /**

  2.  * @file

  3.  * Style usage of the Formatter Suite's field formatters.

  4.  */

  5. 

  6. /*-----------------------------------------------------------------------

  7.  *

  8.  * GeneralNumberWithBarIndicatorFormatter.

  9.  *

  10.  *-----------------------------------------------------------------------*/

  11. 

  12. /*

  13.  * Give the bar a thin outline to show its extent.

  14.  */

  15. .formatter_suite-general-number-with-bar-indicator-outer {

  16.   display: inline-block;

  17.   border: 1px solid #ccc;

  18. }

  19. 

  20. /*

  21.  * Add margins on the left or right to put space between the value

  22.  * and the bar.

  23.  */

  24. .formatter_suite-general-number-with-bar-indicator-left {

  25.   margin-left: 0.5em;

  26. }

  27. .formatter_suite-general-number-with-bar-indicator-right {

  28.   margin-right: 0.5em;

  29. }

  30. 

  31. /*

  32.  * Insure the bar honors the bar width and doesn't go to a new line.

  33.  */

  34. .formatter_suite-general-number-with-bar-indicator {

  35.   display: inline-block;

  36. }

  37. 

  38. /*-----------------------------------------------------------------------

  39.  *

  40.  * GeneralImageFormatter.

  41.  *

  42.  *-----------------------------------------------------------------------*/

  43. 

  44. .formatter_suite-general-image {

  45.   display: flex;

  46.   align-items: center;

  47.   flex-direction: column;

  48. }

  49. .formatter_suite-image-caption-title {

  50.   font-weight: bold;

  51.   flex-grow: 1;

  52. }

  53. 

  54. /*-----------------------------------------------------------------------

  55.  *

  56.  * TextWithExpandCollapseButtonsFormatter.

  57.  *

  58.  *-----------------------------------------------------------------------*/

  59. 

  60. /*

  61.  * Make sure that text overflows are simply hidden.

  62.  */

  63. .formatter_suite-text-with-expand-collapse-buttons .formatter_suite-text {

  64.   overflow: hidden;

  65. }

  66. 

  67. /*

  68.  * Position buttons to the right after the text.

  69.  */

  70. .formatter_suite-text-with-expand-collapse-buttons .formatter_suite-text-expand-button,

  71. .formatter_suite-text-with-expand-collapse-buttons .formatter_suite-text-collapse-button {

  72.   clear: both;

  73.   float: right;

  74. }

  75. 

  76. /*-----------------------------------------------------------------------

  77.  *

  78.  * GeneralNumberWithBarIndicatorFormatter.

  79.  *

  80.  *-----------------------------------------------------------------------*/

  81. 

  82. /*

  83.  * Disable all styling on the indicator.

  84.  */

  85. img.formatter_suite-general-number-with-bar-indicator {

  86.   border: none !important;

  87.   border-radius: 0 !important;

  88.   padding: 0 !important;

  89.   margin: 0 !important;

  90.   box-shadow: none;

  91. }