PageRenderTime 51ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/_object.list-ui.scss

https://github.com/treeframework/object.list-ui
Sass | 124 lines | 70 code | 42 blank | 12 comment | 4 complexity | 58c656fdff4f5474c733f4ef553a57eb MD5 | raw file
  1. // *************************************
  2. //
  3. // #LIST-UI
  4. //
  5. // *************************************
  6. // The UI list object creates blocky list items with a keyline separator out of
  7. // a `ul` or `ol`.
  8. // Predefine the variables below in order to alter and enable specific features.
  9. $tree-list-ui-namespace: $tree-namespace !default;
  10. $tree-list-ui-padding: $tree-base-spacing-unit !default;
  11. $tree-list-ui-padding--tiny: quarter($tree-list-ui-padding) !default;
  12. $tree-list-ui-padding--small: halve($tree-list-ui-padding) !default;
  13. $tree-list-ui-padding--large: double($tree-list-ui-padding) !default;
  14. $tree-list-ui-padding--huge: quadruple($tree-list-ui-padding) !default;
  15. $tree-list-ui-border-width: 1px !default;
  16. $tree-list-ui-border-style: solid !default;
  17. $tree-list-ui-border-color: #edece4 !default;
  18. $tree-enable-list-ui--tiny: false !default;
  19. $tree-enable-list-ui--small: false !default;
  20. $tree-enable-list-ui--large: false !default;
  21. $tree-enable-list-ui--huge: false !default;
  22. .#{$tree-list-ui-namespace}list-ui,
  23. %#{$tree-list-ui-namespace}list-ui,
  24. .#{$tree-list-ui-namespace}list-ui__item,
  25. %#{$tree-list-ui-namespace}list-ui__item {
  26. border: 0 $tree-list-ui-border-style $tree-list-ui-border-color;
  27. }
  28. .#{$tree-list-ui-namespace}list-ui,
  29. %#{$tree-list-ui-namespace}list-ui {
  30. margin: 0;
  31. padding: 0;
  32. list-style: none;
  33. border-top-width: $tree-list-ui-border-width;
  34. > li {
  35. @extend %#{$tree-list-ui-namespace}list-ui__item;
  36. }
  37. }
  38. .#{$tree-list-ui-namespace}list-ui__item,
  39. %#{$tree-list-ui-namespace}list-ui__item {
  40. padding: $tree-list-ui-padding;
  41. border-bottom-width: $tree-list-ui-border-width;
  42. }
  43. @if ($tree-enable-list-ui--tiny == true) {
  44. // Tiny list-uis.
  45. .#{$tree-list-ui-namespace}list-ui--tiny,
  46. %#{$tree-list-ui-namespace}list-ui--tiny {
  47. > .#{$tree-list-ui-namespace}list-ui__item,
  48. > %#{$tree-list-ui-namespace}list-ui__item {
  49. padding: $tree-list-ui-padding--tiny;
  50. }
  51. }
  52. }
  53. @if ($tree-enable-list-ui--small == true) {
  54. // Small list-uis.
  55. .#{$tree-list-ui-namespace}list-ui--small,
  56. %#{$tree-list-ui-namespace}list-ui--small {
  57. > .#{$tree-list-ui-namespace}list-ui__item,
  58. > %#{$tree-list-ui-namespace}list-ui__item {
  59. padding: $tree-list-ui-padding--small;
  60. }
  61. }
  62. }
  63. @if ($tree-enable-list-ui--large == true) {
  64. // Large list-uis.
  65. .#{$tree-list-ui-namespace}list-ui--large,
  66. %#{$tree-list-ui-namespace}list-ui--large {
  67. > .#{$tree-list-ui-namespace}list-ui__item,
  68. > %#{$tree-list-ui-namespace}list-ui__item {
  69. padding: $tree-list-ui-padding--large;
  70. }
  71. }
  72. }
  73. @if ($tree-enable-list-ui--huge == true) {
  74. // Huge list-uis.
  75. .#{$tree-list-ui-namespace}list-ui--huge,
  76. %#{$tree-list-ui-namespace}list-ui--huge {
  77. > .#{$tree-list-ui-namespace}list-ui__item,
  78. > %#{$tree-list-ui-namespace}list-ui__item {
  79. padding: $tree-list-ui-padding--huge;
  80. }
  81. }
  82. }