From 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 31 Mar 2017 20:21:41 +0200 Subject: Adds Webpack support and removes the use for Grunt Signed-off-by: Thomas Citharel use scss Signed-off-by: Thomas Citharel fix build, add babel, fix annotations fixes (and improvements !) for baggy add live reload & environments & eslint & theme fixes --- app/Resources/static/themes/baggy/css/layout.scss | 300 ++++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 app/Resources/static/themes/baggy/css/layout.scss (limited to 'app/Resources/static/themes/baggy/css/layout.scss') diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss new file mode 100644 index 00000000..cb14e62d --- /dev/null +++ b/app/Resources/static/themes/baggy/css/layout.scss @@ -0,0 +1,300 @@ +#content { + margin-top: 2em; + min-height: 30em; +} + +footer { + text-align: right; + position: relative; + bottom: 0; + right: 5em; + color: #999; + font-size: 0.8em; + font-style: italic; + z-index: 20; + + a { + color: #999; + font-weight: normal; + } +} + +.list-entries { + letter-spacing: -5px; +} + +.listmode.entry { + width: 100%; + height: inherit; +} + +.card-entry-tags { + max-height: 2em; + overflow-y: hidden; + padding: 0; + margin: 0; +} + +.card-entry-tags li, +.card-entry-tags span { + display: inline-block; + margin: 0 5px; + padding: 5px 12px; + background-color: rgba(0, 0, 0, 0.6); + border-radius: 3px; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; +} + +.card-entry-tags a, +.card-entry-labels a { + text-decoration: none; + font-weight: normal; + color: #fff; +} + +.nav-panel-add-tag { + margin-top: 10px; +} + +.list-entries + .results { + margin-bottom: 2em; +} + +.reading-time, +.created-at { + color: #999; + font-style: italic; + font-weight: normal; + font-size: 0.9em; +} + +.estimatedTime small { + position: relative; + top: -1px; +} + +.entry { + background-color: #fff; + letter-spacing: normal; + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + display: inline-block; + width: 32%; + margin-bottom: 1.5em; + vertical-align: top; + margin-right: 1%; + position: relative; + overflow: hidden; + padding: 1.5em 0 3em; + height: 440px; + + img.preview { + width: 100%; + object-fit: cover; + height: 100%; + } + + &::before { + content: ""; + width: 0; + height: 0; + border: 10px solid transparent; + border-bottom-color: #000; + position: absolute; + bottom: 0.7em; + z-index: 10; + right: 1.5em; + transition: all 0.5s ease; + } + + &::after { + content: ""; + position: absolute; + height: 7px; + width: 100%; + bottom: 0; + left: 0; + background-color: #000; + transition: all 0.5s ease; + } + + &:hover { + box-shadow: 0 3px 10px rgba(0, 0, 0, 1); + + &::after { + height: 40px; + } + + &::before { + bottom: 2.3em; + } + + h2 a { + color: #666; + } + + .tools { + bottom: 0; + } + } + + h2 { + text-transform: none; + margin-bottom: 0; + line-height: 1.2; + margin-left: 5px; + } + + &::after { + content: none; + } + + a { + display: block; + text-decoration: none; + color: #000; + word-wrap: break-word; + transition: all 0.5s ease; + } + + p { + color: #666; + font-size: 0.9em; + line-height: 1.7; + margin: 5px 5px auto; + } + + h2 a::first-letter { + text-transform: uppercase; + } + + .tools { + position: absolute; + bottom: -40px; + left: 0; + background: #000; + width: 100%; + z-index: 10; + padding-right: 0.5em; + text-align: right; + transition: all 0.5s ease; + + a { + color: #666; + text-decoration: none; + display: block; + padding: 0.4em; + + &:hover { + color: #fff; + } + } + + li { + display: inline-block; + margin-top: 10px; + } + + li:first-child { + float: left; + font-size: 0.9em; + max-width: calc(100% - 40px * 4); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-height: 2em; + margin-left: 10px; + } + } + + .card-entry-labels { + position: absolute; + top: 100px; + left: -1em; + z-index: 90; + max-width: 50%; + padding-left: 0; + + li { + margin: 10px 10px 10px auto; + padding: 5px 12px 5px 25px; + background-color: rgba(0, 0, 0, 0.6); + border-radius: 0 3px 3px 0; + color: #fff; + cursor: default; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + a { + color: #fff; + } + } + } +} + +.entry:nth-child(3n+1) { + margin-left: 0; +} + +.results { + letter-spacing: -5px; + padding: 0 0 0.5em; + + > * { + display: inline-block; + vertical-align: top; + letter-spacing: normal; + width: 50%; + text-align: right; + } +} + +div.pagination ul { + text-align: right; +} + +.nb-results { + text-align: left; + font-style: italic; + color: #999; + display: inline-flex; +} + +div.pagination ul { + a { + color: #999; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + } + + > * { + display: inline-block; + margin-left: 0.5em; + } + + .prev.disabled, + .next.disabled { + display: none; + } + + .current { + height: 25px; + padding: 4px 8px; + border: 1px solid #d5d5d5; + text-decoration: none; + font-weight: bold; + color: #000; + background-color: #ccc; + } +} + +.hide { + display: none; +} -- cgit v1.2.3