Changeset 3868:dae3038ae341 for admin/style/scss

Timestamp:

09/08/18 11:11:21 (7 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Add badge styles to standard CSS

Location:

admin/style/scss

Files:

• partials/_utils.scss (modified) (1 diff)
• themes/_dark.scss (modified) (2 diffs)
• themes/_light.scss (modified) (3 diffs)

admin/style/scss/partials/_utils.scss

@@ -21 +21 @@
      border: 1px solid $color-div-border;
 }
+
+/* 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
+*/
+
+.badgeable {
+  /* class to set to badge parent's, not mandatory for menu items */
+  position: relative;
+}
+
+/* Badge design */
+.badge {
+  color: $badge-color;
+  background-color: $badge-std-background;
+  vertical-align: top;
+  border-radius: 10px;
+  padding: 0 .6em;
+}
+.badge-info {
+  background-color: $badge-info-background
+}
+.badge-icon {
+  border-radius: 5px;
+}
+.badge-block-icon {
+  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 */
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
+.badge-block-icon {
+  /* Dashboard icon/module → badge on top rigt */
+  right: 20px;
+}
+.badge-inline {
+  /* Menu item */
+  margin-left: .5em;
+}

admin/style/scss/themes/_dark.scss

@@ -68 +68 @@
 $add:             #bee74b;
 $add-alt:         #9bca1c;
+
+$badge:           #d54e21;  /* bright red */
+$badge-soft:      #708090;  /* slategray */
+$badge-info:      #3f51b5;  /* soft dark blue */
 
 // Common
@@ -432 +436 @@
 $color-div-border:                $gray-light;
 
+$badge-color:                     $white;                             // #ffffff
+$badge-std-background:            $badge;                             // #d54e21
+$badge-soft-background:           $badge-soft;
+$badge-info-background:           $badge-info;
+
 // Debug
 

admin/style/scss/themes/_light.scss

@@ -15 +15 @@
 
 $gray-very-dark:    shade($gray, 72%);  // #323232 (near to #333 used before)
+$gray-darker:       shade($gray, 50%);  // #595b5d
 $gray-semi-dark:    shade($gray, 25%);  // #868686 (near to #999 used before)
 $gray-light:        tint($gray, 30%);   // #c9c9c9 (near to #ccc used before)
@@ -67 +68 @@
 $add:             #bee74b;
 $add-alt:         #9bca1c;
+
+$badge:           #d54e21;  /* bright red */
+$badge-soft:      #708090;  /* slategray */
+$badge-info:      #3f51b5;  /* soft dark blue */
 
 // Common
@@ -431 +436 @@
 $color-div-border:                $gray-light;                        // #c9c9c9
 
+$badge-color:                     $white;                             // #ffffff
+$badge-std-background:            $badge;                             // #d54e21
+$badge-soft-background:           $badge-soft;
+$badge-info-background:           $badge-info;
+
 // Debug