No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

nucleo-svg.css 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /* Generated using nucleoapp.com */
  2. /* --------------------------------
  3. Icon colors
  4. -------------------------------- */
  5. .icon {
  6. display: inline-block;
  7. /* icon primary color */
  8. color: #111111;
  9. height: 1em;
  10. width: 1em;
  11. }
  12. .icon use {
  13. /* icon secondary color - fill */
  14. fill: #7ea6f6;
  15. }
  16. .icon.icon-outline use {
  17. /* icon secondary color - stroke */
  18. stroke: #7ea6f6;
  19. }
  20. /* --------------------------------
  21. Change icon size
  22. -------------------------------- */
  23. .icon-xs {
  24. height: 0.5em;
  25. width: 0.5em;
  26. }
  27. .icon-sm {
  28. height: 0.8em;
  29. width: 0.8em;
  30. }
  31. .icon-lg {
  32. height: 1.6em;
  33. width: 1.6em;
  34. }
  35. .icon-xl {
  36. height: 2em;
  37. width: 2em;
  38. }
  39. /* --------------------------------
  40. Align icon and text
  41. -------------------------------- */
  42. .icon-text-aligner {
  43. /* add this class to parent element that contains icon + text */
  44. display: flex;
  45. align-items: center;
  46. }
  47. .icon-text-aligner .icon {
  48. color: inherit;
  49. margin-right: 0.4em;
  50. }
  51. .icon-text-aligner .icon use {
  52. color: inherit;
  53. fill: currentColor;
  54. }
  55. .icon-text-aligner .icon.icon-outline use {
  56. stroke: currentColor;
  57. }
  58. /* --------------------------------
  59. Icon reset values - used to enable color customizations
  60. -------------------------------- */
  61. .icon {
  62. fill: currentColor;
  63. stroke: none;
  64. }
  65. .icon.icon-outline {
  66. fill: none;
  67. stroke: currentColor;
  68. }
  69. .icon use {
  70. stroke: none;
  71. }
  72. .icon.icon-outline use {
  73. fill: none;
  74. }
  75. /* --------------------------------
  76. Stroke effects - Nucleo outline icons
  77. - 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
  78. - 24px, 32px icons -> up to 2px stroke
  79. - 48px, 64px icons -> up to 4px stroke
  80. -------------------------------- */
  81. .icon-outline.icon-stroke-1 {
  82. stroke-width: 1px;
  83. }
  84. .icon-outline.icon-stroke-2 {
  85. stroke-width: 2px;
  86. }
  87. .icon-outline.icon-stroke-3 {
  88. stroke-width: 3px;
  89. }
  90. .icon-outline.icon-stroke-4 {
  91. stroke-width: 4px;
  92. }
  93. .icon-outline.icon-stroke-1 use,
  94. .icon-outline.icon-stroke-3 use {
  95. -webkit-transform: translateX(0.5px) translateY(0.5px);
  96. -moz-transform: translateX(0.5px) translateY(0.5px);
  97. -ms-transform: translateX(0.5px) translateY(0.5px);
  98. -o-transform: translateX(0.5px) translateY(0.5px);
  99. transform: translateX(0.5px) translateY(0.5px);
  100. }