Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Less in jquery.confirmable

Browse source 
Change-Id: I043c804744d1dd7be886a32cd90144b314dc1e49
This commit is contained in:
Ebrahim Byagowi 2024-08-17 21:07:51 +03:30
parent 458acc43c3
commit 379f290053
3 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/Resources.php
View file

@ -180,7 +180,7 @@ return [
'confirmable-no',
'word-separator',
],
'styles' => 'resources/src/jquery/jquery.confirmable.css',
'styles' => 'resources/src/jquery/jquery.confirmable.less',
'dependencies' => 'mediawiki.jqueryMsg',
],
'jquery.highlightText' => [

30
resources/src/jquery/jquery.confirmable.css
View file

@ -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
View 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 );
}
}