[Dimmer] Added support for using dimmers only partially on top,center,bottom

[lubber-de]

Description

This adds the possibility to use any dimmer only partially and limited only to the overall height of its content and not over the whole to be covered area. This can be used for example as a caption on any element of choice by simply using
top dimmer, center dimmer or bottom dimmer

Works also very well with transitions 'fade up' or 'fade down'

Testcase

Static without Javascript (just add active to the dimmer as usual)

<div class="ui medium image">
  <div class="ui active top dimmer">
    <div class="content">
      <h3>Look!</h3>
      ui top dimmer
    </div>
  </div>
  <img src="assets/images/avatar/nan.jpg">
</div>

Animation triggered via Javascript

<div class="ui medium image">
  <div class="ui center dimmer">
    <div class="content">
      <h3>Look!</h3>
      ui center dimmer
    </div>
  </div>
  <img src="assets/images/avatar/nan.jpg">
</div>

$('.center.dimmer').dimmer({
    transition: 'fade down',
    on: 'hover'
});

Screenshot

Closes

Semantic-Org/Semantic-UI#3459
Semantic-Org/Semantic-UI#6621

[prudho]

Is it just me or center caption dimmer looks blurred compared to others ?

[lubber-de]

@prudho Thanks..., that's the old nasty webkit bug. Fixed by latest commit.

[ColinFrick]

I'm conflicted with naming this .caption as the content and container of the dimmer can be arbitrary: https://jsfiddle.net/Korinu/L053zgmu/
Why not use something like .partly, .partially or something similar?

[lubber-de]

Why not use something like .partly, .partially or something similar?

I am totally open to this. 🙂 @prudho @hammy2899 Your opinion?

[prudho]

caption doesn't bother me, French translations feels pretty close to the purpose (légende or sous-titre eg. subtitle).

[y0hami]

IMHO I think partially makes the most sense when using a dimmer because to me caption seems like it would be its own component.

[prudho]

@hammy2899 is the most english of us 😄, so i'll follow his advice.

[lubber-de]

Then i am going to change it to "partially center" instead of "center partially" @hammy2899 Agreed?

[lubber-de]

We could also completely omit partially but simply use top dimmer, center dimmer bottom dimmer by using explicit contains selectors this would not interfere with something like ui bottom aligned dimmer

https://jsfiddle.net/3xsbL8gk/

[lubber-de]

Removed the need for any additional className. Much cleaner. I don't know why i haven't done it this way right from the start 🤔

[ColinFrick]

LGTM

[ColinFrick]

LGTM

[ColinFrick]

LGTM

[lubber-de]

Docs here
Just @hammy2899 and/or @prudho need to approve this also, even if @ColinFrick approved this 3 times already 🤣