Compare commits
6 Commits
master
...
new-modals
| Author | SHA1 | Date | |
|---|---|---|---|
|
b54345217e | ||
|
|
88dc19c543 | ||
|
|
de72395693 | ||
|
|
61767e4055 | ||
|
|
6735371850 | ||
|
|
e897ee9dae |
@ -57,6 +57,11 @@ This is the generic loader for widgets, maps, components, ...
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 20px; background: #F9F9F9;">
|
||||
@ -65,6 +70,11 @@ This is the generic loader for widgets, maps, components, ...
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
@ -78,6 +88,11 @@ This is the generic loader for widgets, maps, components, ...
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
@ -91,6 +106,11 @@ This is the generic loader for widgets, maps, components, ...
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
@ -112,6 +132,11 @@ This is the generic loader for widgets, maps, components, ...
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon--medium .CDB-LoaderIcon-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
836
src/scss/cdb-components/modals.scss
Normal file
836
src/scss/cdb-components/modals.scss
Normal file
@ -0,0 +1,836 @@
|
||||
// Modals styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Modals/Mod Error Creating Table
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
|
||||
<path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">We couldn’t fetch your data</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Don’t panic, follow these steps</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">GO BACK</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../cdb-variables/sizes';
|
||||
@import '../cdb-variables/colors';
|
||||
@import '../cdb-utilities/mixins';
|
||||
|
||||
|
||||
.Modal-listActions {
|
||||
margin-top: $baseSize * 4;
|
||||
}
|
||||
|
||||
.Modal-listActionsitem,
|
||||
.Modal-icon {
|
||||
margin-right: $baseSize * 2;
|
||||
}
|
||||
|
||||
.Modal-listActionsitem:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.Modal-icon {
|
||||
margin-top: 6px;
|
||||
line-height: 34px; /* align-items: baseline doesnt work correctly in ff */
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Loading
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export untitled map</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connect data, will be exported as a .carto file</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Download</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Success
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Check-Circle---Flattened-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 Z" id="Path" fill="#9DE0AD"></path>
|
||||
<polyline id="Shape" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="17.25 8.25 10.2341129 15.75 6.75 12.0542755"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export untitled map</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connect data, will be exported as a .carto file</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Download</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Delete Layer Warn
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="25px" viewBox="521 436 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M524.5,440 L540.5,440 L540.5,460 L524.5,460 L524.5,440 Z M528.5,437 L536.5,437 L536.5,440 L528.5,440 L528.5,437 Z M522,440 L544,440 L522,440 Z M528.5,443.5 L528.5,455.5 L528.5,443.5 Z M532.5,443.5 L532.5,455.5 L532.5,443.5 Z M536.5,443.5 L536.5,455.5 L536.5,443.5 Z" id="Shape" stroke="#F19243" stroke-width="1" fill="none"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m u-alertTextColor">You are about to delete layer gpc_000a11a_eng</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">{{name}} map will be affected and the widgets related to the layer, are you sure you want to delete it?</p>
|
||||
<ul class="Modal-listText">
|
||||
<li class="Modal-listTextItem">
|
||||
<p class="CDB-Text CDB-Size-medium">Deleting this layer will affect to <span class="CDB-Text is-semibold">4 Widgets, 3 Analysis</span> and <span class="CDB-Text is-semibold">2 Layers</span></p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem">
|
||||
<p class="CDB-Text CDB-Size-medium">Before deleting your map, you can <a href="#">export as .CARTO file</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Ok, Delete It</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
.Modal-listTextItem {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Loading
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
|
||||
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
||||
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Locking Dataset</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Your dataset is being locked, this may take a few seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Marker
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="13px" height="20px" viewBox="526 438 13 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Location-pin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(526.000000, 438.000000)">
|
||||
<path d="M6.5,0 C2.9160625,0 0,2.99083333 0,6.66666667 C0,10.2041667 5.9093125,19.4225 6.1611875,19.8125 C6.2359375,19.93 6.3635,20 6.5,20 C6.6365,20 6.7640625,19.93 6.8388125,19.8125 C7.0906875,19.4225 13,10.2041667 13,6.66666667 C13,2.99083333 10.0839375,0 6.5,0 L6.5,0 Z M6.5,18.8166667 C5.227625,16.7766667 0.8125,9.49666667 0.8125,6.66666667 C0.8125,3.45 3.36375,0.833333333 6.5,0.833333333 C9.63625,0.833333333 12.1875,3.45 12.1875,6.66666667 C12.1875,9.49583333 7.772375,16.7766667 6.5,18.8166667 L6.5,18.8166667 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M6.5,3.75 C4.931875,3.75 3.65625,5.05833333 3.65625,6.66666667 C3.65625,8.275 4.931875,9.58333333 6.5,9.58333333 C8.068125,9.58333333 9.34375,8.275 9.34375,6.66666667 C9.34375,5.05833333 8.068125,3.75 6.5,3.75 L6.5,3.75 Z M6.5,8.75 C5.380375,8.75 4.46875,7.815 4.46875,6.66666667 C4.46875,5.51833333 5.380375,4.58333333 6.5,4.58333333 C7.619625,4.58333333 8.53125,5.51833333 8.53125,6.66666667 C8.53125,7.815 7.619625,8.75 6.5,8.75 L6.5,8.75 Z" id="Shape" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Select a marker image</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Upload your icons or just use our nice selection.</p>
|
||||
<ul class="Modal-listText">
|
||||
<li class="Modal-listTextItem">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor">YOUR UPLOADS</p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor">SIMPLE ICONS FROM FREEPIK.COM</p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem">
|
||||
<p class="CDB-Text CDB-Size-small u-altTextColor">MAKI ICONS FROM MAPBOX</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Set image</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
/* SG
|
||||
# Modals/Drop
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="21px" height="25px" viewBox="538 412 21 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="hand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(538.000000, 412.000000)">
|
||||
<path d="M16,12 C15.586,12 15.2,12.127 14.881,12.344 C14.607,11.564 13.872,11 13,11 C12.586,11 12.2,11.127 11.881,11.344 C11.607,10.564 10.872,10 10,10 C9.129,10 8.393,10.564 8.119,11.344 C7.8,11.127 7.414,11 7,11 C5.897,11 5,11.897 5,13 L5,14 L4,14 C2.687,14 2,15.258 2,16.5 L2,17.5 C2,20.286 3.509,25 9.165,25 L12.5,25 C15.532,25 18,22.533 18,19.5 L18,15.5 L18,14 C18,12.897 17.103,12 16,12 L16,12 Z M17,19.5 C17,21.982 14.981,24 12.5,24 L9.165,24 C3.173,24 3,18.166 3,17.5 L3,16.5 C3,15.897 3.267,15 4,15 L5,15 L5,16.5 L6,16.5 L6,13 C6,12.449 6.448,12 7,12 C7.552,12 8,12.449 8,13 L8,14 L9,14 L9,13 L9,12 C9,11.449 9.448,11 10,11 C10.552,11 11,11.449 11,12 L11,13 L11,14 L12,14 L12,13 C12,12.449 12.448,12 13,12 C13.552,12 14,12.449 14,13 L14,14 L14,15.5 L15,15.5 L15,14 C15,13.449 15.448,13 16,13 C16.552,13 17,13.449 17,14 L17,15.5 L17,19.5 L17,19.5 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M20.5,8 L17.5,8 C17.224,8 17,8.224 17,8.5 C17,8.776 17.224,9 17.5,9 L20.5,9 C20.776,9 21,8.776 21,8.5 C21,8.224 20.776,8 20.5,8 L20.5,8 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M15.5,5 C15.628,5 15.756,4.951 15.854,4.854 L17.854,2.854 C18.049,2.659 18.049,2.342 17.854,2.147 C17.659,1.952 17.342,1.952 17.147,2.147 L15.147,4.147 C14.952,4.342 14.952,4.659 15.147,4.854 C15.244,4.951 15.372,5 15.5,5 L15.5,5 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M10.5,4 C10.776,4 11,3.776 11,3.5 L11,0.5 C11,0.224 10.776,0 10.5,0 C10.224,0 10,0.224 10,0.5 L10,3.5 C10,3.776 10.224,4 10.5,4 L10.5,4 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M5.146,4.854 C5.244,4.951 5.372,5 5.5,5 C5.628,5 5.756,4.951 5.854,4.854 C6.049,4.659 6.049,4.342 5.854,4.147 L3.854,2.147 C3.659,1.952 3.342,1.952 3.147,2.147 C2.952,2.342 2.952,2.659 3.147,2.854 L5.146,4.854 L5.146,4.854 Z" id="Shape" fill="#000000"></path>
|
||||
<path d="M4,8.5 C4,8.224 3.776,8 3.5,8 L0.5,8 C0.224,8 0,8.224 0,8.5 C0,8.776 0.224,9 0.5,9 L3.5,9 C3.776,9 4,8.776 4,8.5 L4,8.5 Z" id="Shape" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Drop your files here</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Your files will get automatically imported to CARTO.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Infowindow
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="504 400 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Smiley-black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(504.000000, 400.000000)">
|
||||
<path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#2E3C43" transform="translate(12.029506, 16.162000) scale(1, -1) translate(-12.029506, -16.162000) "></path>
|
||||
<path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#2E3C43"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Templating infowindows in CARTO</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">We support HTML infowindows, so here are some tips to work with them</p>
|
||||
<ul class="Modal-listText">
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
|
||||
<p class="CDB-Text CDB-Size-medium">You can use the name of yout fields as <span class="CDB-Text is-semibold">name, description</span>, etc.</p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
|
||||
<p class="CDB-Text CDB-Size-medium">Be sure you have <span class="Modal-listTextHighlight is-code">.cartodb-popup</span> and <span class="Modal-listTextHighlight is-code">close</span> elements. They are needed for basic interactions.</p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">3</div>
|
||||
<p class="CDB-Text CDB-Size-medium">If you want to know how to work with infowindows classes, check Mustache Docs or Mustache Demo</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Modal-listActions">
|
||||
<div class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Skip</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
.Modal-listTextHighlight {
|
||||
display: inline-block;
|
||||
padding: 4px 5px;
|
||||
border-radius: 2px;
|
||||
background: $cThirdBackground;
|
||||
}
|
||||
|
||||
.Modal-listTextHighlight.is-code {
|
||||
font: 500 12px 'Monaco', 'Monospace';
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Sync Table
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="23px" height="19px" viewBox="505 403 23 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="sync" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(505.000000, 403.000000)">
|
||||
<path d="M18.7752,8.80515789 C18.8928,8.92257895 19.0464,8.98189474 19.2,8.98189474 C19.3536,8.98189474 19.5072,8.92257895 19.6248,8.80515789 C19.8588,8.56910526 19.8588,8.18536842 19.6248,7.94931579 C19.3572,7.67936842 19.0788,7.42394737 18.7896,7.18547368 C18.75,7.15278947 18.7068,7.12494737 18.666,7.09226316 C16.6668,5.48105263 14.2068,4.59857895 11.61,4.59857895 L11.6076,4.59857895 L11.6052,4.59857895 C8.5776,4.59857895 5.7312,5.78852632 3.5916,7.94931579 C3.3576,8.18536842 3.3576,8.56910526 3.5916,8.80515789 C3.7092,8.92378947 3.8628,8.98189474 4.0164,8.98189474 C4.17,8.98189474 4.3236,8.92257895 4.44,8.80515789 C6.3552,6.87315789 8.9004,5.80910526 11.6076,5.80910526 C14.3148,5.80910526 16.86,6.87315789 18.7752,8.80515789 L18.7752,8.80515789 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M21.8124,5.65910526 C21.93,5.77773684 22.0836,5.83584211 22.2372,5.83584211 C22.3908,5.83584211 22.5444,5.77652632 22.662,5.65910526 C22.896,5.42305263 22.896,5.03931579 22.662,4.80326316 C16.566,-1.34621053 6.648,-1.34378947 0.5544,4.80326316 C0.3204,5.03931579 0.3204,5.42305263 0.5544,5.65910526 C0.7884,5.89515789 1.1688,5.89515789 1.4028,5.65910526 C7.0284,-0.0170526316 16.1868,-0.0158421053 21.8124,5.65910526 L21.8124,5.65910526 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M9.1884,9.46842105 C8.256,9.811 7.3752,10.3412105 6.6276,11.0953684 C6.3936,11.3314211 6.3936,11.7151579 6.6276,11.9512105 C6.7452,12.0698421 6.8988,12.1279474 7.0524,12.1279474 C7.206,12.1279474 7.3596,12.0686316 7.4772,11.9512105 C9.7548,9.65605263 13.4616,9.65605263 15.7404,11.9512105 C15.858,12.0698421 16.0116,12.1279474 16.1652,12.1279474 C16.3188,12.1279474 16.4724,12.0686316 16.59,11.9512105 C16.824,11.7151579 16.824,11.3314211 16.59,11.0953684 C14.5896,9.07863158 11.6844,8.54963158 9.1884,9.46842105 L9.1884,9.46842105 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M11.6076,13.4291579 C10.092,13.4291579 8.8596,14.6723684 8.8596,16.2000526 C8.8596,17.7289474 10.092,18.9721579 11.6076,18.9721579 C13.122,18.9721579 14.3544,17.7289474 14.3544,16.2000526 C14.3544,14.6735789 13.122,13.4291579 11.6076,13.4291579 L11.6076,13.4291579 Z M11.6076,17.7628421 C10.7544,17.7628421 10.0596,17.0619474 10.0596,16.2012632 C10.0596,15.3405789 10.7544,14.6408947 11.6076,14.6408947 C12.4608,14.6408947 13.1544,15.3405789 13.1544,16.2012632 C13.1544,17.0619474 12.4608,17.7628421 11.6076,17.7628421 L11.6076,17.7628421 Z" id="Shape" fill="#2E3C43"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Sync Table options</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Your table is in Sync with a Google Drive file: Accidents.csv.</p>
|
||||
<div class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<h3 class="CDB-Text CDB-Size-small is-semibold u-upperCase">Sync my data</h3>
|
||||
<ul class="Modal-listForm u-flex u-alignCenter CDB-Text CDB-Size-small">
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Never</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Every hour</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Every day</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Every week</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Every month</label>
|
||||
</li>
|
||||
<ul>
|
||||
</div>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
.Modal-listForm {
|
||||
margin-left: 24px;
|
||||
}
|
||||
.Modal-listFormItem {
|
||||
margin-right: 32px;
|
||||
}
|
||||
.Modal-listFormItem:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Export dataset
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="459 348 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Export-dataset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(459.000000, 348.000000)">
|
||||
<path d="M1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,9.5 L17,9.5 L17,5.502 C17,5.502 17,5.502 17,5.501 C17,5.5 17,5.501 17,5.5 C17,5.447 16.985,5.398 16.97,5.35 C16.966,5.337 16.967,5.323 16.962,5.311 C16.936,5.247 16.896,5.19 16.847,5.142 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L10.5,22 L10.5,21 L1,21 L1,1 L1,1 Z M12,1.708 L15.291,5 L12,5 L12,1.708 L12,1.708 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M17.5,11 C13.916,11 11,13.916 11,17.5 C11,21.084 13.916,24 17.5,24 C21.084,24 24,21.084 24,17.5 C24,13.916 21.084,11 17.5,11 L17.5,11 Z M17.5,23 C14.467,23 12,20.533 12,17.5 C12,14.467 14.467,12 17.5,12 C20.533,12 23,14.467 23,17.5 C23,20.533 20.533,23 17.5,23 L17.5,23 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M17.858,14.425 C17.767,14.331 17.641,14.272 17.5,14.272 C17.359,14.272 17.232,14.331 17.142,14.425 L14.965,16.602 C14.77,16.797 14.77,17.114 14.965,17.309 C15.16,17.504 15.477,17.504 15.672,17.309 L17,15.981 L17,20.226 C17,20.502 17.224,20.726 17.5,20.726 C17.776,20.726 18,20.502 18,20.226 L18,15.981 L19.328,17.309 C19.426,17.407 19.554,17.455 19.682,17.455 C19.81,17.455 19.938,17.406 20.036,17.309 C20.231,17.114 20.231,16.797 20.036,16.602 L17.858,14.425 L17.858,14.425 Z" id="Shape" fill="#2E3C43" transform="translate(17.500500, 17.499000) scale(1, -1) translate(-17.500500, -17.499000) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export dataset</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">All datasets will be compressed in a single file</p>
|
||||
<div class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<h3 class="CDB-Text CDB-Size-small is-semibold u-upperCase">Select format</h3>
|
||||
<ul class="Modal-listForm u-flex u-alignCenter CDB-Text CDB-Size-small">
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">CSV</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">SHP</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">KML</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">GEOJSON</label>
|
||||
</li>
|
||||
<li class="Modal-listFormItem">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">SVG</label>
|
||||
</li>
|
||||
<ul>
|
||||
</div>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Export map
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="459 348 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Export-dataset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(459.000000, 348.000000)">
|
||||
<path d="M1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,9.5 L17,9.5 L17,5.502 C17,5.502 17,5.502 17,5.501 C17,5.5 17,5.501 17,5.5 C17,5.447 16.985,5.398 16.97,5.35 C16.966,5.337 16.967,5.323 16.962,5.311 C16.936,5.247 16.896,5.19 16.847,5.142 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L10.5,22 L10.5,21 L1,21 L1,1 L1,1 Z M12,1.708 L15.291,5 L12,5 L12,1.708 L12,1.708 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M17.5,11 C13.916,11 11,13.916 11,17.5 C11,21.084 13.916,24 17.5,24 C21.084,24 24,21.084 24,17.5 C24,13.916 21.084,11 17.5,11 L17.5,11 Z M17.5,23 C14.467,23 12,20.533 12,17.5 C12,14.467 14.467,12 17.5,12 C20.533,12 23,14.467 23,17.5 C23,20.533 20.533,23 17.5,23 L17.5,23 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M17.858,14.425 C17.767,14.331 17.641,14.272 17.5,14.272 C17.359,14.272 17.232,14.331 17.142,14.425 L14.965,16.602 C14.77,16.797 14.77,17.114 14.965,17.309 C15.16,17.504 15.477,17.504 15.672,17.309 L17,15.981 L17,20.226 C17,20.502 17.224,20.726 17.5,20.726 C17.776,20.726 18,20.502 18,20.226 L18,15.981 L19.328,17.309 C19.426,17.407 19.554,17.455 19.682,17.455 C19.81,17.455 19.938,17.406 20.036,17.309 C20.231,17.114 20.231,16.797 20.036,16.602 L17.858,14.425 L17.858,14.425 Z" id="Shape" fill="#2E3C43" transform="translate(17.500500, 17.499000) scale(1, -1) translate(-17.500500, -17.499000) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export Untitled Map</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connected data, will be exported as a .carto file</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Export</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
/* SG
|
||||
# Modals/Mod Error Adding Widget
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
|
||||
<path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">Oops, there was a problem</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Close the page an open again. If the problem persists contact us at support@cartodb.com</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Contact us</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Close</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Mod Add points
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
pending icon
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Start by adding points, lines or polygons</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Select the geometry type that you want to have in “Untitled Dataset 1”</p>
|
||||
<ul class="Modal-listText">
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="u-iBlock u-rSpace--xl">
|
||||
<input class="CDB-Radio" type="radio" name="gender" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
</div>
|
||||
<div class="u-flex u-alignCenter">
|
||||
<div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
|
||||
<svg width="16px" height="16px" viewBox="525 410 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="lines" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(525.000000, 410.000000)">
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="12" y="0" width="4" height="4" rx="1"></rect>
|
||||
<path d="M3.5,12.5 L12.5,3.5" id="Line" stroke="#2E3C43" stroke-linecap="square"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Lines</h3>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Create a layer as a combination of one or more layers. </p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="u-iBlock u-rSpace--xl">
|
||||
<input class="CDB-Radio" type="radio" name="gender" value="02">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
</div>
|
||||
<div class="u-flex u-alignCenter">
|
||||
<div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
|
||||
<svg width="16px" height="16px" viewBox="520 417 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="points" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(520.000000, 417.000000)">
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="0" y="0" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="12" y="12" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Points</h3>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Specially if you are thinking on POI’s and concreet places</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="u-iBlock u-rSpace--xl">
|
||||
<input class="CDB-Radio" type="radio" name="gender" value="03">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
</div>
|
||||
<div class="u-flex u-alignCenter">
|
||||
<div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
|
||||
<svg width="16px" height="16px" viewBox="525 440 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="polygon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(525.000000, 440.000000)">
|
||||
<rect id="@bounds" x="0" y="0" width="16" height="16"></rect>
|
||||
<rect id="Rectangle-2665" fill="#2E3C43" x="3" y="14" width="10" height="1" rx="0.5"></rect>
|
||||
<rect id="Rectangle-2665-Copy" fill="#2E3C43" x="3" y="1" width="10" height="1" rx="0.5"></rect>
|
||||
<rect id="Rectangle-2665-Copy-2" fill="#2E3C43" x="1" y="3" width="1" height="10" rx="0.5"></rect>
|
||||
<rect id="Rectangle-2665-Copy-3" fill="#2E3C43" x="14" y="3" width="1" height="10" rx="0.5"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="0" y="0" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="12" y="0" width="4" height="4" rx="1"></rect>
|
||||
<rect id="Rectangle-1511" fill="#2E3C43" x="12" y="12" width="4" height="4" rx="1"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Polygons</h3>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Perfect for roads, rivers or tracks</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="Modal-listActions u-flex u-alignCenter">
|
||||
<div class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Skip</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
.Modal-addItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid $cMainLine;
|
||||
border-radius: $halfBaseSize;
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Mod Error Creating Table Steps
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
|
||||
<path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
|
||||
<path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">Error creating table from SQL query (8003)</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Don’t panic, follow these steps</p>
|
||||
<ul class="Modal-listText">
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
|
||||
<p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up.</p>
|
||||
</li>
|
||||
<li class="Modal-listTextItem u-flex u-alignCenter">
|
||||
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
|
||||
<p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up. <span class="Modal-listTextHighlight CDB-Text CDB-Size-small">f9736a7394-3984-3edo-85jrndi4333344e <a href=#" class="u-lSpace">SEND CODE</a></span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">GO BACK</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Correctly Generated Image
|
||||
|
||||
|
||||
```
|
||||
<div class="u-flex">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="24px" viewBox="504 400 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Smiley-black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(504.000000, 400.000000)">
|
||||
<path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#2E3C43" transform="translate(12.029506, 16.162000) scale(1, -1) translate(-12.029506, -16.162000) "></path>
|
||||
<path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
|
||||
<path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#2E3C43"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Your image has been generated correctly</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">You can use download your image in the following link <a href="#">http://saleiva.carto.com/images/super-image.2023131.a.png</a></p>
|
||||
<div class="Modal-listActions u-flex u-alignCenter">
|
||||
<div class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">DONE</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* SG
|
||||
# Modals/Layout
|
||||
|
||||
|
||||
```
|
||||
<div class="Modal">
|
||||
<div class="Modal-header">
|
||||
<div class="Modal-headerContainer">
|
||||
Header
|
||||
</div>
|
||||
</div>
|
||||
<div class="Modal-container">
|
||||
<div class="Modal-inner">
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
<p>Menu Entry</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Modal-footer">
|
||||
<div class="Modal-footerContainer">
|
||||
Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
.Modal {
|
||||
@include display-flex();
|
||||
@include flex-direction(column);
|
||||
height: 100%;
|
||||
background: $cThirdBackground;
|
||||
overflow: hidden;
|
||||
}
|
||||
.Modal-header {
|
||||
@include display-flex();
|
||||
@include justify-content(center);
|
||||
@include flex(0 0 auto);
|
||||
padding: $baseSize * 3 0;
|
||||
background: $cWhite;
|
||||
}
|
||||
.Modal-footer {
|
||||
@include display-flex();
|
||||
@include justify-content(center);
|
||||
@include flex(0 0 auto);
|
||||
}
|
||||
.Modal-container {
|
||||
@include display-flex();
|
||||
@include justify-content(center);
|
||||
@include flex(1 1 auto);
|
||||
overflow: scroll;
|
||||
}
|
||||
.Modal-inner,
|
||||
.Modal-headerContainer,
|
||||
.Modal-footerContainer {
|
||||
@include flex(0 0 auto);
|
||||
width: 940px;
|
||||
}
|
||||
|
||||
.Modal-footerContainer {
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid $cSecondaryLine;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user