Dotclear

Changeset 3870:132b4be257c5


Ignore:
Timestamp:
09/12/18 10:49:47 (7 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Add some badge options (square, noborder, small) and minor CSS modifications

Location:
admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • admin/js/common.js

    r3869 r3870  
    484484       */ 
    485485      type: '', 
     486      /* left: display badge on the left rather than on the right (unused for inline badge) */ 
     487      left: false, 
     488      /* noborder: do not display the badge border */ 
     489      noborder: false, 
     490      /* small: use a smaller font-size */ 
     491      small: false, 
    486492      /* classes: additionnal badge classes */ 
    487493      classes: '' 
    … …  
    503509    } 
    504510 
     511    // Add the new badge if any 
    505512    if (!opt.remove && opt.value !== null) { 
    506       // Add the new badge 
     513      // Compose badge classes 
    507514      const cls = 'badge badge-' + opt.id + ' ' + 
    508515        (opt.inline ? 'badge-inline' : 'badge-block') + 
    509516        (opt.icon ? ' badge-icon' : '') + 
    510517        (opt.type !== '' ? ' badge-' + opt.type : '') + 
     518        (opt.left ? ' badge-left' : '') + 
     519        (opt.noborder ? ' badge-noborder' : '') + 
     520        (opt.small ? ' badge-small' : '') + 
    511521        (opt.classes !== '' ? ' ' + opt.classes : ''); 
     522      // Compose badge 
    512523      const xml = '<span class="' + cls + '" aria-hidden="true">' + opt.value + '</span>'; 
    513524      if (opt.sibling) { 

  • admin/style/default-dark.css

    r3869 r3870  
    32203220  color: #fff; 
    32213221  background-color: #d54e21; 
     3222  border: 1px solid currentColor; 
    32223223  vertical-align: top; 
    32233224  border-radius: 10px; 
    3224   padding: 0 .6em; } 
     3225  padding: 0 .6em; 
     3226  /* font-size: smaller; */ 
     3227  } 
    32253228 
    32263229.badge-icon { 
    3227   background-color: #708090; } 
     3230  background-color: #607d8b; } 
    32283231 
    32293232/* Badge background override */ 
    … …  
    32353238 
    32363239.badge-soft { 
    3237   background-color: #708090; 
    3238   } 
     3240  background-color: #607d8b; } 
    32393241 
    32403242/* Badge position */ 
    … …  
    32523254  /* Menu item */ 
    32533255  margin-left: .5em; } 
     3256 
     3257.badge-left { 
     3258  right: auto; 
     3259  left: -10px; } 
     3260  .badge-left.badge-icon { 
     3261    left: 20px; } 
     3262 
     3263/* Badge design option */ 
     3264.badge-noborder { 
     3265  border: none; } 
     3266 
     3267.badge-small { 
     3268  font-size: smaller; } 
     3269  .badge-small.badge-icon { 
     3270    right: 25px; } 
     3271    .badge-small.badge-icon.badge-left { 
     3272      right: auto; 
     3273      left: 25px; } 
     3274 
     3275.badge-square { 
     3276  border-radius: 0; } 
    32543277 
    32553278/* ------------------------------------------------------------------------------------ 

  • admin/style/default.css

    r3869 r3870  
    32203220  color: #fff; 
    32213221  background-color: #d54e21; 
     3222  border: 1px solid currentColor; 
    32223223  vertical-align: top; 
    32233224  border-radius: 10px; 
    … …  
    32253226 
    32263227.badge-icon { 
    3227   background-color: #708090; } 
     3228  background-color: #607d8b; } 
    32283229 
    32293230/* Badge background override */ 
    … …  
    32353236 
    32363237.badge-soft { 
    3237   background-color: #708090; } 
     3238  background-color: #607d8b; } 
    32383239 
    32393240/* Badge position */ 
    … …  
    32513252  /* Menu item */ 
    32523253  margin-left: .5em; } 
     3254 
     3255.badge-left { 
     3256  right: auto; 
     3257  left: -10px; } 
     3258  .badge-left.badge-icon { 
     3259    left: 20px; } 
     3260 
     3261/* Badge design option */ 
     3262.badge-noborder { 
     3263  border: none; } 
     3264 
     3265.badge-small { 
     3266  font-size: smaller; } 
     3267  .badge-small.badge-icon { 
     3268    right: 25px; } 
     3269    .badge-small.badge-icon.badge-left { 
     3270      right: auto; 
     3271      left: 25px; } 
     3272 
     3273.badge-square { 
     3274  border-radius: 0; } 
    32533275 
    32543276/* ------------------------------------------------------------------------------------ 

  • admin/style/scss/partials/_utils.scss

    r3869 r3870  
    3333  color: $badge-color; 
    3434  background-color: $badge-std-background; 
     35  border: 1px solid currentColor; 
    3536  vertical-align: top; 
    3637  border-radius: 10px; 
    … …  
    6768  margin-left: .5em; 
    6869} 
     70.badge-left { 
     71  right: auto; 
     72  left: -10px; 
     73  &.badge-icon { 
     74    left: 20px; 
     75  } 
     76} 
     77 
     78/* Badge design option */ 
     79.badge-noborder { 
     80  border: none; 
     81} 
     82.badge-small { 
     83  font-size: smaller; 
     84  &.badge-icon { 
     85    right: 25px; 
     86    &.badge-left { 
     87      right: auto; 
     88      left: 25px; 
     89    } 
     90  } 
     91} 
     92.badge-square { 
     93  border-radius: 0; 
     94} 
     95 

  • admin/style/scss/themes/_dark.scss

    r3868 r3870  
    7070 
    7171$badge:           #d54e21;  /* bright red */ 
    72 $badge-soft:      #708090;  /* slategray */ 
     72$badge-soft:      #607d8b;  /* slategray */ 
    7373$badge-info:      #3f51b5;  /* soft dark blue */ 
    7474 

  • admin/style/scss/themes/_light.scss

    r3868 r3870  
    7070 
    7171$badge:           #d54e21;  /* bright red */ 
    72 $badge-soft:      #708090;  /* slategray */ 
     72$badge-soft:      #607d8b;  /* slategray */ 
    7373$badge-info:      #3f51b5;  /* soft dark blue */ 
    7474 
Note: See TracChangeset for help on using the changeset viewer.

Sites map