administrate-bootstrap-theme 0.1.0 → 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +25 -11
  3. data/Rakefile +10 -14
  4. data/app/assets/config/administrate-bootstrap-theme_manifest.js +1 -0
  5. data/app/assets/javascripts/administrate-bootstrap-theme/theme.js +2 -0
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/_base.scss +17 -1
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +17 -3
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_form.scss +52 -16
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/theme.scss +12 -0
  10. data/lib/administrate-bootstrap-theme/engine.rb +2 -0
  11. data/lib/administrate-bootstrap-theme/version.rb +1 -1
  12. data/node_modules/bootstrap/js/src/alert.js +141 -0
  13. data/node_modules/bootstrap/js/src/base-component.js +46 -0
  14. data/node_modules/bootstrap/js/src/button.js +95 -0
  15. data/node_modules/bootstrap/js/src/carousel.js +624 -0
  16. data/node_modules/bootstrap/js/src/collapse.js +410 -0
  17. data/node_modules/bootstrap/js/src/dom/data.js +57 -0
  18. data/node_modules/bootstrap/js/src/dom/event-handler.js +331 -0
  19. data/node_modules/bootstrap/js/src/dom/manipulator.js +80 -0
  20. data/node_modules/bootstrap/js/src/dom/selector-engine.js +75 -0
  21. data/node_modules/bootstrap/js/src/dropdown.js +543 -0
  22. data/node_modules/bootstrap/js/src/modal.js +582 -0
  23. data/node_modules/bootstrap/js/src/offcanvas.js +279 -0
  24. data/node_modules/bootstrap/js/src/popover.js +171 -0
  25. data/node_modules/bootstrap/js/src/scrollspy.js +319 -0
  26. data/node_modules/bootstrap/js/src/tab.js +220 -0
  27. data/node_modules/bootstrap/js/src/toast.js +219 -0
  28. data/node_modules/bootstrap/js/src/tooltip.js +802 -0
  29. data/node_modules/bootstrap/js/src/util/index.js +253 -0
  30. data/node_modules/bootstrap/js/src/util/sanitizer.js +127 -0
  31. data/node_modules/bootstrap/js/src/util/scrollbar.js +70 -0
  32. data/node_modules/bootstrap/scss/_accordion.scss +116 -0
  33. data/node_modules/bootstrap/scss/_alert.scss +57 -0
  34. data/node_modules/bootstrap/scss/_badge.scss +29 -0
  35. data/node_modules/bootstrap/scss/_breadcrumb.scss +28 -0
  36. data/node_modules/bootstrap/scss/_button-group.scss +139 -0
  37. data/node_modules/bootstrap/scss/_buttons.scss +111 -0
  38. data/node_modules/bootstrap/scss/_card.scss +215 -0
  39. data/node_modules/bootstrap/scss/_carousel.scss +229 -0
  40. data/node_modules/bootstrap/scss/_close.scss +40 -0
  41. data/node_modules/bootstrap/scss/_containers.scss +41 -0
  42. data/node_modules/bootstrap/scss/_dropdown.scss +246 -0
  43. data/node_modules/bootstrap/scss/_forms.scss +9 -0
  44. data/node_modules/bootstrap/scss/_functions.scss +205 -0
  45. data/node_modules/bootstrap/scss/_grid.scss +22 -0
  46. data/node_modules/bootstrap/scss/_helpers.scss +7 -0
  47. data/node_modules/bootstrap/scss/_images.scss +42 -0
  48. data/node_modules/bootstrap/scss/_list-group.scss +174 -0
  49. data/node_modules/bootstrap/scss/_mixins.scss +41 -0
  50. data/node_modules/bootstrap/scss/_modal.scss +237 -0
  51. data/node_modules/bootstrap/scss/_nav.scss +139 -0
  52. data/node_modules/bootstrap/scss/_navbar.scss +306 -0
  53. data/node_modules/bootstrap/scss/_offcanvas.scss +77 -0
  54. data/node_modules/bootstrap/scss/_pagination.scss +64 -0
  55. data/node_modules/bootstrap/scss/_popover.scss +158 -0
  56. data/node_modules/bootstrap/scss/_progress.scss +48 -0
  57. data/node_modules/bootstrap/scss/_reboot.scss +621 -0
  58. data/node_modules/bootstrap/scss/_root.scss +16 -0
  59. data/node_modules/bootstrap/scss/_spinners.scss +69 -0
  60. data/node_modules/bootstrap/scss/_tables.scss +150 -0
  61. data/node_modules/bootstrap/scss/_toasts.scss +51 -0
  62. data/node_modules/bootstrap/scss/_tooltip.scss +115 -0
  63. data/node_modules/bootstrap/scss/_transitions.scss +21 -0
  64. data/node_modules/bootstrap/scss/_type.scss +104 -0
  65. data/node_modules/bootstrap/scss/_utilities.scss +594 -0
  66. data/node_modules/bootstrap/scss/_variables.scss +1464 -0
  67. data/node_modules/bootstrap/scss/bootstrap-grid.scss +65 -0
  68. data/node_modules/bootstrap/scss/bootstrap-reboot.scss +15 -0
  69. data/node_modules/bootstrap/scss/bootstrap-utilities.scss +18 -0
  70. data/node_modules/bootstrap/scss/bootstrap.scss +52 -0
  71. data/node_modules/bootstrap/scss/forms/_floating-labels.scss +61 -0
  72. data/node_modules/bootstrap/scss/forms/_form-check.scss +152 -0
  73. data/node_modules/bootstrap/scss/forms/_form-control.scss +219 -0
  74. data/node_modules/bootstrap/scss/forms/_form-range.scss +91 -0
  75. data/node_modules/bootstrap/scss/forms/_form-select.scss +67 -0
  76. data/node_modules/bootstrap/scss/forms/_form-text.scss +11 -0
  77. data/node_modules/bootstrap/scss/forms/_input-group.scss +121 -0
  78. data/node_modules/bootstrap/scss/forms/_labels.scss +36 -0
  79. data/node_modules/bootstrap/scss/forms/_validation.scss +12 -0
  80. data/node_modules/bootstrap/scss/helpers/_clearfix.scss +3 -0
  81. data/node_modules/bootstrap/scss/helpers/_colored-links.scss +12 -0
  82. data/node_modules/bootstrap/scss/helpers/_position.scss +30 -0
  83. data/node_modules/bootstrap/scss/helpers/_ratio.scss +26 -0
  84. data/node_modules/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  85. data/node_modules/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  86. data/node_modules/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  87. data/node_modules/bootstrap/scss/mixins/_alert.scss +11 -0
  88. data/node_modules/bootstrap/scss/mixins/_border-radius.scss +78 -0
  89. data/node_modules/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  90. data/node_modules/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  91. data/node_modules/bootstrap/scss/mixins/_buttons.scss +133 -0
  92. data/node_modules/bootstrap/scss/mixins/_caret.scss +64 -0
  93. data/node_modules/bootstrap/scss/mixins/_clearfix.scss +9 -0
  94. data/node_modules/bootstrap/scss/mixins/_container.scss +9 -0
  95. data/node_modules/bootstrap/scss/mixins/_deprecate.scss +10 -0
  96. data/node_modules/bootstrap/scss/mixins/_forms.scss +134 -0
  97. data/node_modules/bootstrap/scss/mixins/_gradients.scss +47 -0
  98. data/node_modules/bootstrap/scss/mixins/_grid.scss +120 -0
  99. data/node_modules/bootstrap/scss/mixins/_image.scss +16 -0
  100. data/node_modules/bootstrap/scss/mixins/_list-group.scss +24 -0
  101. data/node_modules/bootstrap/scss/mixins/_lists.scss +7 -0
  102. data/node_modules/bootstrap/scss/mixins/_pagination.scss +31 -0
  103. data/node_modules/bootstrap/scss/mixins/_reset-text.scss +17 -0
  104. data/node_modules/bootstrap/scss/mixins/_resize.scss +6 -0
  105. data/node_modules/bootstrap/scss/mixins/_table-variants.scss +21 -0
  106. data/node_modules/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  107. data/node_modules/bootstrap/scss/mixins/_transition.scss +26 -0
  108. data/node_modules/bootstrap/scss/mixins/_utilities.scss +68 -0
  109. data/node_modules/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  110. data/node_modules/bootstrap/scss/utilities/_api.scss +47 -0
  111. data/node_modules/bootstrap/scss/vendor/_rfs.scss +312 -0
  112. metadata +106 -19
@@ -0,0 +1,91 @@
1
+ // Range
2
+ //
3
+ // Style range inputs the same across browsers. Vendor-specific rules for pseudo
4
+ // elements cannot be mixed. As such, there are no shared styles for focus or
5
+ // active states on prefixed selectors.
6
+
7
+ .form-range {
8
+ width: 100%;
9
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
10
+ padding: 0; // Need to reset padding
11
+ background-color: transparent;
12
+ appearance: none;
13
+
14
+ &:focus {
15
+ outline: 0;
16
+
17
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
18
+ // No box-shadow() mixin for focus accessibility.
19
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
20
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
21
+ }
22
+
23
+ &::-moz-focus-outer {
24
+ border: 0;
25
+ }
26
+
27
+ &::-webkit-slider-thumb {
28
+ width: $form-range-thumb-width;
29
+ height: $form-range-thumb-height;
30
+ margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
31
+ @include gradient-bg($form-range-thumb-bg);
32
+ border: $form-range-thumb-border;
33
+ @include border-radius($form-range-thumb-border-radius);
34
+ @include box-shadow($form-range-thumb-box-shadow);
35
+ @include transition($form-range-thumb-transition);
36
+ appearance: none;
37
+
38
+ &:active {
39
+ @include gradient-bg($form-range-thumb-active-bg);
40
+ }
41
+ }
42
+
43
+ &::-webkit-slider-runnable-track {
44
+ width: $form-range-track-width;
45
+ height: $form-range-track-height;
46
+ color: transparent; // Why?
47
+ cursor: $form-range-track-cursor;
48
+ background-color: $form-range-track-bg;
49
+ border-color: transparent;
50
+ @include border-radius($form-range-track-border-radius);
51
+ @include box-shadow($form-range-track-box-shadow);
52
+ }
53
+
54
+ &::-moz-range-thumb {
55
+ width: $form-range-thumb-width;
56
+ height: $form-range-thumb-height;
57
+ @include gradient-bg($form-range-thumb-bg);
58
+ border: $form-range-thumb-border;
59
+ @include border-radius($form-range-thumb-border-radius);
60
+ @include box-shadow($form-range-thumb-box-shadow);
61
+ @include transition($form-range-thumb-transition);
62
+ appearance: none;
63
+
64
+ &:active {
65
+ @include gradient-bg($form-range-thumb-active-bg);
66
+ }
67
+ }
68
+
69
+ &::-moz-range-track {
70
+ width: $form-range-track-width;
71
+ height: $form-range-track-height;
72
+ color: transparent;
73
+ cursor: $form-range-track-cursor;
74
+ background-color: $form-range-track-bg;
75
+ border-color: transparent; // Firefox specific?
76
+ @include border-radius($form-range-track-border-radius);
77
+ @include box-shadow($form-range-track-box-shadow);
78
+ }
79
+
80
+ &:disabled {
81
+ pointer-events: none;
82
+
83
+ &::-webkit-slider-thumb {
84
+ background-color: $form-range-thumb-disabled-bg;
85
+ }
86
+
87
+ &::-moz-range-thumb {
88
+ background-color: $form-range-thumb-disabled-bg;
89
+ }
90
+ }
91
+ }
@@ -0,0 +1,67 @@
1
+ // Select
2
+ //
3
+ // Replaces the browser default select with a custom one, mostly pulled from
4
+ // https://primer.github.io/.
5
+
6
+ .form-select {
7
+ display: block;
8
+ width: 100%;
9
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
+ font-family: $form-select-font-family;
11
+ @include font-size($form-select-font-size);
12
+ font-weight: $form-select-font-weight;
13
+ line-height: $form-select-line-height;
14
+ color: $form-select-color;
15
+ background-color: $form-select-bg;
16
+ background-image: escape-svg($form-select-indicator);
17
+ background-repeat: no-repeat;
18
+ background-position: $form-select-bg-position;
19
+ background-size: $form-select-bg-size;
20
+ border: $form-select-border-width solid $form-select-border-color;
21
+ @include border-radius($form-select-border-radius, 0);
22
+ @include box-shadow($form-select-box-shadow);
23
+ appearance: none;
24
+
25
+ &:focus {
26
+ border-color: $form-select-focus-border-color;
27
+ outline: 0;
28
+ @if $enable-shadows {
29
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
30
+ } @else {
31
+ // Avoid using mixin so we can pass custom focus shadow properly
32
+ box-shadow: $form-select-focus-box-shadow;
33
+ }
34
+ }
35
+
36
+ &[multiple],
37
+ &[size]:not([size="1"]) {
38
+ padding-right: $form-select-padding-x;
39
+ background-image: none;
40
+ }
41
+
42
+ &:disabled {
43
+ color: $form-select-disabled-color;
44
+ background-color: $form-select-disabled-bg;
45
+ border-color: $form-select-disabled-border-color;
46
+ }
47
+
48
+ // Remove outline from select box in FF
49
+ &:-moz-focusring {
50
+ color: transparent;
51
+ text-shadow: 0 0 0 $form-select-color;
52
+ }
53
+ }
54
+
55
+ .form-select-sm {
56
+ padding-top: $form-select-padding-y-sm;
57
+ padding-bottom: $form-select-padding-y-sm;
58
+ padding-left: $form-select-padding-x-sm;
59
+ @include font-size($form-select-font-size-sm);
60
+ }
61
+
62
+ .form-select-lg {
63
+ padding-top: $form-select-padding-y-lg;
64
+ padding-bottom: $form-select-padding-y-lg;
65
+ padding-left: $form-select-padding-x-lg;
66
+ @include font-size($form-select-font-size-lg);
67
+ }
@@ -0,0 +1,11 @@
1
+ //
2
+ // Form text
3
+ //
4
+
5
+ .form-text {
6
+ margin-top: $form-text-margin-top;
7
+ @include font-size($form-text-font-size);
8
+ font-style: $form-text-font-style;
9
+ font-weight: $form-text-font-weight;
10
+ color: $form-text-color;
11
+ }
@@ -0,0 +1,121 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .input-group {
6
+ position: relative;
7
+ display: flex;
8
+ flex-wrap: wrap; // For form validation feedback
9
+ align-items: stretch;
10
+ width: 100%;
11
+
12
+ > .form-control,
13
+ > .form-select {
14
+ position: relative; // For focus state's z-index
15
+ flex: 1 1 auto;
16
+ width: 1%;
17
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
18
+ }
19
+
20
+ // Bring the "active" form control to the top of surrounding elements
21
+ > .form-control:focus,
22
+ > .form-select:focus {
23
+ z-index: 3;
24
+ }
25
+
26
+ // Ensure buttons are always above inputs for more visually pleasing borders.
27
+ // This isn't needed for `.input-group-text` since it shares the same border-color
28
+ // as our inputs.
29
+ .btn {
30
+ position: relative;
31
+ z-index: 2;
32
+
33
+ &:focus {
34
+ z-index: 3;
35
+ }
36
+ }
37
+ }
38
+
39
+
40
+ // Textual addons
41
+ //
42
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
43
+ // to prepend or append to an input.
44
+
45
+ .input-group-text {
46
+ display: flex;
47
+ align-items: center;
48
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
49
+ @include font-size($input-font-size); // Match inputs
50
+ font-weight: $input-group-addon-font-weight;
51
+ line-height: $input-line-height;
52
+ color: $input-group-addon-color;
53
+ text-align: center;
54
+ white-space: nowrap;
55
+ background-color: $input-group-addon-bg;
56
+ border: $input-border-width solid $input-group-addon-border-color;
57
+ @include border-radius($input-border-radius);
58
+ }
59
+
60
+
61
+ // Sizing
62
+ //
63
+ // Remix the default form control sizing classes into new ones for easier
64
+ // manipulation.
65
+
66
+ .input-group-lg > .form-control,
67
+ .input-group-lg > .form-select,
68
+ .input-group-lg > .input-group-text,
69
+ .input-group-lg > .btn {
70
+ padding: $input-padding-y-lg $input-padding-x-lg;
71
+ @include font-size($input-font-size-lg);
72
+ @include border-radius($input-border-radius-lg);
73
+ }
74
+
75
+ .input-group-sm > .form-control,
76
+ .input-group-sm > .form-select,
77
+ .input-group-sm > .input-group-text,
78
+ .input-group-sm > .btn {
79
+ padding: $input-padding-y-sm $input-padding-x-sm;
80
+ @include font-size($input-font-size-sm);
81
+ @include border-radius($input-border-radius-sm);
82
+ }
83
+
84
+ .input-group-lg > .form-select,
85
+ .input-group-sm > .form-select {
86
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
87
+ }
88
+
89
+
90
+ // Rounded corners
91
+ //
92
+ // These rulesets must come after the sizing ones to properly override sm and lg
93
+ // border-radius values when extending. They're more specific than we'd like
94
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
95
+
96
+ // stylelint-disable-next-line no-duplicate-selectors
97
+ .input-group {
98
+ &:not(.has-validation) {
99
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
100
+ > .dropdown-toggle:nth-last-child(n + 3) {
101
+ @include border-end-radius(0);
102
+ }
103
+ }
104
+
105
+ &.has-validation {
106
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
107
+ > .dropdown-toggle:nth-last-child(n + 4) {
108
+ @include border-end-radius(0);
109
+ }
110
+ }
111
+
112
+ $validation-messages: "";
113
+ @each $state in map-keys($form-validation-states) {
114
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
115
+ }
116
+
117
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
118
+ margin-left: -$input-border-width;
119
+ @include border-start-radius(0);
120
+ }
121
+ }
@@ -0,0 +1,36 @@
1
+ //
2
+ // Labels
3
+ //
4
+
5
+ .form-label {
6
+ margin-bottom: $form-label-margin-bottom;
7
+ @include font-size($form-label-font-size);
8
+ font-style: $form-label-font-style;
9
+ font-weight: $form-label-font-weight;
10
+ color: $form-label-color;
11
+ }
12
+
13
+ // For use with horizontal and inline forms, when you need the label (or legend)
14
+ // text to align with the form controls.
15
+ .col-form-label {
16
+ padding-top: add($input-padding-y, $input-border-width);
17
+ padding-bottom: add($input-padding-y, $input-border-width);
18
+ margin-bottom: 0; // Override the `<legend>` default
19
+ @include font-size(inherit); // Override the `<legend>` default
20
+ font-style: $form-label-font-style;
21
+ font-weight: $form-label-font-weight;
22
+ line-height: $input-line-height;
23
+ color: $form-label-color;
24
+ }
25
+
26
+ .col-form-label-lg {
27
+ padding-top: add($input-padding-y-lg, $input-border-width);
28
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
29
+ @include font-size($input-font-size-lg);
30
+ }
31
+
32
+ .col-form-label-sm {
33
+ padding-top: add($input-padding-y-sm, $input-border-width);
34
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
35
+ @include font-size($input-font-size-sm);
36
+ }
@@ -0,0 +1,12 @@
1
+ // Form validation
2
+ //
3
+ // Provide feedback to users when form field values are valid or invalid. Works
4
+ // primarily for client-side validation via scoped `:invalid` and `:valid`
5
+ // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6
+ // server-side validation.
7
+
8
+ // scss-docs-start form-validation-states-loop
9
+ @each $state, $data in $form-validation-states {
10
+ @include form-validation-state($state, $data...);
11
+ }
12
+ // scss-docs-end form-validation-states-loop
@@ -0,0 +1,3 @@
1
+ .clearfix {
2
+ @include clearfix();
3
+ }
@@ -0,0 +1,12 @@
1
+ @each $color, $value in $theme-colors {
2
+ .link-#{$color} {
3
+ color: $value;
4
+
5
+ @if $link-shade-percentage != 0 {
6
+ &:hover,
7
+ &:focus {
8
+ color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
9
+ }
10
+ }
11
+ }
12
+ }
@@ -0,0 +1,30 @@
1
+ // Shorthand
2
+
3
+ .fixed-top {
4
+ position: fixed;
5
+ top: 0;
6
+ right: 0;
7
+ left: 0;
8
+ z-index: $zindex-fixed;
9
+ }
10
+
11
+ .fixed-bottom {
12
+ position: fixed;
13
+ right: 0;
14
+ bottom: 0;
15
+ left: 0;
16
+ z-index: $zindex-fixed;
17
+ }
18
+
19
+ // Responsive sticky top
20
+ @each $breakpoint in map-keys($grid-breakpoints) {
21
+ @include media-breakpoint-up($breakpoint) {
22
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23
+
24
+ .sticky#{$infix}-top {
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: $zindex-sticky;
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,26 @@
1
+ // Credit: Nicolas Gallagher and SUIT CSS.
2
+
3
+ .ratio {
4
+ position: relative;
5
+ width: 100%;
6
+
7
+ &::before {
8
+ display: block;
9
+ padding-top: var(--#{$variable-prefix}aspect-ratio);
10
+ content: "";
11
+ }
12
+
13
+ > * {
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ }
21
+
22
+ @each $key, $ratio in $aspect-ratios {
23
+ .ratio-#{$key} {
24
+ --#{$variable-prefix}aspect-ratio: #{$ratio};
25
+ }
26
+ }
@@ -0,0 +1,15 @@
1
+ //
2
+ // Stretched link
3
+ //
4
+
5
+ .stretched-link {
6
+ &::#{$stretched-link-pseudo-element} {
7
+ position: absolute;
8
+ top: 0;
9
+ right: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ z-index: $stretched-link-z-index;
13
+ content: "";
14
+ }
15
+ }
@@ -0,0 +1,7 @@
1
+ //
2
+ // Text truncation
3
+ //
4
+
5
+ .text-truncate {
6
+ @include text-truncate();
7
+ }