Text.scss 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // Text Align
  2. @each $name in left, center, right, justify, start, end {
  3. .text-#{$name} {text-align: $name;}
  4. }
  5. // Text Color
  6. @each $i in $colorIndexes {
  7. @each $name, $colors in $colorNames {
  8. $colorName: --color-#{$name}-#{$i};
  9. [class*='text-#{$name}-#{$i}'] { color: RGB(var($colorName) / var(--text-opacity)); }
  10. // .text-#{$name}-#{$i} {color: RGB(var($colorName) / var(--text-opacity));}
  11. // @include setOpacity(text-#{$name}-#{$i}, --text-opacity);
  12. }
  13. }
  14. @each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--text-opacity))', 'white' 'RGB(255 255 255 / var(--text-opacity))'{
  15. // .text-#{$name} {color: #{$val};}
  16. [class*='text-#{$name}'] { color: #{$val}; }
  17. }
  18. @each $name, $val in 'black' 'RGB(0 0 0 / var(--text-opacity))', 'white' 'RGB(255 255 255 / var(--text-opacity))'{
  19. @include setOpacity(text-#{$name}, --text-opacity);
  20. }
  21. // @each $i in 5,10,20,30,40,50,60,70,80,90 {
  22. // .text-black_#{$i} {color: rgba(0, 0, 0, calc(#{$i} / 100));}
  23. // .text-white_#{$i} {color: rgba(255, 255, 255, calc(#{$i} / 100));}
  24. // }
  25. // Text Decoration
  26. $textDecorationLines: 'underline' 'underline','overline' 'overline','line-through' 'line-through','no-underline' 'none';
  27. @each $name, $val in $textDecorationLines {
  28. .#{$name} {text-decoration-line: #{$val};}
  29. }
  30. // Text Decoration Color
  31. @each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' black, 'white' white{
  32. .decoration-#{$name} {text-decoration-color: $val;}
  33. }
  34. @each $i in $colorIndexes {
  35. @each $name, $colors in $colorNames {
  36. $colorName: --color-#{$name}-#{$i};
  37. .decoration-#{$name}-#{$i} {text-decoration-color: var($colorName);}
  38. }
  39. }
  40. // Text Decoration Style
  41. $textDecorationStyles: 'decoration-solid' 'solid','decoration-double' 'double','decoration-dotted' 'dotted','decoration-dashed' 'dashed','decoration-wavy' 'wavy';
  42. @each $name, $val in $textDecorationStyles {
  43. .#{$name} {text-decoration-style: #{$val};}
  44. }
  45. // Text Decoration Thickness
  46. $textDecorationThicknesss: 'decoration-auto' 'auto','decoration-from-font' 'from-font','decoration-0' '0','decoration-1' '2rpx','decoration-2' '4rpx','decoration-4' '8rpx','decoration-8' '16rpx';
  47. @each $name, $val in $textDecorationThicknesss {
  48. .#{$name} {text-decoration-thickness: #{$val};}
  49. }
  50. // Text Underline Offset
  51. $textUnderlineOffsets: 'underline-offset-auto' 'auto','underline-offset-0' '0','underline-offset-1' '2rpx','underline-offset-2' '4rpx','underline-offset-4' '8rpx','underline-offset-8' '16rpx'; @each $name, $val in $textUnderlineOffsets { .#{$name} {text-underline-offset: #{$val};}}
  52. // Text Transform
  53. $textTransforms: 'uppercase' 'uppercase','lowercase' 'lowercase','capitalize' 'capitalize','normal-case' 'none'; @each $name, $val in $textTransforms { .#{$name} {text-transform: #{$val};}}
  54. // Text Overflow
  55. .truncate {
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. white-space: nowrap;
  59. }
  60. .text-ellipsis { text-overflow: ellipsis; }
  61. .text-clip { text-overflow: clip; }
  62. $pxNames: '0' ,'px' ,'0-5' ,'1' ,'1-5' ,'2' ,'2-5' ,'3' ,'3-5' ,'4' ,'5' ,'6' ,'7' ,'8' ,'9' ,'10' ,'11' ,'12' ,'14' ,'16' ,'20' ,'24' ,'28' ,'32' ,'36' ,'40' ,'44' ,'48' ,'52' ,'56' ,'60' ,'64' ,'72' ,'80' ,'96';
  63. @mixin setPxs($pxs) {
  64. @each $name in $pxs{
  65. $varName: --rpx-#{$name};
  66. @include render($name, $varName);
  67. }
  68. }
  69. // Text Indent
  70. @mixin render($name, $varName) {
  71. .indent-#{$name} { text-indent: var($varName); }
  72. }
  73. @include setPxs($pxNames);