Reorganize and comment CSS in galette's theme

diff --git a/ui/semantic/galette/collections/form.overrides b/ui/semantic/galette/collections/form.overrides
index 25345fe84cf642cf5a10082a2e59302a0bd8d3d9..b43dd719263639f45e02f50448fca44eba6905ff 100644 (file)
--- a/ui/semantic/galette/collections/form.overrides
+++ b/ui/semantic/galette/collections/form.overrides
@@ -2,11 +2,9 @@
          Galette Overrides
 *******************************/
 
-
 /*--------------------
     Gaptcha Input
 ---------------------*/
-
 .ui.form input[type="gaptcha"] {
   width: 100px;
   vertical-align: top;
@@ -30,3 +28,22 @@
   box-shadow: @inputBoxShadow;
   transition: @inputTransition;
 }
+
+/*--------------------
+      Field
+---------------------*/
+.ui .fields:first-child:last-child {
+  margin-bottom: 0;
+}
+
+/*-------------------------
+      Filters' fields
+--------------------------*/
+.filters .fields .fields {
+  margin: 0;
+}
+
+.filters .fields .field.flexend {
+  display: flex;
+  align-items: flex-end;
+}

diff --git a/ui/semantic/galette/collections/form.variables b/ui/semantic/galette/collections/form.variables
index 3938db69f68ff10585b016c5b3b2f16e684edf5b..b4bcb895e0cecc5c88ee9f2001f291ff9a85f03e 100644 (file)
--- a/ui/semantic/galette/collections/form.variables
+++ b/ui/semantic/galette/collections/form.variables
@@ -1,3 +1,3 @@
 /*******************************
-    Galette Overrides
+    Galette Variables
 *******************************/

diff --git a/ui/semantic/galette/collections/table.overrides b/ui/semantic/galette/collections/table.overrides
index 9dc8eaeb7cc7ae668f3777af58d5ac80b416baef..aacf5424dcee356c5df33fcb62c19f57a2096573 100644 (file)
--- a/ui/semantic/galette/collections/table.overrides
+++ b/ui/semantic/galette/collections/table.overrides
@@ -20,6 +20,11 @@ table.listing tbody tr.even > td {
 table.listing tbody tr:hover > td {
     background-color: @activeLineBackgroundColor !important;
 }
+td.emptylist {
+    background-color: #eeeeee;
+    text-align: center;
+    font-style: italic;
+}
 
 /*-------------------------
      Membership status

diff --git a/ui/semantic/galette/elements/button.overrides b/ui/semantic/galette/elements/button.overrides
index f0df9e1f89cedb707207402e4534b321e4d556a2..3545248cc2f63329823b6a379cc604a5ac8aca61 100644 (file)
--- a/ui/semantic/galette/elements/button.overrides
+++ b/ui/semantic/galette/elements/button.overrides
@@ -2,16 +2,26 @@
          Galette Overrides
 *******************************/
 
+/*----------------------------------------------
+     Reset color of simple buttons with icon
+-----------------------------------------------*/
 a.ui.button i.icon,
 a.ui.button:hover i.icon {
   color: inherit;
 }
 
+/*-----------------------------------------------------------------
+     Darken default primary color (orange) on buttons
+------------------------------------------------------------------*/
 .ui.primary.button,
 .ui.primary.buttons .button {
   color: darken(@textColor, 15);
 }
 
+/*-----------------------------------------------------------------
+     Remove border radius on dropdown button when opened upward
+     Used for the batch actions menu
+------------------------------------------------------------------*/
 .ui.upward.dropdown.button:not(.pointing):not(.floating).batch-select-action.active {
   border-radius: 0;
 }
@@ -19,3 +29,23 @@ a.ui.button:hover i.icon {
 .ui.compact.button.delcriteria {
   margin-left: 1rem;
 }
+
+/*-------------------------------------------------
+     Dropdown actions button on member pages
+--------------------------------------------------*/
+.ui.floating.compact.labeled.dropdown.button {
+  .menu {
+    min-width: auto;
+  }
+  .label + .dropdown.icon {
+    margin-top: .4em;
+  }
+}
+
+/*----------------------------------------------
+     Resume existing email button
+-----------------------------------------------*/
+#recup_mailing.ui.tertiary.button,
+#recup_mailing.ui.button > .icon {
+  margin: 0 !important;
+}

diff --git a/ui/semantic/galette/elements/header.overrides b/ui/semantic/galette/elements/header.overrides
index c2eeeb4f8e9d7acaffdb7fcbc48f45ff7497fda0..92f70d01469674c590c86af16885466972f25398 100644 (file)
--- a/ui/semantic/galette/elements/header.overrides
+++ b/ui/semantic/galette/elements/header.overrides
@@ -2,12 +2,29 @@
          Galette Overrides
 *******************************/
 
+/*--------------------------
+     Page's main title
+---------------------------*/
 h1.ui.block.header {
   color: darken(@textColor, 15);
 }
 
+/*-------------------------------------------------------
+     Brand block on top of public pages and main menu
+--------------------------------------------------------*/
 .ui.block.brand.header {
   background: rgba(255,255,255,.6);
   box-shadow: @blockBoxShadow;
   border: 0px;
 }
+
+/*------------------------------------------------
+     Header with accordion style
+     To use attached with a segment
+-------------------------------------------------*/
+.ui.attached.accordion-styled.header {
+  background: @lightPrimaryColor;
+  color: darken(@textColor, 15);
+  border: 1px solid @primaryColor;
+  border-bottom: none;
+}

diff --git a/ui/semantic/galette/elements/segment.overrides b/ui/semantic/galette/elements/segment.overrides
index eff32f01171c96703bea225a45c725946c2aacba..881b3516cdf81b0164f8b4836fabf849f6a27627 100644 (file)
--- a/ui/semantic/galette/elements/segment.overrides
+++ b/ui/semantic/galette/elements/segment.overrides
@@ -2,7 +2,34 @@
        Galette Overrides
 *******************************/
 
+/*--------------------------
+     Ajax select members
+---------------------------*/
+#selected_members .bottom.segment {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/*------------------------------------------------
+     Actions buttons' container on member page
+-------------------------------------------------*/
 .ui.right.floated.segment {
   margin-top: 0;
   margin-right:0;
 }
+
+/*------------------------------------------------
+     Segment with accordion style
+     To use attached with a top header
+-------------------------------------------------*/
+.ui.attached.accordion-styled.segment {
+  border: 1px solid @primaryColor;
+  border-top: none;
+}
+
+/*-------------
+     No JS
+--------------*/
+.nojs .sortable-items .ui.segment {
+  cursor: auto;
+}

diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index 6eaa385d727f8c4255401655aacf7905fc309fe8..ad956bebdb570e5c3e5984e42ff8d64a5e83d2d9 100644 (file)
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -2,24 +2,32 @@
          Galette Overrides
 *******************************/
 
-html {
-  overflow: hidden;
-}
-
+/*---------------
+     Global
+----------------*/
 .displaynone {
   display: none !important;
 }
 
-#back2top {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 2;
-  opacity: 0.45;
+.language span {
+  text-transform: uppercase;
 }
 
-#back2top:hover {
-  opacity: 1;
+/*--------------------------------
+     Base layout and navigation
+---------------------------------*/
+html {
+  overflow: hidden;
+}
+
+body.pushable:not(.loggedin) > .pusher {
+    display: flex;
+    justify-content: center;
+}
+
+section.content,
+.front-page section:not(.content) {
+  padding: 1.25rem;
 }
 
 #top-navbar,
@@ -37,23 +45,18 @@ aside.computer.toc {
   margin-left: .5rem;
 }
 
-.language span {
-  text-transform: uppercase;
+.ui.grid.align-items-center {
+  align-items: center;
 }
 
-body.pushable:not(.loggedin) > .pusher {
-    display: flex;
-    justify-content: center;
+.ui.grid > aside.column:not(.row) {
+  padding-bottom: 2rem;
 }
 
 .ui.fixed.menu + .pusher {
   padding-top: 4.5rem;
 }
 
-.ui.grid > aside.column:not(.row) {
-  padding-bottom: 2rem;
-}
-
 aside.toc {
   display: none;
 }
@@ -63,102 +66,12 @@ aside .ui.vertical.menu {
   max-width: 100%;
 }
 
-section.content,
-.front-page section:not(.content) {
-  padding: 1.25rem;
-}
-
-#recup_mailing.ui.tertiary.button,
-#recup_mailing.ui.button > .icon {
-  margin: 0 !important;
-}
-
-#main-activities a i {
-  opacity: .6;
-}
-
-#main-activities a:hover i {
-  opacity: 1;
-  color: @primaryColor;
-}
-
-#main-activities .header {
-  color: @textColor;
-}
-
-.ui.floating.compact.labeled.dropdown.button {
-  .menu {
-    min-width: auto;
-  }
-  .label + .dropdown.icon {
-    margin-top: .4em;
-  }
-}
-
-.filters .fields .fields {
-  margin: 0;
-}
-
-.filters .fields .field.flexend {
-  display: flex;
-  align-items: flex-end;
-}
-
-.ui .fields:first-child:last-child {
-  margin-bottom: 0;
-}
-
-.ui.attached.accordion-styled.header,
-.ui.attached.accordion-styled.segment {
-  border: 1px solid @primaryColor;
-}
-.ui.attached.accordion-styled.header {
-  background: @lightPrimaryColor;
-  color: darken(@textColor, 15);
-  border-bottom: none;
-}
-.ui.attached.accordion-styled.segment {
-  border-top: none;
-}
-
-details.ui.basic.styled.accordion .title {
-  background: transparent;
-  color: @textColor;
-}
-
-ul.sortable-items {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-.sortable-items {
-  .ui.segment {
-    cursor: move;
-    background-color: @evenLineBackgroundColor;
-
-    &:hover {
-      background-color: @activeLineBackgroundColor;
-    }
-  }
-}
-
 footer,
 footer .ui.horizontal.list .list > .item,
 footer .ui.horizontal.list > .item{
   font-size: .95rem;
 }
 
-#selected_members {
-  .bottom.segment {
-    max-height: 320px;
-    overflow-y: auto;
-  }
-}
-
-.ui.grid.align-items-center {
-  align-items: center;
-}
-
 @media only screen and (max-width: 991px) {
   #top-navbar .item:not(.header):not(.toc) {
     display: none;
@@ -173,9 +86,7 @@ footer .ui.horizontal.list > .item{
       overflow-x: visible;
       -webkit-overflow-scrolling: auto;
   }
-  .loggedin .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) {
-    display: none;
-  }
+  .loggedin .ui.top.menu:not(.vertical):not(.tabular):not(.tabs),
   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.header,
   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.toc {
     display: none;
@@ -183,6 +94,7 @@ footer .ui.horizontal.list > .item{
   .loggedin .ui.fixed.menu + .pusher {
     padding-top: 0;
   }
+
   aside.toc {
     display: block;
     position: fixed !important;
@@ -191,15 +103,18 @@ footer .ui.horizontal.list > .item{
     width: 260px;
     padding: 1.25rem;
   }
+
   body:not(.front-page) section.content {
     margin-left: 260px;
     flex: 1 1 auto;
     padding: 1.25rem;
   }
+
   section.desktop .container {
     max-width: 695px;
     margin: 0 auto;
   }
+
   /*
    * .pusher doesn't play well with sticky position children.
    * It is required for sidebars, which are only used at the moment on
@@ -220,14 +135,67 @@ footer .ui.horizontal.list > .item{
   aside.toc {
     width: 350px;
   }
+
   body:not(.front-page) section.content {
     margin-left: 350px;
   }
+
   section.desktop .container {
     max-width: 850px;
   }
 }
 
+/*---------------------------------
+    Desktop main activities
+----------------------------------*/
+#main-activities a i {
+  opacity: .6;
+}
+
+#main-activities a:hover i {
+  opacity: 1;
+  color: @primaryColor;
+}
+
+#main-activities .header {
+  color: @textColor;
+}
+
+/*-----------------------
+    Sortable items
+------------------------*/
+ul.sortable-items {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sortable-items {
+  .ui.segment {
+    cursor: move;
+    background-color: @evenLineBackgroundColor;
+
+    &:hover {
+      background-color: @activeLineBackgroundColor;
+    }
+  }
+}
+
+/*-------------------------
+    Back top top button
+--------------------------*/
+#back2top {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  opacity: 0.45;
+}
+
+#back2top:hover {
+  opacity: 1;
+}
+
 /*------------------------------------------------
     Fix conflicts between SUI and icons classes
 -------------------------------------------------*/
@@ -246,9 +214,11 @@ footer .ui.horizontal.list > .item{
 .note-modal .note-group-select-from-files {
   display: none !important;
 }
+
 .note-modal.open {
   background: rgba(0,0,0,0.5);
 }
+
 .note-modal .note-modal-content {
   position: fixed;
   top: 50%;
@@ -256,27 +226,21 @@ footer .ui.horizontal.list > .item{
   transform: translateX(-50%) translateY(-50%);
   margin: 30px 0;
 }
+
 .required .note-editable {
   font-weight: normal;
 }
+
 .note-modal .note-modal-footer {
   height: 62px;
 }
+
 .note-modal .note-btn {
   padding: 10px;
 }
+
 @media only screen and (min-width: 768px) {
   .note-modal-content {
     margin: 0;
   }
 }
-
-/*-------------
-     No JS
---------------*/
-.nojs select[multiple].ui.dropdown {
-  height: 7rem;
-}
-.nojs .sortable-items .ui.segment {
-  cursor: auto;
-}

diff --git a/ui/semantic/galette/modules/accordion.overrides b/ui/semantic/galette/modules/accordion.overrides
index ffed306f7d81ac865a3ff9d849af78cb1558a112..c0397bf4fb0e0ebba2c99890a2cf7d65d029d9cc 100644 (file)
--- a/ui/semantic/galette/modules/accordion.overrides
+++ b/ui/semantic/galette/modules/accordion.overrides
@@ -2,21 +2,38 @@
          Galette Overrides
 *******************************/
 
+/*---------------------------------------------
+     Accordions' title brackground color
+----------------------------------------------*/
 .ui.styled.accordion .title,
 .ui.styled.accordion .accordion .title {
   background: @styledTitleBackground;
 }
 
+/*-------------------------------------------------
+     Advanced search filters' brackground color
+--------------------------------------------------*/
 .ui.form.advanced-search .ui.styled.accordion > .content {
    background: @secondaryBackground;
 }
 
+/*-------------------------------------------------------
+     Max height for accordions displayed in listings
+--------------------------------------------------------*/
 .listing td .ui.accordion {
    width: 100%;
    max-height: 200px;
    overflow: auto
 }
 
+/*-------------------------------------------------------
+     Reset style of accordions applied on details
+--------------------------------------------------------*/
+details.ui.basic.styled.accordion .title {
+  background: transparent;
+  color: @textColor;
+}
+
 /*-------------
      No JS
 --------------*/

diff --git a/ui/semantic/galette/modules/dropdown.overrides b/ui/semantic/galette/modules/dropdown.overrides
new file mode 100644 (file)
index 0000000..e6325c9
--- /dev/null
+++ b/ui/semantic/galette/modules/dropdown.overrides
@@ -0,0 +1,10 @@
+/*******************************
+        Galette Overrides
+*******************************/
+
+/*-------------
+     No JS
+--------------*/
+.nojs select[multiple].ui.dropdown {
+  height: 7rem;
+}

diff --git a/ui/semantic/galette/modules/dropdown.variables b/ui/semantic/galette/modules/dropdown.variables
new file mode 100644 (file)
index 0000000..b4bcb89
--- /dev/null
+++ b/ui/semantic/galette/modules/dropdown.variables
@@ -0,0 +1,3 @@
+/*******************************
+    Galette Variables
+*******************************/

diff --git a/ui/semantic/theme.config b/ui/semantic/theme.config
index f33ef255e241ea9fce5b728f6dcd31c44b8ed2f3..39084562b358c6dbf141afcb02e0a386742f4ab1 100644 (file)
--- a/ui/semantic/theme.config
+++ b/ui/semantic/theme.config
@@ -54,7 +54,7 @@
 @calendar   : 'default';
 @checkbox   : 'galette';
 @dimmer     : 'default';
-@dropdown   : 'default';
+@dropdown   : 'galette';
 @embed      : 'default';
 @modal      : 'default';
 @nag        : 'default';