From 81602650eaaf91883ef49c950b773e2620d097b6 Mon Sep 17 00:00:00 2001 From: Godwin Date: Sun, 30 Aug 2015 14:46:36 -0700 Subject: [PATCH] Do not compile translations.scss directly --- app/assets/stylesheets/_application.scss | 138 +----------------- .../{translations.scss => _translations.scss} | 136 +++++++++++++++++ 2 files changed, 137 insertions(+), 137 deletions(-) rename app/assets/stylesheets/{translations.scss => _translations.scss} (56%) diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 98b63e3..3155e1d 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -1631,142 +1631,6 @@ $header-tilt: 8deg; @include default-box-shadow(top, 2, true); } -.lingua-franca-translations { - position: relative; - @include default-box-shadow(top, 2); -} - -.lingua-franca-translations .translation-examples { - //width: 100%; - padding: 0 7.5%; - z-index: 1; - background-color: $white; - padding-bottom: 0.5vh; -} - -html #lingua-franca-translation-form { - @include _(box-shadow, none); -} - -.lingua-franca-translations .translation-examples ul { - list-style: none; - padding: 0; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - width: 100%; - height: 6vh; - padding-top: 0.25em; - z-index: 1; - margin: 0; -} - -.lingua-franca-translations .translation-examples li { - display: inline-block; - position: relative; - width: 5vw; - height: 5vh; - margin: 0 0.5em; - - @include after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - cursor: pointer; - outline: 0.25em solid rgba($colour-2, 0.25); - background-color: rgba($colour-2, 0.25); - outline-color: rgba($colour-2, 0.25); - @include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}'); - } - - iframe { - @include _(transform, scale(0.05) translate(-950vw, -950vh)); - width: 100vw; - height: 100vh; - @include _(transform-origin, 50% 50%); - //@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}'); - position: fixed; - margin: auto - } - - &:hover { - @include after { - background-color: rgba($colour-3, 0); - outline-color: rgba($colour-3, 0.5); - } - } - - &.open { - iframe { - top: 0; - left: 0; - z-index: 100; - //margin: auto; - @include _(transform, scale(0.75) translate(0, 0)); - @include default-box-shadow(top, 2); - - @include breakpoint(large) { - left: 8.75rem; - } - } - - @include after { - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: rgba($colour-3, 0.5); - position: fixed; - z-index: 99; - } - - /*@include before { - content: ''; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 101; - cursor: pointer; - }*/ - } -} - -.highlight-key { - outline: 3rem solid rgba($colour-2, 0.5); -} - -#lingua-franca-translation-form button[type="submit"] { - margin-right: 0.25em; -} - -.translation-history .translation-diff-info, -.translation-history .diff ul { - list-style: none; - padding: 0; -} - -.translation-history .translation-diff-info li { - margin-bottom: 0.5em; - font-style: italic; -} - -.translation-history .translation-diff-info li, -.translation-history .diff li { - width: 50%; - display: inline-block; - float: left; -} - -#lingua-franca-keys td a .undefined { - font-style: italic; - color: #888; -} - .stats { list-style: none; @@ -1911,4 +1775,4 @@ html #lingua-franca-translation-form { display: none; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/translations.scss b/app/assets/stylesheets/_translations.scss similarity index 56% rename from app/assets/stylesheets/translations.scss rename to app/assets/stylesheets/_translations.scss index 96238b5..e291b25 100644 --- a/app/assets/stylesheets/translations.scss +++ b/app/assets/stylesheets/_translations.scss @@ -249,3 +249,139 @@ $bumbleberry-no-markup: true; @include default-box-shadow(top, 2); } } + +.lingua-franca-translations { + position: relative; + @include default-box-shadow(top, 2); +} + +.lingua-franca-translations .translation-examples { + //width: 100%; + padding: 0 7.5%; + z-index: 1; + background-color: $white; + padding-bottom: 0.5vh; +} + +html #lingua-franca-translation-form { + @include _(box-shadow, none); +} + +.lingua-franca-translations .translation-examples ul { + list-style: none; + padding: 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + width: 100%; + height: 6vh; + padding-top: 0.25em; + z-index: 1; + margin: 0; +} + +.lingua-franca-translations .translation-examples li { + display: inline-block; + position: relative; + width: 5vw; + height: 5vh; + margin: 0 0.5em; + + @include after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: pointer; + outline: 0.25em solid rgba($colour-2, 0.25); + background-color: rgba($colour-2, 0.25); + outline-color: rgba($colour-2, 0.25); + @include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}'); + } + + iframe { + @include _(transform, scale(0.05) translate(-950vw, -950vh)); + width: 100vw; + height: 100vh; + @include _(transform-origin, 50% 50%); + //@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}'); + position: fixed; + margin: auto + } + + &:hover { + @include after { + background-color: rgba($colour-3, 0); + outline-color: rgba($colour-3, 0.5); + } + } + + &.open { + iframe { + top: 0; + left: 0; + z-index: 100; + //margin: auto; + @include _(transform, scale(0.75) translate(0, 0)); + @include default-box-shadow(top, 2); + + @include breakpoint(large) { + left: 8.75rem; + } + } + + @include after { + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba($colour-3, 0.5); + position: fixed; + z-index: 99; + } + + /*@include before { + content: ''; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 101; + cursor: pointer; + }*/ + } +} + +.highlight-key { + outline: 3rem solid rgba($colour-2, 0.5); +} + +#lingua-franca-translation-form button[type="submit"] { + margin-right: 0.25em; +} + +.translation-history .translation-diff-info, +.translation-history .diff ul { + list-style: none; + padding: 0; +} + +.translation-history .translation-diff-info li { + margin-bottom: 0.5em; + font-style: italic; +} + +.translation-history .translation-diff-info li, +.translation-history .diff li { + width: 50%; + display: inline-block; + float: left; +} + +#lingua-franca-keys td a .undefined { + font-style: italic; + color: #888; +}