@brizy/ui
Version:
React elements in Brizy style
1 lines • 8.99 kB
CSS
.brz-ui-card{height:var(--brz-ui-global-card-height,var(--brz-ui-card--height,auto));width:var(--brz-ui-global-card-width,var(--brz-ui-card--width,auto));z-index:var(--brz-ui-global-card-z-index,var(--brz-ui-card--z-index,inherit));border-radius:var(--brz-ui-global-card-border-radius,var(--brz-ui-card-border-radius,2px));background:var(--brz-ui-global-card-background,var(--brz-ui-card-background,var(--color-white,#fff)));border:var(--brz-ui-global-card-border-width,var(--brz-ui-card-border-width,1px)) var(--brz-ui-global-card-border-style,var(--brz-ui-card-border-style,solid)) var(--brz-ui-global-card-border-color,var(--brz-ui-card-border-color,var(--color-gray-light,#d5d9db)));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:background .3s}.brz-ui-card:hover{background:var(--brz-ui-global-card-background-hover,var(--brz-ui-card-background-hover,var(--brz-ui-global-card-background,var(--brz-ui-card-background,var(--color-white,#fff)))))}.brz-ui-card--color-inherit,.brz-ui-card--color-inherit:not(.brz-ui-card--hoverColor):hover{background-color:inherit}.brz-ui-card--hoverColor-inherit:hover{background:inherit}.brz-ui-card--cover img:not(:last-child){margin-bottom:9px}.brz-ui-card--shadow{box-shadow:var(--brz-ui-global-card-box-shadow,var(--brz-ui-card-box-shadow,0 2px 8px 0 rgba(0,0,0,.08)))}.brz-ui-card.brz-ui-card-dsk-custom{padding-inline-start:var(--brz-ui-card-custom-size-desktop-left,0px);padding-inline-end:var(--brz-ui-card-custom-size-desktop-right,0px);padding-top:var(--brz-ui-card-custom-size-desktop-top,0);padding-bottom:var(--brz-ui-card-custom-size-desktop-bottom,0)}.brz-ui-card.brz-ui-card-dsk-custom.brz-ui-card--cover img{width:calc(100% + (var(--brz-ui-card-custom-size-desktop-left,0px) + var(--brz-ui-card-custom-size-desktop-right,0px)));margin-inline-start:calc(0px - var(--brz-ui-card-custom-size-desktop-left,0px));margin-inline-end:calc(0px - var(--brz-ui-card-custom-size-desktop-right,0px))}.brz-ui-card.brz-ui-card-dsk-custom.brz-ui-card--cover img:first-child{margin-top:calc(0px - var(--brz-ui-card-custom-size-desktop-top,0px))}.brz-ui-card.brz-ui-card.brz-ui-card-dsk-md{padding:20px 35px}.brz-ui-card.brz-ui-card.brz-ui-card-dsk-md.brz-ui-card--cover img{width:calc(100% + 70px);margin-inline-start:-35px;margin-inline-end:-35px}.brz-ui-card.brz-ui-card.brz-ui-card-dsk-md.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-sm{padding:20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-sm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-sm.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-xsm{padding:7.5px 20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-xsm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-dsk-xsm.brz-ui-card--cover img:first-child{margin-top:-7.5px}.brz-ui-card--loading{display:flex;flex-wrap:wrap;justify-content:space-between}.brz-ui-card--loading div{height:10px;background-color:#d5d9dba6;margin:5px 0;border-radius:2px}.brz-ui-card--loading div:first-child{width:100%}.brz-ui-card--loading div:nth-child(10),.brz-ui-card--loading div:nth-child(2),.brz-ui-card--loading div:nth-child(3){width:49.5%}.brz-ui-card--loading div:nth-child(4),.brz-ui-card--loading div:nth-child(5),.brz-ui-card--loading div:nth-child(6){width:32.5%}.brz-ui-card--loading div:nth-child(7),.brz-ui-card--loading div:nth-child(8),.brz-ui-card--loading div:nth-child(9){width:15%}.brz-ui-card--onclick{cursor:pointer}@media only screen and (max-width:768px){.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-custom{padding:var(--brz-ui-card-custom-size-tablet-top,0) var(--brz-ui-card-custom-size-tablet-right,0) var(--brz-ui-card-custom-size-tablet-bottom,0) var(--brz-ui-card-custom-size-tablet-left,0)}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-custom.brz-ui-card--cover img{width:calc(100% + (var(--brz-ui-card-custom-size-tablet-left,0px) + var(--brz-ui-card-custom-size-tablet-right,0px)));margin-inline-start:calc(0px - var(--brz-ui-card-custom-size-tablet-left,0px));margin-inline-end:calc(0px - var(--brz-ui-card-custom-size-tablet-right,0px))}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-custom.brz-ui-card--cover img:first-child{margin-top:calc(0px - var(--brz-ui-card-custom-size-tablet-top,0px))}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-md{padding:20px 35px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-md.brz-ui-card--cover img{width:calc(100% + 70px);margin-inline-start:-35px;margin-inline-end:-35px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-md.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-sm{padding:20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-sm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-sm.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-xsm{padding:7.5px 20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-xsm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-tbl-xsm.brz-ui-card--cover img:first-child{margin-top:-7.5px}}@media only screen and (max-width:480px){.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-custom{padding:var(--brz-ui-card-custom-size-mobile-top,0) var(--brz-ui-card-custom-size-mobile-right,0) var(--brz-ui-card-custom-size-mobile-bottom,0) var(--brz-ui-card-custom-size-mobile-left,0)}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-custom.brz-ui-card--cover img{width:calc(100% + (var(--brz-ui-card-custom-size-mobile-left,0px) + var(--brz-ui-card-custom-size-mobile-right,0px)));margin-inline-start:calc(0px - var(--brz-ui-card-custom-size-mobile-left,0px));margin-inline-end:calc(0px - var(--brz-ui-card-custom-size-mobile-right,0px))}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-custom.brz-ui-card--cover img:first-child{margin-top:calc(0px - var(--brz-ui-card-custom-size-mobile-top,0px))}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-md{padding:20px 35px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-md.brz-ui-card--cover img{width:calc(100% + 70px);margin-inline-start:-35px;margin-inline-end:-35px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-md.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-sm{padding:20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-sm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-sm.brz-ui-card--cover img:first-child{margin-top:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-xsm{padding:7.5px 20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-xsm.brz-ui-card--cover img{width:calc(100% + 40px);margin-inline-start:-20px;margin-inline-end:-20px}.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card.brz-ui-card-mbl-xsm.brz-ui-card--cover img:first-child{margin-top:-7.5px}}