From 0583c9b043567a9e1841eba1c662f8050a58a591 Mon Sep 17 00:00:00 2001
From: Loic Huder <loic.huder@univ-grenoble-alpes.fr>
Date: Fri, 13 Dec 2019 09:47:14 +0100
Subject: [PATCH] CSS files are now generated from SCSS
---
webgeodyn/www/css/css.css | 217 ++++++++++++++++++------------------
webgeodyn/www/css/css.scss | 181 ++++++++++++++++++++++++++++++
webgeodyn/www/css/flex.css | 27 ++---
webgeodyn/www/css/flex.scss | 79 +++++++++++++
4 files changed, 373 insertions(+), 131 deletions(-)
create mode 100644 webgeodyn/www/css/css.scss
create mode 100644 webgeodyn/www/css/flex.scss
diff --git a/webgeodyn/www/css/css.css b/webgeodyn/www/css/css.css
index 8a66898..1866697 100644
--- a/webgeodyn/www/css/css.css
+++ b/webgeodyn/www/css/css.css
@@ -1,167 +1,162 @@
-.small.ui.dropdown {
- font-size: 0.8rem!important;
-}
-.small.ui.dropdown * {
- font-size: 0.8rem!important;
-}
-
-.alertmessages {
- width: 20rem;
- max-height: calc(100vh - 3rem);
- overflow-y: auto;
- z-index: 100000;
- position: fixed;
- top: 1.5rem;
- right: 1.5rem;
- margin:0;
+/* GENERAL RULES */
+body {
+ background-color: #e8e8e8;
}
-.alertmessages .closebtn {
- position: fixed !important;
- top:2rem;
- right:2.5rem;
- z-index: 100;
- padding: 0.3rem 0.5rem !important;
+.indented {
+ padding-left: 1em;
}
-.alertmessages .ui.message {
- margin: 0 0 0.2rem 0;
+.bare {
+ padding: 0;
+ margin: 0;
}
-.mainmenu {
- background: #2185D0;
+.nomargin {
+ margin: 0;
}
-#tabMenu img{
- width: 4rem;
+.loadingbackground {
+ opacity: 0.5;
}
.disabled img {
- -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
- filter: grayscale(100%);
-}
-
-.compact.multiple.dropdown .delete.icon{
- margin-left: 0.1rem;
+ -webkit-filter: grayscale(100%);
+ /* Safari 6.0 - 9.0 */
+ filter: grayscale(100%);
}
-.compact.multiple.dropdown .ui.label{
+#maincontentdiv,
+#maincontentdiv > div.plot,
+#maincontentdiv > div.ui.black.label {
margin: 0;
- padding: 0.45rem 0.3rem;
}
-.loadingbackground {
- opacity: 0.5;
+div#footer {
+ background-color: white;
+ margin: 0.5rem 0 0;
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
}
-
-.mainmenu .active.item, .obstypechoice .active.item {
- background: rgba(33,133,208,0.1)!important;
+div.ui.label.divheader {
+ width: 100%;
+ opacity: 0.7;
+ text-align: center;
+ border-radius: 0;
+}
+div.ui.segment.plot {
+ padding: 0;
+}
+div.ui.stackable.three.column.centered.grid > div.column {
+ text-align: center;
+ min-width: 20rem;
+ padding: 0.5rem;
+ border: rgba(0, 0, 0, 0.2) solid 1px;
}
+/* MENUS */
+.mainmenu {
+ background: #2185D0;
+}
+.mainmenu .active.item {
+ background: rgba(33, 133, 208, 0.1) !important;
+}
.mainmenu .item {
- padding: 0.5rem!important;
+ padding: 0.5rem !important;
+}
+
+.obstypechoice .active.item {
+ background: rgba(33, 133, 208, 0.1) !important;
}
+.mainmenucontainer {
+ width: 20rem;
+ -webkit-transition: width 0.25s, height 0.25s;
+ /* Safari */
+ transition: width 0.25s, height 0.25s;
+}
.mainmenucontainer .mainmenu .header {
opacity: 1;
/*height: 4.5rem;*/
- -webkit-transition: height 0.3s linear,width 0.3s linear, opacity 0.3s linear; /* Safari */
- transition: height 0.3s linear,width 0.3s linear, opacity 0.3s linear;
+ -webkit-transition: height 0.3s linear, width 0.3s linear, opacity 0.3s linear;
+ /* Safari */
+ transition: height 0.3s linear, width 0.3s linear, opacity 0.3s linear;
transition-delay: 0.5s;
}
-
.mainmenucontainer.smallmenu .mainmenu .header {
opacity: 0;
- height: 0!important;
- -webkit-transition: height 0s linear,width 0s linear, opacity 0s linear;
- transition: height 0s linear,width 0s linear, opacity 0s linear;
+ height: 0 !important;
+ -webkit-transition: height 0s linear, width 0s linear, opacity 0s linear;
+ transition: height 0s linear, width 0s linear, opacity 0s linear;
transition-delay: 0s;
}
-.mainmenucontainer {
- width: 20rem;
- -webkit-transition: width 0.25s, height 0.25s; /* Safari */
- transition: width 0.25s, height 0.25s;
-}
-
.smallmenu {
width: 6rem;
- -webkit-transition: width 0.25s, height 0.25s; /* Safari */
+ -webkit-transition: width 0.25s, height 0.25s;
+ /* Safari */
transition: width 0.25s, height 0.25s;
transition-delay: 0s;
}
-.indented
-{
- padding-left: 1em;
+#tabMenu img {
+ width: 4rem;
}
-.bare{
- padding: 0;
+#togglemenusize {
+ background-color: #3c3c3c;
+ padding: 0.3rem;
+ text-align: center;
+ cursor: pointer;
+}
+
+.small.ui.dropdown {
+ font-size: 0.8rem !important;
+}
+.small.ui.dropdown * {
+ font-size: 0.8rem !important;
+}
+
+/* ADDITIONAL RULES */
+.alertmessages {
+ width: 20rem;
+ max-height: calc(100vh - 3rem);
+ overflow-y: auto;
+ z-index: 100000;
+ position: fixed;
+ top: 1.5rem;
+ right: 1.5rem;
margin: 0;
}
+.alertmessages .closebtn {
+ position: fixed !important;
+ top: 2rem;
+ right: 2.5rem;
+ z-index: 100;
+ padding: 0.3rem 0.5rem !important;
+}
+.alertmessages .ui.message {
+ margin: 0 0 0.2rem 0;
+}
-.nomargin
-{
+.compact.multiple.dropdown .delete.icon {
+ margin-left: 0.1rem;
+}
+.compact.multiple.dropdown .ui.label {
margin: 0;
+ padding: 0.45rem 0.3rem;
}
-#info-banner
-{
+/* BANNER */
+#info-banner {
background: dodgerblue;
color: white;
padding: 10px 5px 10px 0;
margin-bottom: 0;
}
-
-#info-banner a
-{
+#info-banner a {
color: orange;
text-decoration: underline;
}
-
#info-banner .close_button {
- cursor: pointer;
-}
-
-
-#maincontentdiv,
-#maincontentdiv > div.plot,
-#maincontentdiv > div.ui.black.label {
- margin: 0;
-}
-
-div.ui.label.divheader {
- width:100%;
- opacity:0.7;
- text-align:center;
- border-radius: 0;
-}
-
-div.ui.segment.plot {
- padding: 0;
+ cursor: pointer;
}
-
-div#footer {
- background-color: white;
- margin: 0.5rem 0 0;
- border-top: 1px solid rgba(34, 36, 38, 0.15);
-}
-
-body {
- background-color: #e8e8e8;
-}
-
-#togglemenusize {
- background-color:rgb(60,60,60);
- padding:0.3rem;
- text-align:center;
- cursor:pointer;
-}
-
-div.ui.stackable.three.column.centered.grid > div.column {
- text-align:center;
- min-width:20rem;
- padding: 0.5rem;
- border: rgba(0,0,0,0.2) solid 1px;
-}
\ No newline at end of file
diff --git a/webgeodyn/www/css/css.scss b/webgeodyn/www/css/css.scss
new file mode 100644
index 0000000..fa18ec0
--- /dev/null
+++ b/webgeodyn/www/css/css.scss
@@ -0,0 +1,181 @@
+$active_color: rgba(33, 133, 208, 0.1);
+
+/* GENERAL RULES */
+body {
+ background-color: #e8e8e8;
+}
+
+.indented {
+ padding-left: 1em;
+}
+
+.bare {
+ padding: 0;
+ margin: 0;
+}
+
+.nomargin {
+ margin: 0;
+}
+
+.loadingbackground {
+ opacity: 0.5;
+}
+
+
+.disabled img {
+ -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+ filter: grayscale(100%);
+}
+
+#maincontentdiv,
+#maincontentdiv > div.plot,
+#maincontentdiv > div.ui.black.label {
+ margin: 0;
+}
+
+div{
+
+ &#footer {
+ background-color: white;
+ margin: 0.5rem 0 0;
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
+ }
+
+ &.ui.label.divheader {
+ width:100%;
+ opacity:0.7;
+ text-align:center;
+ border-radius: 0;
+ }
+
+ &.ui.segment.plot {
+ padding: 0;
+ }
+
+ &.ui.stackable.three.column.centered.grid > div.column {
+ text-align:center;
+ min-width:20rem;
+ padding: 0.5rem;
+ border: rgba(0,0,0,0.2) solid 1px;
+ }
+}
+
+/* MENUS */
+
+.mainmenu {
+ background: #2185D0;
+
+ .active.item {
+ background: $active_color !important;
+ }
+
+ .item {
+ padding: 0.5rem !important;
+ }
+}
+
+.obstypechoice .active.item {
+ background: $active_color !important;
+}
+
+.mainmenucontainer {
+ width: 20rem;
+ -webkit-transition: width 0.25s, height 0.25s; /* Safari */
+ transition: width 0.25s, height 0.25s;
+ .mainmenu .header {
+ opacity: 1;
+ /*height: 4.5rem;*/
+ -webkit-transition: height 0.3s linear, width 0.3s linear, opacity 0.3s linear; /* Safari */
+ transition: height 0.3s linear, width 0.3s linear, opacity 0.3s linear;
+ transition-delay: 0.5s;
+ }
+
+ &.smallmenu .mainmenu .header {
+ opacity: 0;
+ height: 0 !important;
+ -webkit-transition: height 0s linear, width 0s linear, opacity 0s linear;
+ transition: height 0s linear, width 0s linear, opacity 0s linear;
+ transition-delay: 0s;
+ }
+}
+
+.smallmenu {
+ width: 6rem;
+ -webkit-transition: width 0.25s, height 0.25s; /* Safari */
+ transition: width 0.25s, height 0.25s;
+ transition-delay: 0s;
+}
+
+#tabMenu img{
+ width: 4rem;
+}
+
+
+#togglemenusize {
+ background-color:rgb(60,60,60);
+ padding:0.3rem;
+ text-align:center;
+ cursor:pointer;
+}
+
+.small.ui.dropdown {
+ font-size: 0.8rem !important;
+
+ * {
+ font-size: 0.8rem !important;
+ }
+}
+
+/* ADDITIONAL RULES */
+.alertmessages {
+ width: 20rem;
+ max-height: calc(100vh - 3rem);
+ overflow-y: auto;
+ z-index: 100000;
+ position: fixed;
+ top: 1.5rem;
+ right: 1.5rem;
+ margin:0;
+
+ .closebtn {
+ position: fixed !important;
+ top: 2rem;
+ right: 2.5rem;
+ z-index: 100;
+ padding: 0.3rem 0.5rem !important;
+ }
+
+ .ui.message {
+ margin: 0 0 0.2rem 0;
+ }
+}
+
+.compact.multiple.dropdown {
+ .delete.icon {
+ margin-left: 0.1rem;
+ }
+
+ .ui.label {
+ margin: 0;
+ padding: 0.45rem 0.3rem;
+ }
+}
+
+
+/* BANNER */
+#info-banner {
+ background: dodgerblue;
+ color: white;
+ padding: 10px 5px 10px 0;
+ margin-bottom: 0;
+
+ a {
+ color: orange;
+ text-decoration: underline;
+ }
+
+ .close_button {
+ cursor: pointer;
+ }
+}
diff --git a/webgeodyn/www/css/flex.css b/webgeodyn/www/css/flex.css
index e979c2e..de0fde0 100644
--- a/webgeodyn/www/css/flex.css
+++ b/webgeodyn/www/css/flex.css
@@ -1,78 +1,65 @@
/**
* Flexbox elements definition
*/
-
/* CONTAINER */
._flexcontainer {
display: flex;
flex-direction: row;
- /*padding: 0.5rem;*/
}
-
._flexcontainer._column {
flex-direction: column;
}
-
._flexcontainer.wrap {
flex-wrap: wrap;
}
-
._flexcontainer._centered {
justify-content: center;
}
-
._flexcontainer._rightalign {
justify-content: flex-end;
}
-
._flexcontainer._spaced {
justify-content: space-around;
}
-
._flexcontainer._vcentered {
align-items: center;
}
-
._flexcontainer._flex-end {
align-items: flex-end;
}
-
._flexcontainer._flex-start {
align-items: flex-start;
}
-
._flexcontainer._baseline {
align-items: baseline;
}
-
._flexcontainer._stretch {
align-items: stretch;
}
/* FLEXBOXES */
-
._flexfixedsize {
- flex:0 0 auto;
- margin: 0.5rem;
+ flex: 0 0 auto;
}
._flex {
- flex:1 1 auto;
- margin: 0.5rem;
+ flex: 1 1 auto;
}
+._flex, ._flexfixedsize {
+ margin: 0.5rem;
+}
._flex._center, ._flexfixedsize._center {
align-self: center;
}
-
._flex._flex-start, ._flexfixedsize._flex-start {
align-self: flex-start;
}
-
._flex._flex-end, ._flexfixedsize._flex-end {
align-self: flex-end;
}
-
._flex._stretch, ._flexfixedsize._stretch {
align-self: stretch;
}
+
+/*# sourceMappingURL=flex.css.map */
diff --git a/webgeodyn/www/css/flex.scss b/webgeodyn/www/css/flex.scss
new file mode 100644
index 0000000..127b7a3
--- /dev/null
+++ b/webgeodyn/www/css/flex.scss
@@ -0,0 +1,79 @@
+/**
+ * Flexbox elements definition
+ */
+
+/* CONTAINER */
+._flexcontainer {
+ display: flex;
+ flex-direction: row;
+
+ &._column {
+ flex-direction: column;
+ }
+
+ &.wrap {
+ flex-wrap: wrap;
+ }
+
+ &._centered {
+ justify-content: center;
+ }
+
+ &._rightalign {
+ justify-content: flex-end;
+ }
+
+ &._spaced {
+ justify-content: space-around;
+ }
+
+ &._vcentered {
+ align-items: center;
+ }
+
+ &._flex-end {
+ align-items: flex-end;
+ }
+
+ &._flex-start {
+ align-items: flex-start;
+ }
+
+ &._baseline {
+ align-items: baseline;
+ }
+
+ &._stretch {
+ align-items: stretch;
+ }
+}
+
+/* FLEXBOXES */
+
+._flexfixedsize {
+ flex:0 0 auto;
+}
+
+._flex {
+ flex:1 1 auto;
+}
+
+._flex, ._flexfixedsize {
+ margin: 0.5rem;
+
+ &._center {
+ align-self: center;
+ }
+
+ &._flex-start {
+ align-self: flex-start;
+ }
+
+ &._flex-end {
+ align-self: flex-end;
+ }
+
+ &._stretch {
+ align-self: stretch;
+ }
+}
--
GitLab