From 91775f36fee13c5e1fd77abf27555e6c77fa93da Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 31 May 2017 14:34:46 +0200 Subject: Add some flex magic Signed-off-by: Thomas Citharel --- .../static/themes/material/css/cards.scss | 61 +++++++++++++++++----- .../static/themes/material/css/various.scss | 20 ------- 2 files changed, 47 insertions(+), 34 deletions(-) (limited to 'app/Resources') diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 1e0155c3..596d0a59 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -175,30 +175,63 @@ a.original:not(.waves-effect) { } .card-stacked { - &:hover ul.tools-list { - display: block; - } + display: flex; + flex-flow: row wrap; - ul.tools-list { - display: none; + &:hover ul.tools-list { + display: inline; + text-align: right; } .preview { - float: left; - width: 90px; - height: 50px; + max-width: 100px; + height: auto; + margin-right: 10px; + flex: 1; img { - max-height: 50px; - padding-right: 10px; - width: 80px; + max-width: 100%; + max-height: 100%; + } + } + + div.metadata { + .chip { + background-color: $blueAccentColor; + padding: 0 15px 0 10px; + margin: auto 2px; + + a, + i { + color: #fff; + } + + i.material-icons { + float: right; + font-size: 20px; + line-height: 32px; + padding-left: 8px; + } } } - .domain, - .footer { - font-size: 12px; + div.card-content { + flex: 4; } + + ul.tools-list { + flex: 1; + display: none; + flex-basis: 5em; + align-self: flex-end; + float: right; + max-width: 6em; + } +} + +#content .collection .collection-item { + min-height: 65px; + height: auto; } .quickstart .card .card-action a, diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss index 512ed8cd..7daf40ec 100644 --- a/app/Resources/static/themes/material/css/various.scss +++ b/app/Resources/static/themes/material/css/various.scss @@ -30,23 +30,3 @@ nav .input-field input { .tab { flex: 1; } - -.chip { - margin: auto 0; - border-radius: 4px; - background-color: #eee; - font-weight: normal; - height: 20px; - line-height: normal; - - a { - color: #9e9e9e; - } - - i.material-icons { - float: right; - font-size: 16px; - line-height: 32px; - padding-left: 8px; - } -} -- cgit v1.2.3