Use Less in jquery.confirmable
Change-Id: I043c804744d1dd7be886a32cd90144b314dc1e49
This commit is contained in:
parent
458acc43c3
commit
379f290053
3 changed files with 33 additions and 31 deletions
|
|
@ -180,7 +180,7 @@ return [
|
||||||
'confirmable-no',
|
'confirmable-no',
|
||||||
'word-separator',
|
'word-separator',
|
||||||
],
|
],
|
||||||
'styles' => 'resources/src/jquery/jquery.confirmable.css',
|
'styles' => 'resources/src/jquery/jquery.confirmable.less',
|
||||||
'dependencies' => 'mediawiki.jqueryMsg',
|
'dependencies' => 'mediawiki.jqueryMsg',
|
||||||
],
|
],
|
||||||
'jquery.highlightText' => [
|
'jquery.highlightText' => [
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
/* stylelint-disable selector-class-pattern */
|
|
||||||
|
|
||||||
.jquery-confirmable-button {
|
|
||||||
/* Automatically flipped */
|
|
||||||
margin-left: 1ex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jquery-confirmable-wrapper {
|
|
||||||
/* Line breaks within the interface text are unpleasant */
|
|
||||||
white-space: nowrap;
|
|
||||||
/* Hiding the original text when it slides to the left */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jquery-confirmable-wrapper,
|
|
||||||
.jquery-confirmable-element,
|
|
||||||
.jquery-confirmable-interface {
|
|
||||||
/* We need inline-flex to be able to size the elements and calculate their dimensions */
|
|
||||||
display: inline-flex;
|
|
||||||
/* inline-flex elements in this context align to baseline by default */
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jquery-confirmable-element {
|
|
||||||
transition: margin 250ms cubic-bezier( 0.2, 0.8, 0.2, 0.8 );
|
|
||||||
}
|
|
||||||
|
|
||||||
.jquery-confirmable-interface {
|
|
||||||
transition: width 250ms cubic-bezier( 0.2, 0.8, 0.2, 0.8 );
|
|
||||||
}
|
|
||||||
32
resources/src/jquery/jquery.confirmable.less
Normal file
32
resources/src/jquery/jquery.confirmable.less
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/* stylelint-disable selector-class-pattern */
|
||||||
|
|
||||||
|
.jquery-confirmable {
|
||||||
|
&-button {
|
||||||
|
/* Automatically flipped */
|
||||||
|
margin-left: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-wrapper {
|
||||||
|
/* Line breaks within the interface text are unpleasant */
|
||||||
|
white-space: nowrap;
|
||||||
|
/* Hiding the original text when it slides to the left */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-wrapper,
|
||||||
|
&-element,
|
||||||
|
&-interface {
|
||||||
|
/* We need inline-flex to be able to size the elements and calculate their dimensions */
|
||||||
|
display: inline-flex;
|
||||||
|
/* inline-flex elements in this context align to baseline by default */
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-element {
|
||||||
|
transition: margin 250ms cubic-bezier( 0.2, 0.8, 0.2, 0.8 );
|
||||||
|
}
|
||||||
|
|
||||||
|
&-interface {
|
||||||
|
transition: width 250ms cubic-bezier( 0.2, 0.8, 0.2, 0.8 );
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue