diff --git a/src/styles/application.scss b/src/styles/application.scss index f0a17c975..c398b9ab7 100644 --- a/src/styles/application.scss +++ b/src/styles/application.scss @@ -8,6 +8,7 @@ @import 'accessibility'; @import 'navigation'; @import 'autosuggest'; +@import 'instance-pins'; // COMPONENTS @import 'components/buttons'; diff --git a/src/styles/instance-pins.scss b/src/styles/instance-pins.scss new file mode 100644 index 000000000..ada4212fc --- /dev/null +++ b/src/styles/instance-pins.scss @@ -0,0 +1,39 @@ +.flex.rtl\:space-x-reverse.space-x-2.mb-4 { + display: flex; + flex-wrap: wrap; + align-items: start; + justify-content: space-between; + justify-items: start; + padding: 0.5rem 0; +} + +.flex.rtl\:space-x-reverse.space-x-2.mb-4 a { + margin: 0.25rem 0.75rem; + width: 25%; + overflow: hidden; +} + +.flex.rtl\:space-x-reverse.space-x-2.mb-4 button { + overflow: hidden; +} + +.flex.rtl\:space-x-reverse.space-x-2.mb-4 button span { + text-overflow: ellipsis; + overflow: hidden; +} + +@media (width <= 600px) { + .flex.rtl\:space-x-reverse.space-x-2.mb-4 { + border-bottom: 1px solid rgba(46, 46, 46, 0.7); + } + + .flex.rtl\:space-x-reverse.space-x-2.mb-4 button span { + overflow: hidden; + } + + .flex.rtl\:space-x-reverse.space-x-2.mb-4 button { + font-size: 0.75rem; + + } + +} \ No newline at end of file