From 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 31 Mar 2017 20:21:41 +0200
Subject: Adds Webpack support and removes the use for Grunt

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

use scss

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

fix build, add babel, fix annotations

fixes (and improvements !) for baggy

add live reload & environments & eslint & theme fixes
---
 app/Resources/static/themes/baggy/css/article.scss | 165 ++++++++++++
 app/Resources/static/themes/baggy/css/font.css     |   6 -
 app/Resources/static/themes/baggy/css/guide.scss   | 263 ++++++++++++++++++
 app/Resources/static/themes/baggy/css/index.scss   |  13 +
 app/Resources/static/themes/baggy/css/layout.scss  | 300 +++++++++++++++++++++
 app/Resources/static/themes/baggy/css/login.scss   |  26 ++
 .../static/themes/baggy/css/media_queries.scss     | 172 ++++++++++++
 app/Resources/static/themes/baggy/css/messages.css |  19 --
 .../static/themes/baggy/css/messages.scss          |  50 ++++
 app/Resources/static/themes/baggy/css/pictos.scss  | 210 +++++++++++++++
 app/Resources/static/themes/baggy/css/print.css    |  66 -----
 app/Resources/static/themes/baggy/css/print.scss   |  63 +++++
 .../static/themes/baggy/css/ratatouille.css        | 226 ----------------
 .../static/themes/baggy/css/ratatouille.scss       | 226 ++++++++++++++++
 app/Resources/static/themes/baggy/css/save.scss    | 115 ++++++++
 15 files changed, 1603 insertions(+), 317 deletions(-)
 create mode 100644 app/Resources/static/themes/baggy/css/article.scss
 delete mode 100755 app/Resources/static/themes/baggy/css/font.css
 create mode 100644 app/Resources/static/themes/baggy/css/guide.scss
 create mode 100644 app/Resources/static/themes/baggy/css/index.scss
 create mode 100644 app/Resources/static/themes/baggy/css/layout.scss
 create mode 100644 app/Resources/static/themes/baggy/css/login.scss
 create mode 100755 app/Resources/static/themes/baggy/css/media_queries.scss
 delete mode 100755 app/Resources/static/themes/baggy/css/messages.css
 create mode 100755 app/Resources/static/themes/baggy/css/messages.scss
 create mode 100644 app/Resources/static/themes/baggy/css/pictos.scss
 delete mode 100755 app/Resources/static/themes/baggy/css/print.css
 create mode 100755 app/Resources/static/themes/baggy/css/print.scss
 delete mode 100644 app/Resources/static/themes/baggy/css/ratatouille.css
 create mode 100644 app/Resources/static/themes/baggy/css/ratatouille.scss
 create mode 100644 app/Resources/static/themes/baggy/css/save.scss

(limited to 'app/Resources/static/themes/baggy/css')

diff --git a/app/Resources/static/themes/baggy/css/article.scss b/app/Resources/static/themes/baggy/css/article.scss
new file mode 100644
index 00000000..9094ad55
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/article.scss
@@ -0,0 +1,165 @@
+
+#article {
+  width: 70%;
+  margin-bottom: 3em;
+  text-align: justify;
+
+  .tags {
+    margin-bottom: 1em;
+  }
+
+  i {
+    font-style: normal;
+  }
+
+  h1 {
+    text-align: left;
+  }
+
+  h2::after {
+    content: none;
+  }
+
+  h2,
+  h3,
+  h4 {
+    text-transform: none;
+  }
+}
+
+blockquote {
+  border: 1px solid #999;
+  background-color: #fff;
+  padding: 1em;
+  margin: 0;
+}
+
+.topPosF {
+  position: fixed;
+  right: 20%;
+  bottom: 2em;
+  font-size: 1.5em;
+}
+
+#article_toolbar {
+  margin-bottom: 1em;
+
+  li {
+    display: inline-block;
+    margin: 3px auto;
+  }
+
+  a {
+    background-color: #000;
+    padding: 0.3em 0.5em 0.2em;
+    color: #fff;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      background-color: #999;
+    }
+  }
+}
+
+#nav-btn-add-tag {
+  cursor: pointer;
+}
+
+.shaarli::before {
+  content: "*";
+}
+
+.return {
+  text-decoration: none;
+  margin-top: 1em;
+  display: block;
+}
+
+.return::before {
+  margin-right: 0.5em;
+}
+
+.notags {
+  font-style: italic;
+  color: #999;
+}
+
+.icon-rss {
+  background-color: #000;
+  color: #fff;
+  padding: 0.2em 0.5em;
+
+  &::before {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.list-tags {
+  li {
+    margin-bottom: 0.5em;
+  }
+
+  .icon-rss:hover,
+  .icon-rss:focus {
+    background-color: #fff;
+    color: #000;
+    text-decoration: none;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+pre code {
+  font-family: "Courier New", Courier, monospace;
+}
+
+#filters {
+  position: fixed;
+  width: 20%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 30px 30px 15px 15px;
+  border-left: 1px #333 solid;
+  z-index: 12;
+  min-width: 300px;
+
+  form .filter-group {
+    margin: 5px;
+  }
+}
+
+#download-form {
+  position: fixed;
+  width: 10%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 30px 30px 15px 15px;
+  border-left: 1px #333 solid;
+  z-index: 12;
+  min-width: 200px;
+
+  li {
+    display: block;
+    padding: 0.5em 2em 0.5em 1em;
+    color: #fff;
+    position: relative;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 400;
+    font-family: PT Sans, sans-serif;
+    transition: all 0.5s ease;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/font.css b/app/Resources/static/themes/baggy/css/font.css
deleted file mode 100755
index 47edcb83..00000000
--- a/app/Resources/static/themes/baggy/css/font.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-  font-family: "PT Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff");
-}
diff --git a/app/Resources/static/themes/baggy/css/guide.scss b/app/Resources/static/themes/baggy/css/guide.scss
new file mode 100644
index 00000000..afb47c4a
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/guide.scss
@@ -0,0 +1,263 @@
+
+::selection {
+  color: #fff;
+  background-color: #000;
+}
+
+.desktopHide {
+  display: none;
+}
+
+.logo {
+  position: fixed;
+  z-index: 20;
+  top: 0.4em;
+  left: 0.6em;
+}
+
+h2,
+h3,
+h4 {
+  font-family: "PT Sans", sans-serif;
+  text-transform: uppercase;
+}
+
+p,
+li,
+label {
+  color: #666;
+}
+
+a {
+  color: #000;
+  font-weight: bold;
+
+  &.nostyle {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+form fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+form input[type="text"],
+form input[type="number"],
+select,
+form input[type="password"],
+form input[type="url"],
+form input[type="email"] {
+  border: 1px solid #999;
+  padding: 0.5em 1em;
+  min-width: 12em;
+  color: #666;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    -webkit-appearance: none;
+    border-radius: 0;
+    background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
+  }
+}
+
+.inline {
+  .row {
+    display: inline-block;
+    margin-right: 0.5em;
+  }
+
+  label {
+    min-width: 6em;
+  }
+}
+
+fieldset label {
+  display: inline-block;
+  min-width: 12.5em;
+  color: #666;
+}
+
+label {
+  margin-right: 0.5em;
+}
+
+form .row {
+  margin-bottom: 0.5em;
+}
+
+form button,
+input[type="submit"] {
+  cursor: pointer;
+  background-color: #000;
+  color: #fff;
+  padding: 0.5em 1em;
+  display: inline-block;
+  border: 1px solid #000;
+}
+
+form button:hover,
+form button:focus,
+input[type="submit"]:hover,
+input[type="submit"]:focus {
+  background-color: #fff;
+  color: #000;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+#bookmarklet {
+  cursor: move;
+}
+
+h2::after {
+  content: "";
+  height: 4px;
+  width: 20%;
+  background-color: #000;
+  display: block;
+}
+
+.links {
+  padding: 0;
+  margin: 0;
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#links {
+  position: fixed;
+  top: 0;
+  width: 10em;
+  left: 0;
+  text-align: right;
+  background-color: #333;
+  padding-top: 9.5em;
+  height: 100%;
+  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6);
+  z-index: 15;
+
+  > li > a {
+    display: block;
+    padding: 0.5em 2em 0.5em 1em;
+    color: #fff;
+    position: relative;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: normal;
+    font-family: "PT Sans", sans-serif;
+    transition: all 0.5s ease;
+
+    &:hover,
+    &:focus {
+      background-color: #999;
+      color: #000;
+    }
+  }
+
+  .current::after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 10px solid transparent;
+    border-right-color: #eee;
+    right: 0;
+    top: 50%;
+    margin-top: -10px;
+  }
+
+  li:last-child {
+    position: fixed;
+    bottom: 1em;
+    width: 10em;
+
+    a::before {
+      font-size: 1.2em;
+      position: relative;
+      top: 2px;
+    }
+  }
+}
+
+#main {
+  margin-left: 12em;
+  position: relative;
+  z-index: 10;
+  padding-right: 5%;
+  padding-bottom: 1em;
+}
+
+#sort {
+  padding: 0;
+  list-style-type: none;
+  opacity: 0.5;
+  display: inline-block;
+
+  li {
+    display: inline;
+    font-size: 0.9em;
+
+    & + li {
+      margin-left: 10px;
+    }
+  }
+
+  a {
+    padding: 2px 2px 0;
+    vertical-align: middle;
+  }
+
+  img {
+    vertical-align: baseline;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+}
+
+#display-mode {
+  float: right;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+}
+
+#listmode {
+  width: 16px;
+  display: inline-block;
+  text-decoration: none;
+
+  &.tablemode {
+    background: url("../../_global/img/table.png") no-repeat bottom;
+  }
+
+  .listmode {
+    background: url("../../_global/img/list.png") no-repeat bottom;
+  }
+}
+
+#warning_message {
+  position: fixed;
+  background-color: #ff6347;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: #000;
+}
diff --git a/app/Resources/static/themes/baggy/css/index.scss b/app/Resources/static/themes/baggy/css/index.scss
new file mode 100644
index 00000000..e7a11963
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/index.scss
@@ -0,0 +1,13 @@
+/* Style */
+@import 'guide';
+@import 'layout';
+@import 'article';
+@import 'pictos';
+@import 'login';
+@import 'save';
+@import 'messages';
+
+/* Tools */
+@import 'media_queries';
+@import 'print';
+@import 'ratatouille';
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;
+}
diff --git a/app/Resources/static/themes/baggy/css/login.scss b/app/Resources/static/themes/baggy/css/login.scss
new file mode 100644
index 00000000..312df670
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/login.scss
@@ -0,0 +1,26 @@
+.login {
+  background-color: #333;
+
+  #main {
+    padding: 0;
+    margin: 0;
+  }
+
+  form {
+    background-color: #fff;
+    padding: 1.5em;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
+    width: 20em;
+    position: absolute;
+    top: 8em;
+    left: 50%;
+    margin-left: -10em;
+  }
+
+  .logo {
+    position: absolute;
+    top: 2em;
+    left: 50%;
+    margin-left: -55px;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/media_queries.scss b/app/Resources/static/themes/baggy/css/media_queries.scss
new file mode 100755
index 00000000..c33db0b3
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/media_queries.scss
@@ -0,0 +1,172 @@
+
+@media screen and (max-width: 1050px) {
+  .entry {
+    width: 49%;
+  }
+
+  .entry:nth-child(3n+1) {
+    margin-left: 1.5%;
+  }
+
+  .entry:nth-child(2n+1) {
+    margin-left: 0;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #article {
+    width: 80%;
+  }
+
+  .topPosF {
+    right: 2.5em;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .entry {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  #display-mode {
+    display: none;
+  }
+}
+
+@media screen and (max-height: 770px) {
+  .menu.users,
+  .menu.internal,
+  .menu.developer {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .entry {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  body > header {
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 3em;
+    z-index: 11;
+  }
+
+  #links li:last-child {
+    position: static;
+    width: auto;
+  }
+
+  #links li:last-child a::before {
+    content: none;
+  }
+
+  .logo {
+    width: 1.25em;
+    height: 1.25em;
+    left: 0;
+    top: 0;
+  }
+
+  .login > header {
+    position: static;
+  }
+
+  .login form {
+    width: 100%;
+    position: static;
+    margin-left: 0;
+  }
+
+  .login .logo {
+    height: auto;
+    top: 0.5em;
+    width: 75px;
+    margin-left: -37.5px;
+  }
+
+  .desktopHide {
+    display: block;
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    border: 0;
+    width: 2.5em;
+    height: 2.5em;
+    cursor: pointer;
+    background-color: #999;
+    font-size: 1.2em;
+  }
+
+  .desktopHide:hover,
+  .desktopHide:focus {
+    background-color: #fff;
+  }
+
+  #links {
+    display: none;
+    width: 100%;
+    height: auto;
+    padding-top: 3em;
+  }
+
+  #links.menu--open {
+    display: block;
+  }
+
+  footer {
+    position: static;
+    margin-right: 3em;
+  }
+
+  #main {
+    margin-left: 1.5em;
+    padding-right: 1.5em;
+    position: static;
+    margin-top: 3em;
+  }
+
+  .card-entry-labels {
+    display: none;
+  }
+
+  #article_toolbar .topPosF {
+    display: none;
+  }
+
+  #article {
+    width: 100%;
+  }
+
+  #article h1 {
+    font-size: 1.5em;
+  }
+
+  #article_toolbar a {
+    padding: 0.3em 0.4em 0.2em;
+  }
+
+  #display-mode {
+    display: none;
+  }
+
+  .popup-form,
+  #bagit-form,
+  #search-form {
+    left: 0;
+    width: 100%;
+    border-left: none;
+  }
+
+  .popup-form form,
+  #bagit-form form,
+  #search-form form {
+    width: 100%;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/messages.css b/app/Resources/static/themes/baggy/css/messages.css
deleted file mode 100755
index bfaf1448..00000000
--- a/app/Resources/static/themes/baggy/css/messages.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.messages.error.install {
-  border: 1px solid #c42608;
-  color: #c00 !important;
-  background: #fff0ef;
-  text-align: left;
-}
-
-.messages.notice.install {
-  border: 1px solid #ebcd41;
-  color: #000;
-  background: #fffcd3;
-  text-align: left;
-}
-
-.messages.success.install {
-  border: 1px solid #6dc70c;
-  background: #e0fbcc !important;
-  text-align: left;
-}
diff --git a/app/Resources/static/themes/baggy/css/messages.scss b/app/Resources/static/themes/baggy/css/messages.scss
new file mode 100755
index 00000000..a388419e
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/messages.scss
@@ -0,0 +1,50 @@
+/* ==========================================================================
+   Messages
+   ========================================================================== */
+
+.messages {
+  text-align: left;
+  width: 60%;
+  margin: auto 17%;
+
+  > * {
+    display: inline-block;
+  }
+
+  .install {
+    text-align: left;
+
+    &.error {
+      border: 1px solid #c42608;
+      color: #c00 !important;
+      background: #fff0ef;
+    }
+
+    &.notice {
+      border: 1px solid #ebcd41;
+      color: #000;
+      background: #fffcd3;
+    }
+
+    &.success {
+      border: 1px solid #6dc70c;
+      background: #e0fbcc !important;
+    }
+  }
+}
+
+.warning {
+  font-weight: bold;
+  display: block;
+  width: 100%;
+}
+
+.more-info {
+  font-size: 0.85em;
+  line-height: 1.5;
+  color: #aaa;
+
+  a {
+    color: #aaa;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/pictos.scss b/app/Resources/static/themes/baggy/css/pictos.scss
new file mode 100644
index 00000000..2ff01937
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/pictos.scss
@@ -0,0 +1,210 @@
+/* ==========================================================================
+   Pictos
+   ========================================================================== */
+
+@font-face {
+  font-family: icomoon;
+  src: url('~icomoon-free-npm/Font/IcoMoon-Free.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1em;  /* Preferred icon size */
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+
+  .md-18 { font-size: 18px; }
+  .md-24 { font-size: 24px; }
+  .md-36 { font-size: 36px; }
+  .md-48 { font-size: 48px; }
+
+  .vertical-align-middle {
+    vertical-align: middle !important;
+  }
+}
+
+.icon span,
+.icon-image span {
+  position: absolute;
+  top: -9999px;
+}
+
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
+  font-family: icomoon;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  -o-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-flattr::before {
+  content: "\ead4";
+}
+
+.icon-mail::before {
+  content: "\ea86";
+}
+
+.icon-up-open::before {
+  content: "\e80b";
+}
+
+.icon-star::before {
+  content: "\e9d9";
+}
+
+.icon-check::before {
+  content: "\ea10";
+}
+
+.icon-link::before {
+  content: "\e9cb";
+}
+
+.icon-reply::before {
+  content: "\e806";
+}
+
+.icon-menu::before {
+  content: "\e9bd";
+}
+
+.icon-clock::before {
+  content: "\e803";
+}
+
+.icon-twitter::before {
+  content: "\ea96";
+}
+
+.icon-down-open::before {
+  content: "\e809";
+}
+
+.icon-trash::before {
+  content: "\e9ac";
+}
+
+.icon-delete::before {
+  content: "\ea0d";
+}
+
+.icon-power::before {
+  content: "\ea14";
+}
+
+.icon-arrow-up-thick::before {
+  content: "\ea3a";
+}
+
+.icon-rss::before {
+  content: "\e808";
+}
+
+.icon-print::before {
+  content: "\e954";
+}
+
+.icon-reload::before {
+  content: "\ea2e";
+}
+
+.icon-price-tags::before {
+  content: "\e936";
+}
+
+.icon-eye::before {
+  content: "\e9ce";
+}
+
+.icon-no-eye::before {
+  content: "\e9d1";
+}
+
+.icon-calendar::before {
+  content: "\e953";
+}
+
+.icon-time::before {
+  content: "\e952";
+}
+
+/* .icon-image class, for image-based icons
+  ========================================================================== */
+
+.icon-image {
+  background: no-repeat center/80%;
+  padding-right: 1em !important;
+  padding-left: 1em !important;
+}
+
+/* Carrot (http://carrot.org) */
+.icon-image--carrot {
+  background-image: url("../../_global/img/icons/carrot-icon--white.png");
+}
+
+/* Diaspora */
+.icon-image--diaspora {
+  background-image: url("../../_global/img/icons/Diaspora-asterisk.svg");
+}
+
+/* Unmark.it */
+.icon-image--unmark {
+  background-image: url("../../_global/img/icons/unmark-icon--black.png");
+}
+
+/* shaarli */
+.icon-image--shaarli {
+  background-image: url("../../_global/img/icons/shaarli.png");
+}
+
+/* ==========================================================================
+   Icon selected
+   ========================================================================== */
+
+.icon-star.fav::before {
+  color: #fff;
+}
+
+.icon-check.archive::before {
+  color: #fff;
+}
diff --git a/app/Resources/static/themes/baggy/css/print.css b/app/Resources/static/themes/baggy/css/print.css
deleted file mode 100755
index f7f6a8ad..00000000
--- a/app/Resources/static/themes/baggy/css/print.css
+++ /dev/null
@@ -1,66 +0,0 @@
-@media print {
-  /* ### Layout ### */
-
-  body {
-    font-family: Serif;
-    background-color: #fff;
-  }
-
-  @page {
-    margin: 1cm;
-  }
-
-  img {
-    max-width: 100% !important;
-  }
-
-  /* ### Content ### */
-
-  /* Hide useless blocks */
-  body > header,
-  #article_toolbar,
-  #links,
-  #sort,
-  body > footer,
-  .top_link,
-  div.tools,
-  header div,
-  .messages,
-  .entrie + .results,
-  #article .mbm a,
-  #article-informations {
-    display: none !important;
-  }
-
-  article {
-    border: none !important;
-  }
-
-  /* Add URL after links */
-  .vieworiginal a::after {
-    content: " (" attr(href) ")";
-  }
-
-  /* Add explanation after abbr */
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /* Change border on current pager item */
-  .pagination span.current {
-    border-style: dashed;
-  }
-
-  #main {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    margin-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-  }
-
-  #article {
-    width: 100%;
-  }
-}
diff --git a/app/Resources/static/themes/baggy/css/print.scss b/app/Resources/static/themes/baggy/css/print.scss
new file mode 100755
index 00000000..a63f62e9
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/print.scss
@@ -0,0 +1,63 @@
+@media print {
+  /* ### Layout ### */
+
+  body {
+    font-family: Serif;
+    background-color: #fff;
+  }
+
+  @page {
+    margin: 1cm;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  /* ### Content ### */
+
+  /* Hide useless blocks */
+  body > .logo,
+  #article_toolbar,
+  #links,
+  #sort,
+  body > footer,
+  .top_link,
+  div.tools,
+  header div,
+  .messages,
+  .entrie + .results,
+  #article .mbm a,
+  #article-informations {
+    display: none !important;
+  }
+
+  article {
+    border: none !important;
+  }
+
+  /* Add URL after links */
+  .vieworiginal a::after {
+    content: " (" attr(href) ")";
+  }
+
+  /* Add explanation after abbr */
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /* Change border on current pager item */
+  .pagination span.current {
+    border-style: dashed;
+  }
+
+  #main {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #article {
+    width: 100%;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.css
deleted file mode 100644
index a6167f34..00000000
--- a/app/Resources/static/themes/baggy/css/ratatouille.css
+++ /dev/null
@@ -1,226 +0,0 @@
-/*
-  Ratatouille mini Framework css by Thomas LEBEAU
-  Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
-  and normalize.css
-*/
-
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-body {
-  font-size: 1em;
-  line-height: 1.5;
-  margin: 0;
-}
-
-/* ==========================================================================
-   Mise en forme
-   ========================================================================== */
-
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child,
-h6:first-child,
-p:first-child,
-ul:first-child,
-ol:first-child,
-dl:first-child {
-  margin-top: 0;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, serif;
-}
-
-pre {
-  white-space: pre-wrap;
-}
-
-.upper {
-  text-transform: uppercase;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.inner {
-  margin: 0 auto;
-  max-width: 61.25em; /* 980px */
-}
-
-table,
-img,
-figure {
-  max-width: 100%;
-  height: auto;
-}
-
-iframe {
-  max-width: 100%;
-}
-
-.fl {
-  float: left;
-}
-
-.fr {
-  float: right;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-figure {
-  margin: 0;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  margin: 0;
-}
-
-input[type="search"] {
-  -webkit-appearance: textfield;
-}
-
-/* ==========================================================================
-   Mise en page
-   ========================================================================== */
-
-.dib {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.dnone {
-  display: none;
-}
-
-.dtable {
-  display: table;
-}
-
-.dtable > * {
-  display: table-row;
-}
-
-.dtable > * > * {
-  display: table-cell;
-}
-
-.element-invisible {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.small {
-  font-size: 0.8em;
-}
-
-.big {
-  font-size: 1.2em;
-}
-
-/* Width */
-
-.w100 {
-  width: 100%;
-}
-
-.w90 {
-  width: 90%;
-}
-
-.w80 {
-  width: 80%;
-}
-
-.w70 {
-  width: 70%;
-}
-
-.w60 {
-  width: 60%;
-}
-
-.w50 {
-  width: 50%;
-}
-
-.w40 {
-  width: 40%;
-}
-
-.w30 {
-  width: 30%;
-}
-
-.w20 {
-  width: 20%;
-}
-
-.w10 {
-  width: 10%;
-}
-
-/* ==========================================================================
-   Internet Explorer
-   ========================================================================== */
-
-/* IE8 and IE9 */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/* IE8 and IE9 */
-
-audio,
-canvas,
-video {
-  display: inline-block;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  select {
-    -webkit-appearance: none;
-    border-radius: 0;
-  }
-}
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.scss b/app/Resources/static/themes/baggy/css/ratatouille.scss
new file mode 100644
index 00000000..a6167f34
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/ratatouille.scss
@@ -0,0 +1,226 @@
+/*
+  Ratatouille mini Framework css by Thomas LEBEAU
+  Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
+  and normalize.css
+*/
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+body {
+  font-size: 1em;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ==========================================================================
+   Mise en forme
+   ========================================================================== */
+
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child,
+p:first-child,
+ul:first-child,
+ol:first-child,
+dl:first-child {
+  margin-top: 0;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+.upper {
+  text-transform: uppercase;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.inner {
+  margin: 0 auto;
+  max-width: 61.25em; /* 980px */
+}
+
+table,
+img,
+figure {
+  max-width: 100%;
+  height: auto;
+}
+
+iframe {
+  max-width: 100%;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+figure {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+/* ==========================================================================
+   Mise en page
+   ========================================================================== */
+
+.dib {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.dnone {
+  display: none;
+}
+
+.dtable {
+  display: table;
+}
+
+.dtable > * {
+  display: table-row;
+}
+
+.dtable > * > * {
+  display: table-cell;
+}
+
+.element-invisible {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.big {
+  font-size: 1.2em;
+}
+
+/* Width */
+
+.w100 {
+  width: 100%;
+}
+
+.w90 {
+  width: 90%;
+}
+
+.w80 {
+  width: 80%;
+}
+
+.w70 {
+  width: 70%;
+}
+
+.w60 {
+  width: 60%;
+}
+
+.w50 {
+  width: 50%;
+}
+
+.w40 {
+  width: 40%;
+}
+
+.w30 {
+  width: 30%;
+}
+
+.w20 {
+  width: 20%;
+}
+
+.w10 {
+  width: 10%;
+}
+
+/* ==========================================================================
+   Internet Explorer
+   ========================================================================== */
+
+/* IE8 and IE9 */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/* IE8 and IE9 */
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    -webkit-appearance: none;
+    border-radius: 0;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/save.scss b/app/Resources/static/themes/baggy/css/save.scss
new file mode 100644
index 00000000..ade77b40
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/save.scss
@@ -0,0 +1,115 @@
+/* ==========================================================================
+  "save a link" related styles
+  ========================================================================== */
+
+.popup-form {
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 10em;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  margin-top: -30% !important;
+  padding: 2em;
+  display: none;
+  border-left: 1px #eee solid;
+
+  form {
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    border: 10px solid #000;
+    width: 400px;
+    height: 200px;
+    padding: 2em;
+  }
+}
+
+#bagit-form-form .addurl {
+  margin-left: 0;
+}
+
+.closeMessage,
+.close-button {
+  background-color: #000;
+  color: #fff;
+  font-size: 1.2em;
+  line-height: 1.6;
+  width: 1.6em;
+  height: 1.6em;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    background-color: #999;
+    color: #000;
+  }
+}
+
+.close-button--popup {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 1.4em;
+}
+
+.active-current {
+  background-color: #999;
+
+  &::after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 10px solid transparent;
+    border-right-color: #eee;
+    right: 0;
+    top: 50%;
+    margin-top: -10px;
+  }
+}
+
+.opacity03 {
+  opacity: 0.3;
+}
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 3px 2px;
+}
+
+a.add-to-wallabag-link-after {
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  transition-duration: 2s;
+  transition-timing-function: ease-out;
+}
+
+#article article a:hover + a.add-to-wallabag-link-after,
+a.add-to-wallabag-link-after:hover {
+  opacity: 1;
+  visibility: visible;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+}
+
+a.add-to-wallabag-link-after::after {
+  content: "w";
+}
+
+#add-link-result {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.btn-clickable {
+  cursor: pointer;
+}
-- 
cgit v1.2.3