Implementation
@css
static List<StyleRule> get styles => [
css('figure.image', [css('&.zoomable img').styles(cursor: Cursor.zoomIn)]),
css('dialog.zoom-modal', [
css('&').styles(
width: 100.vw,
height: 100.vh,
maxWidth: Unit.initial,
maxHeight: Unit.initial,
margin: Margin.zero,
padding: Padding.zero,
border: Border.none,
backgroundColor: Colors.transparent,
overflow: Overflow.hidden,
outline: Outline(style: OutlineStyle.none),
),
css('.image-wrapper').styles(
position: Position.relative(),
width: 100.percent,
height: 100.percent,
backgroundColor: ContentColors.background,
),
css('img').styles(
position: Position.absolute(),
cursor: Cursor.zoomOut,
transition: Transition('transform', duration: 300.ms),
raw: {'transform-origin': 'top left'},
),
]),
];