1
0
Fork 0
mirror of synced 2024-06-02 10:54:44 +12:00

Updated UI

This commit is contained in:
Eldad Fux 2020-02-28 09:37:09 +02:00
parent b2841150e8
commit abb40bd80d
13 changed files with 90 additions and 80 deletions

View file

@ -108,84 +108,82 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
<img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" loading="lazy" width="30" height="30" />
</td>
<td data-title="Name: ">
<div class="text-one-liner">
<div data-ui-modal class="box modal width-large close" data-button-text="{{file.name}}" data-button-class="link">
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
<div data-ui-modal class="box modal width-large close" data-button-text="{{file.name}}" data-button-class="link" data-button-element="span">
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
<h1>Update File</h1>
<h1>Update File</h1>
<hr />
<hr />
<div class="row responsive modalize">
<div class="col span-8">
<form class="strip"
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Update Storage File"
data-service="storage.updateFile"
data-event="file-update-{{file.$id}}"
data-scope="sdk"
data-success="alert,trigger"
data-success-param-alert-text="File updated successfully"
data-success-param-trigger-events="storage.updateFile"
data-failure="alert"
data-failure-param-alert-text="Failed to update file"
data-failure-param-alert-classname="error">
<div class="row responsive modalize">
<div class="col span-8">
<form class="strip"
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Update Storage File"
data-service="storage.updateFile"
data-event="file-update-{{file.$id}}"
data-scope="sdk"
data-success="alert,trigger"
data-success-param-alert-text="File updated successfully"
data-success-param-trigger-events="storage.updateFile"
data-failure="alert"
data-failure-param-alert-text="Failed to update file"
data-failure-param-alert-classname="error">
<label for="files-fileId">File ID</label>
<div class="input-copy">
<input data-forms-copy type="text" name="fileId" id="files-fileId" disabled data-ls-bind="{{file.$id}}" />
</div>
<input type="hidden" name="folderId" id="files-folderId" data-cast-to="int" value="1">
<label for="files-fileId">File ID</label>
<div class="input-copy">
<input data-forms-copy type="text" name="fileId" id="files-fileId" disabled data-ls-bind="{{file.$id}}" />
</div>
<input type="hidden" name="folderId" id="files-folderId" data-cast-to="int" value="1">
<label for="file-read">Read Permissions (<a href="<?php echo $home; ?>/docs/permissions" target="_blank">Learn more</a>)</label>
<input type="hidden" id="file-read" name="read" required data-forms-tags data-cast-to="json" data-ls-bind="{{file.$permissions.read}}" />
<label for="file-write">Write Permissions (<a href="<?php echo $home; ?>/docs/permissions" target="_blank">Learn more</a>)</label>
<input type="hidden" id="file-write" name="write" required data-forms-tags data-cast-to="json" data-ls-bind="{{file.$permissions.write}}" />
</form>
<form class="strip"
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Delete File"
data-service="storage.deleteFile"
data-scope="sdk"
data-event="file-delete-{{file.$id}}"
data-confirm="Are you sure you want to delete this file?"
data-success="alert,trigger"
data-success-param-alert-text="Deleted file successfully"
data-success-param-trigger-events="storage.deleteFile"
data-failure="alert"
data-failure-param-alert-text="Failed to delete file"
data-failure-param-alert-classname="error">
<input type="hidden" name="fileId" data-ls-bind="{{file.$id}}" />
</form>
</div>
<div class="col span-4">
<div class="margin-bottom-small">File Preview</div>
<label for="file-read">Read Permissions (<a href="<?php echo $home; ?>/docs/permissions" target="_blank">Learn more</a>)</label>
<input type="hidden" id="file-read" name="read" required data-forms-tags data-cast-to="json" data-ls-bind="{{file.$permissions.read}}" />
<div class="margin-bottom-small">
<img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="100%" height="100%" />
</div>
<label for="file-write">Write Permissions (<a href="<?php echo $home; ?>/docs/permissions" target="_blank">Learn more</a>)</label>
<input type="hidden" id="file-write" name="write" required data-forms-tags data-cast-to="json" data-ls-bind="{{file.$permissions.write}}" />
</form>
<div class="margin-bottom-tiny">
<a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/view?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> New Window <i class="icon-link-ext"></i></a>
</div>
<form class="strip"
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Delete File"
data-service="storage.deleteFile"
data-scope="sdk"
data-event="file-delete-{{file.$id}}"
data-confirm="Are you sure you want to delete this file?"
data-success="alert,trigger"
data-success-param-alert-text="Deleted file successfully"
data-success-param-trigger-events="storage.deleteFile"
data-failure="alert"
data-failure-param-alert-text="Failed to delete file"
data-failure-param-alert-classname="error">
<div class="margin-bottom">
<a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/download?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Download <i class="icon-link-ext"></i></a>
</div>
<input type="hidden" name="fileId" data-ls-bind="{{file.$id}}" />
</form>
</div>
<div class="col span-4">
<div class="margin-bottom-small">File Preview</div>
<div class="margin-bottom-small">
<img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="100%" height="100%" />
</div>
<div class="margin-bottom-tiny">
<a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/view?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> New Window <i class="icon-link-ext"></i></a>
</div>
<div class="margin-bottom">
<a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/download?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Download <i class="icon-link-ext"></i></a>
</div>
</div>
<hr class="margin-top-no" />
<button class="pull-end reverse danger round" data-ls-ui-trigger="file-delete-{{file.$id}},modal-close"><i class="icon-trash"></i></button>
<button type="button" data-ls-ui-trigger="file-update-{{file.$id}},modal-close">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
<hr class="margin-top-no" />
<button class="pull-end reverse danger round" data-ls-ui-trigger="file-delete-{{file.$id}},modal-close"><i class="icon-trash"></i></button>
<button type="button" data-ls-ui-trigger="file-update-{{file.$id}},modal-close">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
</td>
<td data-title="Type: ">

View file

@ -26,7 +26,7 @@
<thead>
<tr>
<th width="240">Name</th>
<th width="80"></th>
<th width="100"></th>
<th width="120">Next Run</th>
<th width="120">Prev. Run</th>
<th></th>

View file

@ -11,7 +11,7 @@ $litespeed = $this->getParam('litespeed', true);
$analytics = $this->getParam('analytics', 'UA-26264668-9');
$env = $this->getParam('env', '');
$canonical = $this->getParam('canonical', '');
$buster = 38; // For DEV env
$buster = 43; // For DEV env
if(!empty($platforms)) {
$platforms = array_map(function($platform) {

View file

@ -2669,8 +2669,8 @@ if(element.value===router.params.project){return;}
return router.change("/console/home?project="+element.value);};element.addEventListener("change",function(){check();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-general-theme",controller:function(element,router,document){let toggle=function(c){if(document.body.classList.contains('theme-light')){document.body.classList.remove('theme-light');document.body.classList.add('theme-dark');window.localStorage.setItem('user-theme','theme-dark')}
else{document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');window.localStorage.setItem('user-theme','theme-light')}};element.addEventListener("click",function(){toggle();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset["sum"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=sum){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset["lsHref"]||"");list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=expression.parse(element.dataset["name"]||'');let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=expression.parse(element.dataset["buttonClass"]||"button-class");let buttonIcon=expression.parse(element.dataset["buttonIcon"]||'');let buttonEvent=expression.parse(element.dataset["buttonEvent"]||"");let buttonAlias=expression.parse(element.dataset["buttonAlias"]||"");let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=expression.parse(element.dataset["openEvent"]||'');let closeEvent=expression.parse(element.dataset["closeEvent"]||'submit');let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type="button";if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=expression.parse(element.dataset["name"]||'');let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonElement=expression.parse(element.dataset["buttonElement"]||"button");let buttonClass=expression.parse(element.dataset["buttonClass"]||"button-class");let buttonIcon=expression.parse(element.dataset["buttonIcon"]||'');let buttonEvent=expression.parse(element.dataset["buttonEvent"]||"");let buttonAlias=expression.parse(element.dataset["buttonAlias"]||"");let buttonElements=!buttonAlias?[document.createElement(buttonElement)]:document.querySelectorAll(buttonAlias);let openEvent=expression.parse(element.dataset["openEvent"]||'');let closeEvent=expression.parse(element.dataset["closeEvent"]||'submit');let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type=buttonElement;if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
if(buttonEvent){buttonElements.forEach(button=>{button.addEventListener("click",function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
element.classList.add("modal");if(!buttonAlias){buttonElements.forEach(button=>{element.parentNode.insertBefore(button,element);});}
let open=function(){document.documentElement.classList.add("modal-open");document.dispatchEvent(new CustomEvent("modal-open",{bubbles:false,cancelable:true}));element.classList.add("open");element.classList.remove("close");};let close=function(event){document.documentElement.classList.remove("modal-open");element.classList.add("close");element.classList.remove("open");};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener("click",open);});}

View file

@ -385,8 +385,8 @@ if(element.value===router.params.project){return;}
return router.change("/console/home?project="+element.value);};element.addEventListener("change",function(){check();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-general-theme",controller:function(element,router,document){let toggle=function(c){if(document.body.classList.contains('theme-light')){document.body.classList.remove('theme-light');document.body.classList.add('theme-dark');window.localStorage.setItem('user-theme','theme-dark')}
else{document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');window.localStorage.setItem('user-theme','theme-light')}};element.addEventListener("click",function(){toggle();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset["sum"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=sum){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset["lsHref"]||"");list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=expression.parse(element.dataset["name"]||'');let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=expression.parse(element.dataset["buttonClass"]||"button-class");let buttonIcon=expression.parse(element.dataset["buttonIcon"]||'');let buttonEvent=expression.parse(element.dataset["buttonEvent"]||"");let buttonAlias=expression.parse(element.dataset["buttonAlias"]||"");let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=expression.parse(element.dataset["openEvent"]||'');let closeEvent=expression.parse(element.dataset["closeEvent"]||'submit');let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type="button";if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=expression.parse(element.dataset["name"]||'');let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonElement=expression.parse(element.dataset["buttonElement"]||"button");let buttonClass=expression.parse(element.dataset["buttonClass"]||"button-class");let buttonIcon=expression.parse(element.dataset["buttonIcon"]||'');let buttonEvent=expression.parse(element.dataset["buttonEvent"]||"");let buttonAlias=expression.parse(element.dataset["buttonAlias"]||"");let buttonElements=!buttonAlias?[document.createElement(buttonElement)]:document.querySelectorAll(buttonAlias);let openEvent=expression.parse(element.dataset["openEvent"]||'');let closeEvent=expression.parse(element.dataset["closeEvent"]||'submit');let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type=buttonElement;if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
if(buttonEvent){buttonElements.forEach(button=>{button.addEventListener("click",function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
element.classList.add("modal");if(!buttonAlias){buttonElements.forEach(button=>{element.parentNode.insertBefore(button,element);});}
let open=function(){document.documentElement.classList.add("modal-open");document.dispatchEvent(new CustomEvent("modal-open",{bubbles:false,cancelable:true}));element.classList.add("open");element.classList.remove("close");};let close=function(event){document.documentElement.classList.remove("modal-open");element.classList.add("close");element.classList.remove("open");};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener("click",open);});}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -4,12 +4,13 @@
controller: function(document, element, expression) {
let name = expression.parse(element.dataset["name"] || '');
let buttonText = expression.parse(element.dataset["buttonText"] || "");
let buttonElement = expression.parse(element.dataset["buttonElement"] || "button");
let buttonClass = expression.parse(element.dataset["buttonClass"] || "button-class");
let buttonIcon = expression.parse(element.dataset["buttonIcon"] || '');
let buttonEvent = expression.parse(element.dataset["buttonEvent"] || "");
let buttonAlias = expression.parse(element.dataset["buttonAlias"] || "");
let buttonElements = !buttonAlias
? [document.createElement("button")]
? [document.createElement(buttonElement)]
: document.querySelectorAll(buttonAlias);
let openEvent = expression.parse(element.dataset["openEvent"] || ''); // When event triggers modal will open
let closeEvent = expression.parse(element.dataset["closeEvent"] || 'submit'); // When event triggers modal will close
@ -36,7 +37,7 @@
buttonElements.forEach(button => {
button.innerText = buttonText;
button.className = buttonClass;
button.type = "button";
button.type = buttonElement;
if (buttonIcon) {
let iconElement = document.createElement("i");

View file

@ -1,8 +1,8 @@
@watch: ~"only screen and (max-width: 260px)";
@phones: ~"only screen and (max-width: 550px)";
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1198px)";
@desktops: ~"only screen and (min-width: 1199) and (max-width: 1300px)";
@tvs: ~"only screen and (min-width: 1200px)";
//@desktops: ~"only screen and (min-width: 1199) and (max-width: 1300px)";
@desktops: ~"only screen and (min-width: 1199px)";
img[src=""] {
visibility: hidden;
@ -42,6 +42,7 @@ html {
body {
margin: 0;
background: var(--config-console-background) no-repeat fixed;
min-width: 300px;
}
ul {

View file

@ -50,6 +50,10 @@ button,
z-index: 2;
bottom: 30px;
.func-end(30px);
@media @phones {
.func-end(15px);
}
}
&.fill {
@ -837,6 +841,10 @@ label.switch {
.func-margin-start(-15px);
margin-top: -25px;
margin-bottom: 20px;
@media @phones {
.func-margin-start(-5px);
}
}
hr {
@ -1134,6 +1142,7 @@ ol {
padding: 0;
width: auto;
margin: 0;
max-width: 100%;
}
ul.tags-list {

View file

@ -18,7 +18,7 @@
.desktops-only {
display: none;
@media @desktops, @tvs {
@media @desktops {
display: inherit!important;
}
}

View file

@ -130,6 +130,7 @@ table {
white-space: normal;
height: 40px;
line-height: 40px;
width: ~"calc(100% - 40px)";
&:first-child, &:last-child {
padding: 0 10px;