@fish-render/descriptions/index.css

Fish Render descriptions component for Vue 3

.desc-header{margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}.desc-title,.desc-extra{font-weight:500}.desc-grid{display:grid}.desc-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.desc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.desc-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.desc-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.desc-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}@media (min-width: 640px){.desc-sm-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 640px){.desc-sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 640px){.desc-sm-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.desc-md-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 768px){.desc-md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.desc-md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.desc-lg-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 1024px){.desc-lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.desc-lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1280px){.desc-xl-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 1280px){.desc-xl-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1280px){.desc-xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.desc-item{display:flex;align-items:flex-start}.desc-item-label{font-weight:500;color:#666;margin-right:8px;flex-shrink:0}.desc-item-content{flex:1;word-break:break-word}.desc-item-vertical{flex-direction:column}.desc-item-vertical .desc-item-label{margin-right:0;margin-bottom:4px}.desc-flex-row{display:flex;flex-direction:row;align-items:flex-start}.desc-flex-col,.desc-flex-auto{display:flex;flex-direction:column;align-items:flex-start}@media (min-width: 640px){.desc-flex-auto{flex-direction:row}}.desc-label{display:inline-flex;flex-shrink:0;padding-right:16px;font-weight:500;color:#7b7b7b}.desc-nowrap{white-space:nowrap}.desc-content{flex:1 1 0%;word-break:break-all}.desc-col-span-1{grid-column:span 1 / span 1}.desc-col-span-2{grid-column:span 2 / span 2}.desc-col-span-3{grid-column:span 3 / span 3}.desc-col-span-4{grid-column:span 4 / span 4}.desc-col-span-5{grid-column:span 5 / span 5}@media (min-width: 640px){.desc-sm-col-span-1{grid-column:span 1 / span 1}.desc-sm-col-span-2{grid-column:span 2 / span 2}.desc-sm-col-span-3{grid-column:span 3 / span 3}}@media (min-width: 768px){.desc-md-col-span-1{grid-column:span 1 / span 1}.desc-md-col-span-2{grid-column:span 2 / span 2}.desc-md-col-span-3{grid-column:span 3 / span 3}}@media (min-width: 1024px){.desc-lg-col-span-1{grid-column:span 1 / span 1}.desc-lg-col-span-2{grid-column:span 2 / span 2}.desc-lg-col-span-3{grid-column:span 3 / span 3}}@media (min-width: 1280px){.desc-xl-col-span-1{grid-column:span 1 / span 1}.desc-xl-col-span-2{grid-column:span 2 / span 2}.desc-xl-col-span-3{grid-column:span 3 / span 3}}