Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 9f16af1e authored by Nicolas's avatar Nicolas
Browse files

Développement des templates et des layouts

parent d33c1e6b
No related branches found
No related tags found
No related merge requests found
Showing
with 4453 additions and 0 deletions
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<update handle="editor"/>
<head>
<css src="NicolasBejean_CategoryWidget::css/assign_categories.css" />
</head>
<body>
<referenceContainer name="content">
<uiComponent name="categorywidget_categorywidget_form"/>
</referenceContainer>
</body>
</page>
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="menu">
<action method="setActive">
<argument name="itemId" xsi:type="string">NicolasBejean_Base::base</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<uiComponent name="categorywidget_categorywidget_listing"/>
</referenceContainer>
</body>
</page>
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="categorywidget_categorywidget_edit"/>
<body/>
</page>
<?php
use \NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\AssignCategories;
/** @var AssignCategories $block */
$collection = $block->getImagesCollection();
if (empty($block->getRequest()->getParams())) {
$slider = array();
} else {
$slider = $block->getSlider($block->getRequest()->getParam('entity_id'));
}
?>
<div class="categorywidget categorywidget-assign-categories">
<div class="grid-container">
<div class="collection">
<p class="categorywidget-title"><?php echo __('Available categories') ?></p>
<div id="collectionList" class="categorywidget-list box-shadow" sortable-list="sortable-list">
<?php foreach ($collection as $categorie): ?>
<div class="categorywidget-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $category['id']; ?>">
<div class="categorywidget-list-item-content">
<p><?php echo $category['alt']; ?></p>
<figure>
<img src="/pub/media/mediamanager/categorie/<?php echo $category['path']; ?>" width="125" />
<figcaption><?php echo $category['path']; ?></figcaption>
</figure>
</div>
<div class="actions">
<button class="btn remove"><?php echo __('Remove item') ?></button>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="slider">
<p class="categorywidget-title"><?php echo __('Selected categories') ?></p>
<div id="sliderList" class="categorywidget-list box-shadow" sortable-list="sortable-list">
<?php foreach ($slider as $categorie): ?>
<div class="categorywidget-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $category['id']; ?>">
<div class="categorywidget-list-item-content">
<p><?php echo $category['alt']; ?></p>
<figure>
<img src="/pub/media/mediamanager/categorie/<?php echo $category['path']; ?>" width="125" />
<figcaption><?php echo $category['path']; ?></figcaption>
</figure>
</div>
<div class="actions">
<button class="btn remove"><?php echo __('Remove item') ?></button>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<script>
require([
'jquery',
'NicolasBejean_CategoryWidget/js/sortable',
'domReady!'
], function($, Sortable) {
'use strict';
var sortable = Sortable.create(sliderList, {
group: 'shared',
/* handle: '.categorywidget-list-item-handle', */
animation: 150,
store: {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get: function (sortable) {
var order = localStorage.getItem(sortable.options.group.name);
return order ? order.split('|') : [];
},
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set: function (sortable) {
var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|'));
$('input[name = "content"]').val(localStorage.getItem(sortable.options.group.name)).change();
}
}
});
Sortable.create(collectionList, {
group: {
name: 'shared',
pull: 'clone',
put: false
},
/* handle: '.categorywidget-list-item-handle', */
animation: 150
});
$('.remove').bind('click touch', function (e) {
e.preventDefault();
var el = e.target;
var parent = $(el).closest('.categorywidget-list-item');
parent.remove();
var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|'));
$('input[name="content"]').val(localStorage.getItem(sortable.options.group.name)).change();
});
var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|'));
$('input[name="content"]').val(localStorage.getItem(sortable.options.group.name)).change();
});
</script>
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">categorywidget_categorywidget_form.categorywidget_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">General Information</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<settings>
<buttons>
<button name="save" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\SaveButton"/>
<button name="saveAndNew" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\SaveAndNewButton"/>
<button name="delete" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\DeleteButton"/>
<button name="back" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\BackButton"/>
</buttons>
<namespace>categorywidget_categorywidget_form</namespace>
<dataScope>data</dataScope>
<deps>
<dep>categorywidget_categorywidget_form.categorywidget_form_data_source</dep>
</deps>
</settings>
<dataSource name="categorywidget_form_data_source">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
<settings>
<submitUrl path="nicolasbejeancategorywidget/categorywidget/save"/>
</settings>
<dataProvider class="NicolasBejean\CategoryWidget\Model\CategoryWidget\DataProvider" name="categorywidget_form_data_source">
<settings>
<requestFieldName>entity_id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<fieldset name="general" sortOrder="5">
<settings>
<label/>
</settings>
<field name="entity_id" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<visible>false</visible>
<dataScope>entity_id</dataScope>
</settings>
</field>
<field name="is_active" sortOrder="10" formElement="checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
<item name="default" xsi:type="number">1</item>
</item>
</argument>
<settings>
<dataType>boolean</dataType>
<label translate="true">Enable Image Slider</label>
<dataScope>is_active</dataScope>
</settings>
<formElements>
<checkbox>
<settings>
<valueMap>
<map name="false" xsi:type="number">0</map>
<map name="true" xsi:type="number">1</map>
</valueMap>
<prefer>toggle</prefer>
</settings>
</checkbox>
</formElements>
</field>
<field name="name" sortOrder="20" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label translate="true">Name</label>
<dataScope>name</dataScope>
</settings>
</field>
<field name="identifier" sortOrder="30" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label translate="true">Identifier</label>
<dataScope>identifier</dataScope>
</settings>
</field>
<field name="content" sortOrder="40" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label translate="true">Content</label>
<dataScope>content</dataScope>
</settings>
</field>
</fieldset>
<fieldset name="assign_categorie" sortOrder="9">
<settings>
<collapsible>true</collapsible>
<label translate="true">Images in Slider</label>
</settings>
<container name="assign_categorie_container" sortOrder="160">
<htmlContent name="html_content">
<block name="gallery" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\AssignCategories"/>
</htmlContent>
</container>
</fieldset>
<fieldset name="store" sortOrder="30">
<settings>
<collapsible>true</collapsible>
<label translate="true">Store</label>
</settings>
<field name="store_id" sortOrder="10" formElement="multiselect">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">categorywidget</item>
<item name="default" xsi:type="number">0</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>int</dataType>
<label translate="true">Store View</label>
<dataScope>store_id</dataScope>
</settings>
<formElements>
<multiselect>
<settings>
<options class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidget\Options"/>
</settings>
</multiselect>
</formElements>
</field>
</fieldset>
</form>
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing_data_source</item>
</item>
</argument>
<settings>
<buttons>
<button name="add">
<url path="*/*/new"/>
<class>primary</class>
<label translate="true">Add New Image Slider</label>
</button>
</buttons>
<spinner>categorywidget_item_columns</spinner>
<deps>
<dep>categorywidget_categorywidget_listing.categorywidget_categorywidget_listing_data_source</dep>
</deps>
</settings>
<dataSource name="categorywidget_categorywidget_listing_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<storageConfig>
<param name="indexField" xsi:type="string">entity_id</param>
</storageConfig>
<updateUrl path="mui/index/render"/>
</settings>
<aclResource>NicolasBejean_CategoryWidget::categorie</aclResource>
<dataProvider class="NicolasBejean\CategoryWidget\Ui\Component\DataProvider" name="categorywidget_categorywidget_listing_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<listingToolbar name="listing_top">
<settings>
<sticky>true</sticky>
</settings>
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<filterSearch name="fulltext"/>
<filters name="listing_filters">
<settings>
<templates>
<filters>
<select>
<param name="template" xsi:type="string">ui/grid/filters/elements/ui-select</param>
<param name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</param>
</select>
</filters>
</templates>
</settings>
<filterSelect name="store_id" provider="${ $.parentName }">
<settings>
<captionValue>0</captionValue>
<options class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidget\Options"/>
<label translate="true">Store View</label>
<dataScope>store_id</dataScope>
<imports>
<link name="visible">componentType = column, index = ${ $.index }:visible</link>
</imports>
</settings>
</filterSelect>
</filters>
<massaction name="listing_massaction">
<action name="delete">
<settings>
<confirm>
<message translate="true">Are you sure you wan't to delete selected categorie slider?</message>
<title translate="true">Delete categorie slider</title>
</confirm>
<url path="nicolasbejeancategorywidget/categorywidget/massDelete"/>
<type>delete</type>
<label translate="true">Delete</label>
</settings>
</action>
<action name="enable">
<settings>
<confirm>
<message translate="true">Are you sure you wan't to enable selected categorie slider?</message>
<title translate="true">Enable categorie slider</title>
</confirm>
<url path="nicolasbejeancategorywidget/categorywidget/massEnable">
<param name="status">1</param>
</url>
<type>enable</type>
<label translate="true">Enable</label>
</settings>
</action>
<action name="disable">
<settings>
<confirm>
<message translate="true">Are you sure you wan't to disable selected categorie slider?</message>
<title translate="true">Disable categorie slider</title>
</confirm>
<url path="nicolasbejeancategorywidget/categorywidget/massDisable">
<param name="status">0</param>
</url>
<type>disable</type>
<label translate="true">Disable</label>
</settings>
</action>
</massaction>
<paging name="listing_paging"/>
</listingToolbar>
<columns name="categorywidget_item_columns">
<settings>
<editorConfig>
<param name="clientConfig" xsi:type="array">
<item name="saveUrl" xsi:type="url" path="nicolasbejeancategorywidget/categorywidget/inlineEdit"/>
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</param>
<param name="indexField" xsi:type="string">entity_id</param>
<param name="enabled" xsi:type="boolean">true</param>
<param name="selectProvider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing.categorywidget_item_columns.ids</param>
</editorConfig>
<childDefaults>
<param name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing.categorywidget_item_columns_editor</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</param>
</childDefaults>
</settings>
<selectionsColumn name="ids">
<settings>
<indexField>entity_id</indexField>
</settings>
</selectionsColumn>
<column name="entity_id">
<settings>
<filter>textRange</filter>
<label translate="true">ID</label>
<sorting>asc</sorting>
</settings>
</column>
<column name="identifier">
<settings>
<filter>text</filter>
<editor>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<editorType>text</editorType>
</editor>
<label translate="true">Identifier</label>
</settings>
</column>
<column name="name">
<settings>
<filter>text</filter>
<editor>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<editorType>text</editorType>
</editor>
<label translate="true">Name</label>
</settings>
</column>
<column name="content">
<settings>
<filter>text</filter>
<editor>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<editorType>text</editorType>
</editor>
<label translate="true">Content</label>
</settings>
</column>
<column name="store_id" class="Magento\Store\Ui\Component\Listing\Column\Store">
<settings>
<label translate="true">Store View</label>
<bodyTmpl>ui/grid/cells/html</bodyTmpl>
<sortable>false</sortable>
</settings>
</column>
<column name="is_active" component="Magento_Ui/js/grid/columns/select">
<settings>
<options class="NicolasBejean\CategoryWidget\Model\CategoryWidget\Source\Enabled"/>
<filter>select</filter>
<editor>
<editorType>select</editorType>
</editor>
<dataType>select</dataType>
<label translate="true">Status</label>
</settings>
</column>
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<label translate="true">Created</label>
</settings>
</column>
<column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<label translate="true">Modified</label>
</settings>
</column>
<actionsColumn name="actions" class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidgetActions">
<settings>
<indexField>entity_id</indexField>
</settings>
</actionsColumn>
</columns>
</listing>
/**
* Définition des grilles
*/
.categorywidget .grid-container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "collection slider";
}
.categorywidget .collection {
grid-area: collection;
}
.categorywidget .slider {
grid-area: slider;
}
.categorywidget #collectionList {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: ". .";
}
.categorywidget #sliderList {
grid-template-columns: 1fr;
grid-template-areas: ".";
}
.categorywidget-list {
display: grid;
grid-template-rows: 1fr;
}
/**
* Définition de la mise en page
*/
.categorywidget-title, .categorywidget-list {
margin: 0 auto;
width: 95%;
user-select: none;
}
.categorywidget-title {
padding: .75em 0;
text-align: center;
font-weight: bold;
}
.categorywidget-list {
min-height: calc(30vh + 20px);
background-color: #efefef;
border: 1px solid #adadad;
border-radius: 1px;
}
.categorywidget-list-item {
background: #fff;
margin: 10px;
max-height: 30vh;
}
.categorywidget-list-item:not(:last-child) {
margin-bottom: 7px;
}
.categorywidget-list-item-content {
width: 100%;
padding: 10px 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
.categorywidget figcaption {
font-size: .75em;
}
/**
* Bouton Remove
*/
.categorywidget-list-item {
position: relative;
}
.categorywidget-list-item .actions {
position: absolute;
right: 1vh;
bottom: 1vh;
}
#collectionList .remove {
display: none;
}
#sliderList .remove {
display: inline-block;
}
/**
* Détails
*/
.categorywidget-list-item {
cursor: grab;
}
.categorywidget-list-item.is-dragging {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
opacity: 0.8;
cursor: grabbing;
}
.categorywidget .box-shadow {
transition: box-shadow 200ms ease-out, opacity 200ms ease-out;
border-radius: 6px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}
This diff is collapsed.
<?php
use \NicolasBejean\CategoryWidget\Block\Widget\CategoryWidget;
/** @var CategoryWidget $block */
$slider = $block->getSlider();
$sliderContent = $block->getSliderContent($slider->getContent());
$active = $slider->isActive();
$activeTitle = $block->getActiveTitle();
$activeContent = $block->getActiveContent();
$activeWrapper = $block->getActiveImageWrapper();
$activeLink = $block->getActiveLink();
if ($active) {
$imageCollection = [];
$iteration = 0;
foreach ($sliderContent as $image) {
if ($image['is_active']) {
$imageCollection[$iteration]['path'] = $block->getResizeImage($image['path'], $block->getWidth(), $block->getHeight());
$imageCollection[$iteration]['width'] = $block->getResizedImageWidth($imageCollection[$iteration]['path']);
$imageCollection[$iteration]['height'] = $block->getResizedImageHeight($imageCollection[$iteration]['path']);
$imageCollection[$iteration]['alt'] = $image['alt'];
}
$iteration++;
}
}
?>
<?php if ($active): ?>
<?php if ($activeWrapper): ?>
<div class="imageslidermanager <?php if ($block->getWrapperCssClasses()): ?><?= /* @noEscape */ $block->getWrapperCssClasses(); ?><?php endif; ?>">
<?php endif; ?>
<?php if ($activeTitle || $activeContent): ?>
<div class="imageslidermanager-title-content <?php if ($block->getWidgetTitleCSS()): ?><?= /* @noEscape */ $block->getWidgetTitleCSS(); ?><?php endif; ?>">
<?php if ($activeTitle): ?>
<<?= /* @noEscape */ $block->getWidgetTitleTag(); ?>><?= /* @noEscape */ $block->getWidgetTitle() ?></<?= /* @noEscape */ $block->getWidgetTitleTag(); ?>>
<?php endif; ?>
<?php if ($activeContent): ?>
<p class="<?php if ($block->getWidgetContentCSS()): ?><?= /* @noEscape */ $block->getWidgetContentCSS(); ?><?php endif; ?>"><?= /* @noEscape */ $block->getWidgetContent(); ?></p>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($activeLink): ?>
<a href="<?= /* @noEscape */ $block->getLinkHref(); ?>" target="<?= /* @noEscape */ $block->getLinkTarget(); ?>">
<?php endif; ?>
<div class="imageslidermanager-imageslider glide hero" style="width: <?= /* @noEscape */ $block->getWidth(); ?>px; height: <?= /* @noEscape */ $block->getHeight(); ?>px;">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<?php foreach ($imageCollection as $image) : ?>
<li class="glide__slide">
<img src="<?php echo /* @noEscape */ $image['path']; ?>"
<?php if ($block->getCssClasses()): ?>class="<?= /* @noEscape */ $block->getCssClasses(); ?>"<?php endif; ?>
alt="<?= /* @noEscape */ $image['alt']; ?>"
<?php if ($block->getExtraCss()): ?>style="<?= /* @noEscape */ $block->getExtraCss(); ?>"<?php endif; ?>
<?php if ($block->getDataBind()): ?>data-bind="<?= /* @noEscape */ $block->getDataBind(); ?>"<?php endif; ?>
width="<?= /* @noEscape */ $image['width']; ?>"
height="<?= /* @noEscape */ $image['height']; ?>"
/>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php if (count($sliderContent) > 1): ?>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
</div>
<?php endif; ?>
</div>
<?php if ($activeLink): ?>
</a>
<?php endif; ?>
<?php if ($activeWrapper): ?>
</div>
<?php endif; ?>
<?php if (count($sliderContent) > 1): ?>
<script>
require(['jquery', 'NicolasBejean_CategoryWidget/js/glide', 'domReady!'], function($, Glide){
new Glide('.glide').mount();
});
</script>
<?php endif; ?>
<?php endif; ?>
.glide {
position: relative;
width: 100%;
box-sizing: border-box; }
.glide * {
box-sizing: inherit; }
.glide__track {
overflow: hidden; }
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform; }
.glide__slides--dragging {
user-select: none; }
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: initial;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; }
.glide__slide a {
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none; }
.glide__arrows {
-webkit-touch-callout: none;
user-select: none; }
.glide__bullets {
-webkit-touch-callout: none;
user-select: none; }
.glide--rtl {
direction: rtl; }
.glide__arrow {
position: absolute;
display: block;
top: 50%;
z-index: 2;
color: white;
text-transform: uppercase;
padding: 9px 12px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
opacity: 1;
cursor: pointer;
transition: opacity 150ms ease, border 300ms ease-in-out;
transform: translateY(-50%);
line-height: 1; }
.glide__arrow:focus {
outline: none; }
.glide__arrow:hover {
border-color: white; }
.glide__arrow--left {
left: 2em; }
.glide__arrow--right {
right: 2em; }
.glide__arrow--disabled {
opacity: 0.33; }
.glide__bullets {
position: absolute;
z-index: 2;
bottom: 2em;
left: 50%;
display: inline-flex;
list-style: none;
transform: translateX(-50%); }
.glide__bullet {
background-color: rgba(255, 255, 255, 0.5);
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
border: 2px solid transparent;
transition: all 300ms ease-in-out;
cursor: pointer;
line-height: 0;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
margin: 0 0.25em; }
.glide__bullet:focus {
outline: none; }
.glide__bullet:hover, .glide__bullet:focus {
border: 2px solid white;
background-color: rgba(255, 255, 255, 0.5); }
.glide__bullet--active {
background-color: white; }
.glide--swipeable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.glide--dragging {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing; }
.glide__arrow--prev { left: 0; }
.glide__arrow--next { right: 0; }
\ No newline at end of file
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment