Comment glisser un élément de la liste ionique de gauche à droite?
Je veux balayer les éléments de la liste ionique des deux côtés. (c'est-à-dire gauche-droite ET droite-gauche). Cela fonctionne parfaitement pour le balayage droit-gauche, mais je ne parviens pas à faire glisser un élément de la liste vers la gauche.
J'ai utilisé $ionicGesture pour le balayage gauche-droite et il me donne également une alerte lorsque j'utilise l'événement swiperight: event($ionicGesture.on('swiperight', scope.reportEvent, elem)), mais je ne peux pas le laisser afficher le ion-option-button à gauche.
Voici ma directive et le code du contrôleur:
.directive('onSwipeRight', function($ionicGesture) {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
var gestureType = attrs.gestureType;
switch(gestureType) {
case 'swipeRight':
$ionicGesture.on('swiperight', scope.reportEvent, elem);
break;
case 'swipeleft':
$ionicGesture.on('swipeleft', scope.reportEvent, elem);
break;
case 'doubletap':
$ionicGesture.on('doubletap', scope.reportEvent, elem);
break;
case 'tap':
$ionicGesture.on('tap', scope.reportEvent, elem);
break;
}
}
}
})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.reportEvent = function (event) {
alert("hi");
console.log('Reporting : ' + event.type);
event.preventDefault();
};
})
Voici mon code html.
<ion-view view-title="Chats">
<ion-content>
<ion-list can-swipe="true">
<ion-item gesture-type="swipeRight" on-swipe-right="swipeRight()" class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="share(item)" side="left">
Share
</ion-option-button>
<ion-option-button class="button-assertive" ng-click="remove(chat)" side="right">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Je souhaite donc afficher le bouton de partage à gauche et le bouton de suppression à droite.
Quelqu'un peut-il me fournir une solution spécifique?
J'ai édité lib ionic pour faire quelque chose comme ça. Mais je ne pouvais pas faire un JSFiddle ou un stylo, je vous donnerai le lien vers mon ionic.css modifié et mon ion.bundle.js!
TL; DR
Remplacez-le simplement par le vôtre, démarrez un blanc de projet ionique. Et mettez ce code HTML dedans:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-list show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item href="#">
Item 1
<ion-option-button side="right" class="button-light icon ion-heart"></ion-option-button>
<ion-option-button side="right" class="button-light icon ion-email"></ion-option-button>
<ion-option-button side="left" class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
<ion-item href="#">
Item 2
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
Vous pouvez spécifier le sens d’effacement avec gauche, droite ou les deux ..__et dans le bouton options-ion, vous pouvez lui donner un côté.
J'espère que ça aide, tout ce dont vous avez besoin, n'hésitez pas! Je vais essayer de commenter mes modifications dans le code plus tard!
EDIT: .__ Je vais essayer d’expliquer ce que j’ai fait.
Commencez par changer la directive ionOptionButton pour créer div en pour le bouton, un gauche et un droit
//added second div with class item-options-left for the left buttons
var ITEM_TPL_OPTION_BUTTONS =
'<div class="item-options invisible">' +
'</div>' + '<div class="item-options-left invisible">' +
'</div>';
IonicModule.directive('ionOptionButton', [function () {
function stopPropagation(e) {
e.stopPropagation();
}
return {
restrict: 'E',
require: '^ionItem',
priority: Number.MAX_VALUE,
compile: function ($element, $attr) {
$attr.$set('class', ($attr['class'] || '') + ' button', true);
return function ($scope, $element, $attr, itemCtrl) {
if (!itemCtrl.optionsContainer) {
itemCtrl.optionsContainer = jqLite(ITEM_TPL_OPTION_BUTTONS);
itemCtrl.$element.append(itemCtrl.optionsContainer);
}
//[NEW] if it as an attribute side = 'left' put the button in the left container
if ($attr.side === 'left') {
angular.element(itemCtrl.optionsContainer[1]).append($element);
itemCtrl.$element.addClass('item-left-editable');
} else{
angular.element(itemCtrl.optionsContainer[0]).append($element);
itemCtrl.$element.addClass('item-right-editable');
}
//Don't bubble click up to main .item
$element.on('click', stopPropagation);
};
}
};
}]);
Ajouter CSS aux boutons de gauche du fichier ionic.css
.item-options-left {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%; }
.item-options-left .button {
height: 100%;
border: none;
border-radius: 0;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center; }
.item-options .button:before {
margin: 0 auto; }
Maintenant, changez le contrôleur de liste d'ions pour accepter l'attribut des directions de balayage
.controller('$ionicList', [
'$scope',
'$attrs',
'$ionicListDelegate',
'$ionicHistory',
function ($scope, $attrs, $ionicListDelegate, $ionicHistory) {
var self = this;
//[NEW] object with can-swipe attr and swipe-direction side attr, default direction is left
var swipe = {
isSwipeable: true,
side: 'left'
};
var isReorderShown = false;
var isDeleteShown = false;
var deregisterInstance = $ionicListDelegate._registerInstance(
self, $attrs.delegateHandle,
function () {
return $ionicHistory.isActiveScope($scope);
}
);
$scope.$on('$destroy', deregisterInstance);
self.showReorder = function (show) {
if (arguments.length) {
isReorderShown = !!show;
}
return isReorderShown;
};
self.showDelete = function (show) {
if (arguments.length) {
isDeleteShown = !!show;
}
return isDeleteShown;
};
//[NEW] get swipe direction attribute and store it in a variable to access in other function
self.canSwipeItems = function (can) {
if (arguments.length) {
swipe.isSwipeable = !!can;
swipe.side = $attrs.swipeDirection;
}
return swipe;
};
self.closeOptionButtons = function () {
self.listView && self.listView.clearDragEffects();
};
}]);
Pour terminer, vous devez remplacer la fonction slideDrag par celle-ci, il suffit de la rechercher dans ionic.bundle.js
//[NEW] add this var to the others in the function
var ITEM_OPTIONS_CLASS_RIGHT = 'item-options-left';
var SlideDrag = function (opts) {
this.dragThresholdX = opts.dragThresholdX || 10;
this.el = opts.el;
this.item = opts.item;
this.canSwipe = opts.canSwipe;
};
SlideDrag.prototype = new DragOp();
SlideDrag.prototype.start = function (e) {
var content, buttonsLeft, buttonsRight, offsetX, buttonsLeftWidth, buttonsRightWidth;
if (!this.canSwipe().isSwipeable) {
return;
}
if (e.target.classList.contains(ITEM_CONTENT_CLASS)) {
content = e.target;
} else if (e.target.classList.contains(ITEM_CLASS)) {
content = e.target.querySelector('.' + ITEM_CONTENT_CLASS);
} else {
content = ionic.DomUtil.getParentWithClass(e.target, ITEM_CONTENT_CLASS);
}
// If we don't have a content area as one of our children (or ourselves), skip
if (!content) {
return;
}
// Make sure we aren't animating as we slide
content.classList.remove(ITEM_SLIDING_CLASS);
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons
buttonsLeft = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
if (!buttonsLeft) {
return;
}
//[NEW] get the Right buttons
buttonsRight = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS_RIGHT);
if (!buttonsRight) {
return;
}
// [NEW] added the same functionality to both sides, to make buttons visible when dragged
if(e.gesture.direction === "left")
buttonsLeft.classList.remove('invisible');
else
buttonsRight.classList.remove('invisible');
//[NEW] added buttonRight and buttonLeft properties to currentDrag
buttonsLeftWidth = buttonsLeft.offsetWidth;
buttonsRightWidth = buttonsRight.offsetWidth;
this._currentDrag = {
buttonsLeft: buttonsLeft,
buttonsRight: buttonsRight,
buttonsLeftWidth: buttonsLeftWidth,
buttonsRightWidth: buttonsRightWidth,
content: content,
startOffsetX: offsetX
};
};
/**
* Check if this is the same item that was previously dragged.
*/
SlideDrag.prototype.isSameItem = function (op) {
if (op._lastDrag && this._currentDrag) {
return this._currentDrag.content == op._lastDrag.content;
}
return false;
};
SlideDrag.prototype.clean = function (isInstant) {
var lastDrag = this._lastDrag;
if (!lastDrag || !lastDrag.content) return;
lastDrag.content.style[ionic.CSS.TRANSITION] = '';
lastDrag.content.style[ionic.CSS.TRANSFORM] = '';
if (isInstant) {
lastDrag.content.style[ionic.CSS.TRANSITION] = 'none';
makeInvisible();
ionic.requestAnimationFrame(function () {
lastDrag.content.style[ionic.CSS.TRANSITION] = '';
});
} else {
ionic.requestAnimationFrame(function () {
setTimeout(makeInvisible, 250);
});
}
function makeInvisible() {
lastDrag.buttonsLeft && lastDrag.buttonsLeft.classList.add('invisible');
lastDrag.buttonsRight && lastDrag.buttonsRight.classList.add('invisible');
}
};
SlideDrag.prototype.drag = ionic.animationFrameThrottle(function (e) {
var buttonsLeftWidth;
var buttonsRightWidth;
// We really aren't dragging
if (!this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if (!this._isDragging &&
((Math.abs(e.gesture.deltaX) > this.dragThresholdX) ||
(Math.abs(this._currentDrag.startOffsetX) > 0))) {
this._isDragging = true;
}
if (this._isDragging) {
buttonsLeftWidth = this._currentDrag.buttonsLeftWidth;
buttonsRightWidth = this._currentDrag.buttonsRightWidth;
// Grab the new X point, capping it at zero
//[NEW] added right swipe new position
if (this.canSwipe().side === 'left' || (this.canSwipe().side === 'both' && e.gesture.direction === 'left'))
var newX = Math.min(0, this._currentDrag.startOffsetX + e.gesture.deltaX);
else if (this.canSwipe().side === 'right' || (this.canSwipe().side === 'both' && e.gesture.direction === 'right'))
var newX = Math.max(0, this._currentDrag.startOffsetX + e.gesture.deltaX);
var buttonsWidth = 0;
if (e.gesture.direction === 'right')
buttonsWidth = buttonsRightWidth;
else
buttonsWidth = buttonsLeftWidth;
// If the new X position is past the buttons, we need to slow down the drag (rubber band style)
if (newX < -buttonsWidth) {
// Calculate the new X position, capped at the top of the buttons
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
}
this._currentDrag.content.$$ionicOptionsOpen = newX !== 0;
this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + newX + 'px, 0, 0)';
this._currentDrag.content.style[ionic.CSS.TRANSITION] = 'none';
}
});
SlideDrag.prototype.end = function (e, doneCallback) {
var self = this;
// There is no drag, just end immediately
if (!self._currentDrag) {
doneCallback && doneCallback();
return;
}
// If we are currently dragging, we want to snap back into place
// The final resting point X will be the width of the exposed buttons
var restingPoint;
if (e.gesture.direction === 'left' && (this.canSwipe().side === 'left' || this.canSwipe().side === 'both'))
restingPoint = -self._currentDrag.buttonsLeftWidth;
if (e.gesture.direction === 'right' && (this.canSwipe().side === 'right' || this.canSwipe().side === 'both'))
restingPoint = self._currentDrag.buttonsRightWidth;
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
var buttonsWidth = 0;
if (e.gesture.direction === 'right')
buttonsWidth = self._currentDrag.buttonsRightWidth;
else
buttonsWidth = self._currentDrag.buttonsLeftWidth;
if (e.gesture.deltaX > -(buttonsWidth / 2)) {
// If we are going left or right but too slow, or going right, go back to resting
if ((e.gesture.direction == "left" || e.gesture.direction == "right") && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0;
}
}
ionic.requestAnimationFrame(function () {
if (restingPoint === 0) {
self._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
var buttonsLeft = self._currentDrag.buttonsLeft;
var buttonsRight = self._currentDrag.buttonsRight;
setTimeout(function () {
buttonsLeft && buttonsLeft.classList.add('invisible');
buttonsRight && buttonsRight.classList.add('invisible');
}, 250);
} else {
self._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + restingPoint + 'px,0,0)';
}
self._currentDrag.content.style[ionic.CSS.TRANSITION] = '';
// Kill the current drag
if (!self._lastDrag) {
self._lastDrag = {};
}
ionic.extend(self._lastDrag, self._currentDrag);
if (self._currentDrag) {
self._currentDrag.buttons = null;
self._currentDrag.content = null;
}
self._currentDrag = null;
// We are done, notify caller
doneCallback && doneCallback();
});
};
Ma solution n'est pas parfaite, mais cela fonctionne. et il y a d'autres façons de faire cela, je l'ai fait de cette façon pour mieux comprendre comment Ionic fonctionne et comment ils respectent les directives ioniques.
Tous les commentaires sont les bienvenus, et avec cela, vous pouvez essayer de créer le vôtre ou d’améliorer celui-ci.
J'ai créé la directive item-swipe-pane qui crée un conteneur à l'intérieur d'un ion-item, qui est visible lorsque l'élément est glissé à gauche ou à droite.
var ITEM_SWIPE_PANE_TPL = '<div class="item-options invisible item-swipe-pane"></div>';
var DIRECTION_RIGHT_CLASS = 'direction-right';
module.directive( 'itemSwipePane' , function() {
return {
restrict: 'E',
require: '^ionItem',
link: function (scope, $element, attrs, itemCtrl) {
var container;
var direction = 'left';
// Set direction
if (attrs['direction'] && attrs['direction'] === 'right'){
direction = 'right';
} else if (attrs['direction'] && attrs['direction'] === 'left'){
direction = 'left';
}
if (direction === 'left'){
if (!itemCtrl.itemSwipeLeft){
itemCtrl.itemSwipeLeft = angular.element(ITEM_SWIPE_PANE_TPL);
itemCtrl.$element.append(itemCtrl.itemSwipeLeft);
}
container = itemCtrl.itemSwipeLeft;
} else if (direction === 'right'){
if (!itemCtrl.itemSwipeRight){
itemCtrl.itemSwipeRight = angular.element(ITEM_SWIPE_PANE_TPL);
// If direction is right, move position of item options
// to the left - override inherited right:0;
itemCtrl.itemSwipeRight.css({right: 'auto'});
// "direction-right" is container selector.
itemCtrl.itemSwipeRight.addClass(DIRECTION_RIGHT_CLASS);
itemCtrl.$element.append(itemCtrl.itemSwipeRight);
}
container = itemCtrl.itemSwipeRight;
}
container.append($element);
// Animation to slowly close opened item.
itemCtrl.$element.addClass('item-right-editable');
} // link
}; // return
}); // item-swipe-pane
L'attribut direction contrôle la direction du balayage. Les valeurs possibles sont left ou right. La direction par défaut est laissée.
Vous pouvez placer n'importe quel contenu dans la directive, le bouton, le texte, l'image, l'icône, l'avatar, l'image d'arrière-plan, etc.
Le conteneur est assez brut en ce sens que tout ce que vous placez doit être formaté par CSS ou par un autre moyen.
item-swipe-pane est compatible avec les directives ion-option-button, ion-delete-button et ion-reorder-button.
Il est possible de combiner deux item-swipe-pane sur le même ion-item. Chacun avec une direction de balayage différente.
Exemple avec deux volets d’objet, un à gauche et un à droite:
<ion-item>
Two item-swipe-panes. One on the left, one on the right.
<item-swipe-pane direction="right">
<button class="button button-balanced ion-arrow-right-c"></button>
<button class="button button-positive">Update</button>
<button class="button button-royal">Add</button>
</item-swipe-pane>
<item-swipe-pane class="left-pane">
<button class="button button-assertive">Delete</button>
<button class="button button-calm">Share</button>
<button class="button button-balanced ion-arrow-left-c"></button>
</item-swipe-pane>
</ion-item>
D'autres exemples d'élément de volet de balayage sont sur Codepen.
Note importante:
Malheureusement, Ionic Framework n'autorise pas le balayage à droite (de gauche à droite) d'un élément de la liste. J'ai donc dû apporter peu de modifications à la bibliothèque Ionic. Voici résumé des modifications apportées à Ionic Framework .
Liens:
Bibliothèque ionique modifiée télécharger.
item-swipe-pane directive sur Github.
Contrairement à d’autres réponses, j’ai créé une enveloppe angulaire pour swiper (qui semble être le curseur utilisé par lib dans ionic 2) et axée sur ionic v1 au lieu de modifier le cadre proprement dit.
Mon emballage est disponible ici et il y a une démo ici .
Vous pouvez utiliser npm install ionic-swiper pour l'installer et importer en suivant les instructions de README.md:
En javascript avec webpack (vous pouvez importer tout le paquet comme un js normal):
import {moduleName as ionicSwiperModule} from 'ionic-swiper';
angular.module('yourModule',[ionicSwiperModule]);
Modifier:
J'ai fait quelques changements depuis que j'ai écrit cette réponse, alors voici une façon plus correcte d'utiliser ma lib:
<ionic-swiper ng-repeat="i in [1,2,3]"
center-on-disable="{{ true || 'disable default center on disable behavior'}}"
is-swipable="{{ true || 'some prop to watch' }}"
left-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}"
right-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}">
<!-- containerId is available inside this context -->
<!-- Left transclude is optional -->
<left-swiper class="side-item">
Left
</left-swiper>
<!-- Central transclude is required -->
<central-swiper class="central-item">
Central {{:: containerId}}
</central-swiper>
<!-- Right transclude is optional -->
<right-swiper class="side-item">
Right
</right-swiper>
</ionic-swiper>
Et voici l'exemple d'utilisation de la réponse d'origine:
En HTML (vous aurez aussi besoin d'ajuster quelques CSS):
<ionic-list>
<div
swiper-container="true"
class="swiper-container"
ng-repeat="item in [1,2,3,4,5,6]">
<!-- containerId is available inside this context -->
<div class="swiper-wrapper">
<ion-item swiper-slide="center">
This swiper container id is {{:: containerId }}
</ion-item>
<ion-item swiper-slide="right">
Right Button
</ion-item>
<ion-item swiper-slide="left">
Left Button
</ion-item>
</div>
</div>
</ionic-list>
Voici un gif de la démo (je l'ai enregistré dans un pavé tactile, c'est pourquoi il semble "collant")
voici un exemple de code utilisant ce que vous pouvez y arriver
swipe-pane.html
<div class="mk-swipe-pane">
<div class="col-xs-4 swipe-actions-padding" ng-repeat="action in swipeActions">
<div ng-click="currentActionClick(action.actionName)"
ng-class="[action.actionCssclass]">
<div class="icon-font-size">
<i ng-class="[action.actionIcon]"></i>
</div>
{{action.actionName}}
</div>
</div>
</div>
swipe-pane.js
angular.module('mk.Directives')
.directive('mkSwipePane', function ($swipe) {
return {
templateUrl: "lib/mobikon/directives/notifications/swipe-pane/swipe-pane.html",
restrict: 'E',
scope: {
swipeActions: "="
},
replace: true,
link: function ($scope, element) {
var MAX_VERTICAL_DISTANCE = 75,
MAX_VERTICAL_RATIO = 0.3,
MIN_HORIZONTAL_DISTANCE = 30,
startCoords,
valid,
elWidth = $(element).width(),
direction = 1,
pointerTypes = ['touch'],
delayForAnimation = 70;
$scope.currentActionClick = function (actionName) {
$scope.$emit('currentActionName', actionName);
};
function validSwipe(coords) {
if (!startCoords) return false;
var deltaY = Math.abs(coords.y - startCoords.y);
var deltaX = (coords.x - startCoords.x) * direction;
return valid && // Short circuit for already-invalidated swipes.
deltaY < MAX_VERTICAL_DISTANCE &&
deltaX > 0 &&
deltaX > MIN_HORIZONTAL_DISTANCE &&
deltaY / deltaX < MAX_VERTICAL_RATIO;
}
$swipe.bind(element, {
'start': function (coords, event) {
startCoords = coords;
valid = true;
},
'move': function (coords, event) {
var diffX = coords.x - startCoords.x;
if (diffX < 0) {
direction = -1; // For left swipe
} else {
direction = 1; // For right swipe
}
if (validSwipe(coords)) {
var marginLeft = parseInt($(element).css("marginLeft"));
if (direction === -1 && Math.abs(diffX) <= elWidth / 2) {
$(element).prev().css({"margin-left": diffX});
} else if (direction === 1 && (marginLeft + diffX) <= 0) {
$(element).prev().css({"margin-left": marginLeft + diffX});
}
}
},
'cancel': function (event) {
valid = false;
},
'end': function (coords, event) {
if (validSwipe(coords)) {
if (direction === -1) {
$(element).prev().animate({"margin-left": "-50%"}, delayForAnimation);
$scope.$emit('isCurrentRowClickable', {isSwiped: false});
} else {
$(element).prev().animate({"margin-left": "0%"}, delayForAnimation);
$scope.$emit('isCurrentRowClickable', {isSwiped: true});
}
}
}
}, pointerTypes);
}
}
});
require("./swipe-pane.html");
require("./swipe-pane.scss");
swipe-pane.scss
@import "../../../../../views/mixins";
[mk-swipe-pane], .mk-swipe-pane {
display: inline-block;
width: 50%;
$icon-outline-color: $mk-pure-white;
$icon-font-size: 35px;
$icon-text-font-size: 16px;
$icon-margin-top:-10px;
$icon-padding-top:35%;
$icon-padding-bottom:5px;
$icon-container-height:120px;
$icon-width:20px;
@media screen and (max-width: 768px) {
.swipe-actions-padding {
padding-left: 0px;
padding-right: 0px;
float: none;
display: inline-block;
}
.icon-font-size {
font-size: $icon-font-size;
}
.email-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-1-icon-background-orange;
color: $icon-outline-color;
}
.sms-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-2-icon-background-blue;
color: $icon-outline-color;
}
.call-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-3-icon-background-green;
color: $icon-outline-color;
}
.disabled {
background-color: $mk-background-gray !important;
}
}
}