Changeset 3869:97af47e1ee7d for admin/style

Timestamp:

09/11/18 15:45:42 (7 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Add badge capabilities (used mainly by dashboard modules)

Location:

admin/style

Files:

• default-dark.css (modified) (2 diffs)
• default.css (modified) (2 diffs)
• scss/partials/_utils.scss (modified) (2 diffs)

admin/style/default-dark.css

@@ -3211 +3211 @@
   border: 1px solid #c9cbcf; }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 .badgeable {
   /* class to set to badge parent's, not mandatory for menu items */
@@ -3236 +3224 @@
   padding: 0 .6em; }
 
+.badge-icon {
+  background-color: #708090; }
+
+/* Badge background override */
+.badge-std {
+  background-color: #d54e21; }
+
 .badge-info {
   background-color: #3f51b5; }
 
-.badge-icon {
-  border-radius: 5px; }
-
-.badge-block-icon {
-  background-color: #708090; }
+.badge-soft {
+  background-color: #708090;
+  }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px; }
-
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px; }
 
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px; }
 

admin/style/default.css

@@ -3211 +3211 @@
   border: 1px solid #c9c9c9; }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 .badgeable {
   /* class to set to badge parent's, not mandatory for menu items */
@@ -3236 +3224 @@
   padding: 0 .6em; }
 
+.badge-icon {
+  background-color: #708090; }
+
+/* Badge background override */
+.badge-std {
+  background-color: #d54e21; }
+
 .badge-info {
   background-color: #3f51b5; }
 
-.badge-icon {
-  border-radius: 5px; }
-
-.badge-block-icon {
+.badge-soft {
   background-color: #708090; }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px; }
-
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px; }
 
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px; }
 

admin/style/scss/partials/_utils.scss

@@ -22 +22 @@
 }
 
-/* Badges */
-/*
-   Set .badgeable to badge parent's (not mandatory for menu items), then use:
-      .badge (standard badge)
-    which must be combined with :
-      .badge-icon (dashboard icon) → top right, or
-      .badge-block (dashboard module) → top left, or
-      .badge-inline (menu item) → right centered
-    and may be combined with :
-      .badge-info → blue background
-    and may be combined with (only in dashboard, not in menu) :
-      .badge-block-icon (dashboard icon or module) → soft badge on top right
-*/
+/* Badges (common.js) */
 
 .badgeable {
@@ -49 +37 @@
   padding: 0 .6em;
 }
+.badge-icon {
+  background-color: $badge-soft-background;
+}
+
+/* Badge background override */
+.badge-std {
+  background-color: $badge-std-background;
+}
 .badge-info {
-  background-color: $badge-info-background
+  background-color: $badge-info-background;
 }
-.badge-icon {
-  border-radius: 5px;
-}
-.badge-block-icon {
-  background-color: $badge-soft-background
+.badge-soft {
+  background-color: $badge-soft-background;
 }
 
 /* Badge position */
-.badge-icon {
-  /* Dashboard icon → badge on top rigt */
-  position: absolute;
-  top: 0;
-  right: 20px;
-}
 .badge-block {
-  /* Dashboard module → badge on top left */
+  /* Dashboard module → badge on top right */
   position: absolute;
   top: -10px;
   right: -10px;
 }
-.badge-block-icon {
-  /* Dashboard icon/module → badge on top rigt */
+.badge-icon {
+  /* Dashboard icon → badge on top right */
   right: 20px;
 }