archi_clean
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
extends@: default
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
fields:
|
||||
advanced:
|
||||
fields:
|
||||
columns:
|
||||
fields:
|
||||
column1:
|
||||
fields:
|
||||
header.body_classes:
|
||||
markdown: true
|
||||
description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'
|
||||
@@ -0,0 +1,150 @@
|
||||
extends@: default
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
|
||||
fields:
|
||||
content:
|
||||
fields:
|
||||
sect_residence:
|
||||
type: section
|
||||
title: En residence
|
||||
underline: true
|
||||
ordering@: 1
|
||||
|
||||
fields:
|
||||
header.residence:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: En residence ?
|
||||
highlight: 1
|
||||
options:
|
||||
1: Yes
|
||||
0: No
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
header.date_start:
|
||||
type: datetime
|
||||
label: Start
|
||||
toggleable: true
|
||||
|
||||
header.date_end:
|
||||
type: datetime
|
||||
label: End
|
||||
toggleable: true
|
||||
|
||||
sect_content:
|
||||
type: section
|
||||
title: Contenue
|
||||
underline: true
|
||||
ordering@: 2
|
||||
|
||||
|
||||
blog:
|
||||
type: tab
|
||||
title: Blog Item
|
||||
|
||||
fields:
|
||||
|
||||
header_options:
|
||||
type: section
|
||||
title: Header Options
|
||||
underline: true
|
||||
|
||||
header.continue_link:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: DF Style Link
|
||||
help: Daring Fireball style title link
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
header.header_image:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Display Header Image
|
||||
help: Enabled displaying of a header image
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.header_image_file:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image File
|
||||
help: image filename that exists in the page folder. If not provided, will use the first image found.
|
||||
placeholder: "For example: myimage.jpg"
|
||||
|
||||
header.header_image_width:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Width
|
||||
size: small
|
||||
help: Header width in px
|
||||
placeholder: Default is 900
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
header.header_image_height:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Height
|
||||
size: small
|
||||
help: Header height in px
|
||||
placeholder: Default is 300
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
summary:
|
||||
type: section
|
||||
title: Summary
|
||||
underline: true
|
||||
|
||||
header.summary.enabled:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Summary
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.summary.format:
|
||||
type: select
|
||||
toggleable: true
|
||||
label: Format
|
||||
classes: fancy
|
||||
options:
|
||||
'short': 'Use the first occurence of delimiter or size'
|
||||
'long': 'Summary delimiter will be ignored'
|
||||
|
||||
header.summary.size:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Size
|
||||
classes: large
|
||||
placeholder: 300
|
||||
validate:
|
||||
type: int
|
||||
min: 1
|
||||
|
||||
header.summary.delimiter:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Summary delimiter
|
||||
classes: large
|
||||
placeholder: ===
|
||||
|
||||
import@:
|
||||
type: partials/blog-bits
|
||||
@@ -12,4 +12,4 @@ form:
|
||||
fields:
|
||||
header.body_classes:
|
||||
markdown: true
|
||||
description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'
|
||||
description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
extends@: default
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
|
||||
fields:
|
||||
content:
|
||||
fields:
|
||||
sect_dates:
|
||||
type: section
|
||||
title: Dates
|
||||
underline: true
|
||||
ordering@: 1
|
||||
|
||||
fields:
|
||||
header.date_start:
|
||||
type: datetime
|
||||
label: Start
|
||||
toggleable: true
|
||||
|
||||
header.date_end:
|
||||
type: datetime
|
||||
label: End
|
||||
toggleable: true
|
||||
|
||||
sect_content:
|
||||
type: section
|
||||
title: Contenu
|
||||
underline: true
|
||||
ordering@: 2
|
||||
|
||||
fields:
|
||||
header.lieux:
|
||||
type: text
|
||||
label: Lieux de l'événement
|
||||
style: vertical
|
||||
|
||||
header.artistes:
|
||||
type: text
|
||||
label: Artiste(s)
|
||||
style: vertical
|
||||
ordering@: 4
|
||||
|
||||
sect_sidebar:
|
||||
type: section
|
||||
title: Buy tickets
|
||||
underline: true
|
||||
|
||||
fields:
|
||||
header.buy:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Display "Buy tickets"
|
||||
highlight: 1
|
||||
options:
|
||||
1: Yes
|
||||
0: No
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
header.url:
|
||||
type: text
|
||||
label: Url
|
||||
style: vertical
|
||||
|
||||
blog:
|
||||
type: tab
|
||||
title: Blog Item
|
||||
|
||||
fields:
|
||||
|
||||
header_options:
|
||||
type: section
|
||||
title: Header Options
|
||||
underline: true
|
||||
|
||||
header.continue_link:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: DF Style Link
|
||||
help: Daring Fireball style title link
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
header.header_image:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Display Header Image
|
||||
help: Enabled displaying of a header image
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.header_image_file:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image File
|
||||
help: image filename that exists in the page folder. If not provided, will use the first image found.
|
||||
placeholder: "For example: myimage.jpg"
|
||||
|
||||
header.header_image_width:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Width
|
||||
size: small
|
||||
help: Header width in px
|
||||
placeholder: Default is 900
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
header.header_image_height:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Height
|
||||
size: small
|
||||
help: Header height in px
|
||||
placeholder: Default is 300
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
summary:
|
||||
type: section
|
||||
title: Summary
|
||||
underline: true
|
||||
|
||||
header.summary.enabled:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Summary
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.summary.format:
|
||||
type: select
|
||||
toggleable: true
|
||||
label: Format
|
||||
classes: fancy
|
||||
options:
|
||||
'short': 'Use the first occurence of delimiter or size'
|
||||
'long': 'Summary delimiter will be ignored'
|
||||
|
||||
header.summary.size:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Size
|
||||
classes: large
|
||||
placeholder: 300
|
||||
validate:
|
||||
type: int
|
||||
min: 1
|
||||
|
||||
header.summary.delimiter:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Summary delimiter
|
||||
classes: large
|
||||
placeholder: ===
|
||||
|
||||
import@:
|
||||
type: partials/blog-bits
|
||||
@@ -5,6 +5,26 @@ form:
|
||||
tabs:
|
||||
|
||||
fields:
|
||||
content:
|
||||
fields:
|
||||
header.date_one_day:
|
||||
type: datetime
|
||||
label: Day event
|
||||
toggleable: true
|
||||
ordering@: -5
|
||||
|
||||
header.date_start:
|
||||
type: datetime
|
||||
label: Start event
|
||||
toggleable: true
|
||||
ordering@: -4
|
||||
|
||||
header.date_end:
|
||||
type: datetime
|
||||
label: Start end
|
||||
toggleable: true
|
||||
ordering@: -3
|
||||
|
||||
blog:
|
||||
type: tab
|
||||
title: Blog Item
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
title: Text
|
||||
'@extends': default
|
||||
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
@@ -9,11 +10,59 @@ form:
|
||||
fields:
|
||||
header.media_order:
|
||||
label: Page Media (first one will be displayed next to your content)
|
||||
header.image_align:
|
||||
type: select
|
||||
label: Image position
|
||||
classes: fancy
|
||||
default: left
|
||||
map:
|
||||
type: tab
|
||||
title: Map
|
||||
ordering@: -2
|
||||
|
||||
fields:
|
||||
header.map:
|
||||
type: toggle
|
||||
label: Map
|
||||
highlight: 1
|
||||
default: 1
|
||||
options:
|
||||
'left': 'Left'
|
||||
'right': 'Right'
|
||||
1: 'Yes'
|
||||
0: 'No'
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
adress:
|
||||
type: section
|
||||
title: Adress
|
||||
underline: true
|
||||
|
||||
fields:
|
||||
header.street:
|
||||
name: street
|
||||
type: text
|
||||
label: Street
|
||||
size : large
|
||||
style: vertical
|
||||
|
||||
header.city:
|
||||
name: city
|
||||
type: text
|
||||
label: City
|
||||
size : medium
|
||||
style: vertical
|
||||
|
||||
coordinated:
|
||||
type: section
|
||||
title: Coordinated
|
||||
underline: true
|
||||
|
||||
fields:
|
||||
header.x:
|
||||
name: x
|
||||
type: text
|
||||
label: Longitude
|
||||
size : medium
|
||||
style: vertical
|
||||
|
||||
header.y:
|
||||
name: y
|
||||
type: text
|
||||
label: Latitude
|
||||
size : medium
|
||||
style: vertical
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
extends@: default
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
|
||||
fields:
|
||||
content:
|
||||
fields:
|
||||
sect_dates:
|
||||
type: section
|
||||
title: Dates
|
||||
underline: true
|
||||
ordering@: 1
|
||||
|
||||
fields:
|
||||
header.date_start:
|
||||
type: datetime
|
||||
label: Start
|
||||
toggleable: true
|
||||
|
||||
header.date_end:
|
||||
type: datetime
|
||||
label: End
|
||||
toggleable: true
|
||||
|
||||
sect_content:
|
||||
type: section
|
||||
title: Contenu
|
||||
underline: true
|
||||
ordering@: 2
|
||||
|
||||
blog:
|
||||
type: tab
|
||||
title: Blog Item
|
||||
|
||||
fields:
|
||||
|
||||
header_options:
|
||||
type: section
|
||||
title: Header Options
|
||||
underline: true
|
||||
|
||||
header.continue_link:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: DF Style Link
|
||||
help: Daring Fireball style title link
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
header.header_image:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Display Header Image
|
||||
help: Enabled displaying of a header image
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.header_image_file:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image File
|
||||
help: image filename that exists in the page folder. If not provided, will use the first image found.
|
||||
placeholder: "For example: myimage.jpg"
|
||||
|
||||
header.header_image_width:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Width
|
||||
size: small
|
||||
help: Header width in px
|
||||
placeholder: Default is 900
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
header.header_image_height:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Image Height
|
||||
size: small
|
||||
help: Header height in px
|
||||
placeholder: Default is 300
|
||||
validate:
|
||||
type: int
|
||||
min: 0
|
||||
max: 5000
|
||||
|
||||
summary:
|
||||
type: section
|
||||
title: Summary
|
||||
underline: true
|
||||
|
||||
header.summary.enabled:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Summary
|
||||
highlight: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
|
||||
header.summary.format:
|
||||
type: select
|
||||
toggleable: true
|
||||
label: Format
|
||||
classes: fancy
|
||||
options:
|
||||
'short': 'Use the first occurence of delimiter or size'
|
||||
'long': 'Summary delimiter will be ignored'
|
||||
|
||||
header.summary.size:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Size
|
||||
classes: large
|
||||
placeholder: 300
|
||||
validate:
|
||||
type: int
|
||||
min: 1
|
||||
|
||||
header.summary.delimiter:
|
||||
type: text
|
||||
toggleable: true
|
||||
label: Summary delimiter
|
||||
classes: large
|
||||
placeholder: ===
|
||||
|
||||
import@:
|
||||
type: partials/blog-bits
|
||||
@@ -34,7 +34,8 @@ form:
|
||||
type: toggle
|
||||
toggleable: true
|
||||
label: Show Sidebar
|
||||
highlight: 1
|
||||
highlight: 0
|
||||
default: 0
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
@@ -61,4 +62,4 @@ form:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
type: bool
|
||||
type: bool
|
||||
|
||||
@@ -315,8 +315,6 @@ legend { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.8rem; }
|
||||
|
||||
.form-input:focus, .search-input:focus, [data-grav-field="array"] input:focus, [data-grav-field="array"] textarea:focus { box-shadow: 0 0 0 0.1rem rgba(48, 133, 238, 0.2); border-color: #3085EE; }
|
||||
|
||||
.form-input::-webkit-input-placeholder, .search-input::-webkit-input-placeholder, [data-grav-field="array"] input::-webkit-input-placeholder, [data-grav-field="array"] textarea::-webkit-input-placeholder { color: #acb3c2; }
|
||||
|
||||
.form-input:-ms-input-placeholder, .search-input:-ms-input-placeholder, [data-grav-field="array"] input:-ms-input-placeholder, [data-grav-field="array"] textarea:-ms-input-placeholder { color: #acb3c2; }
|
||||
|
||||
.form-input::-ms-input-placeholder, .search-input::-ms-input-placeholder, [data-grav-field="array"] input::-ms-input-placeholder, [data-grav-field="array"] textarea::-ms-input-placeholder { color: #acb3c2; }
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.bx-wrapper{position:relative;margin-bottom:60px;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;border:5px solid #fff;background:#fff}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(images/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{background:#000}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(images/controls.png) 0 -32px no-repeat}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(images/controls.png) -43px -32px no-repeat}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(images/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(images/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
|
||||
@@ -0,0 +1,640 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
function bxslider() {
|
||||
$('.slider').bxSlider({
|
||||
mode: 'horizontal',
|
||||
captions: true,
|
||||
shrinkItems:true,
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
bxslider();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
|
||||
function leaflet(id) {
|
||||
var id = $('.map').each(function() {
|
||||
$(this).attr('id');
|
||||
});
|
||||
|
||||
for (var i = 0; i < id.length; i++) {
|
||||
|
||||
console.log(id[i]);
|
||||
|
||||
for (var i = 0; i < coord_data.x.length; i++) {
|
||||
for (var i = 0; i < coord_data.y.length; i++) {
|
||||
|
||||
console.log(coord_data.x[i]);
|
||||
console.log(coord_data.y[i]);
|
||||
|
||||
var paris = L.marker([coord_data.x[i], coord_data.y[i]]).bindPopup('This is Paris, Fr.')
|
||||
var cities = L.layerGroup([paris]);
|
||||
var mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2V2aW50ZXNzaWVyIiwiYSI6ImNrMGdqbjZsczAweWkzcW5yMWt4M2UzamYifQ.Tfarhi-XqGp7iIpwfANSGg';
|
||||
|
||||
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light'})
|
||||
|
||||
var map = L.map(id[i], {
|
||||
center: [coord_data.x[i], coord_data.y[i]],
|
||||
zoom: 15,
|
||||
layers: [grayscale]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
leaflet();
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "theme/variables";
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Experimentals
|
||||
@import "spectre/autocomplete";
|
||||
@import "spectre/calendars";
|
||||
@import "spectre/carousels";
|
||||
@import "spectre/comparison-sliders";
|
||||
@import "spectre/filters";
|
||||
@import "spectre/meters";
|
||||
@import "spectre/off-canvas";
|
||||
@import "spectre/parallax";
|
||||
@import "spectre/progress";
|
||||
@import "spectre/sliders";
|
||||
@import "spectre/timelines";
|
||||
@import "spectre/viewer-360";
|
||||
@@ -1,11 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "theme/variables";
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Icons
|
||||
@import "spectre/icons/icons-core";
|
||||
@import "spectre/icons/icons-navigation";
|
||||
@import "spectre/icons/icons-action";
|
||||
@import "spectre/icons/icons-object";
|
||||
@@ -1,53 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "theme/variables";
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Reset and dependencies
|
||||
@import "spectre/normalize";
|
||||
@import "spectre/base";
|
||||
|
||||
// Elements
|
||||
@import "spectre/typography";
|
||||
@import "spectre/asian";
|
||||
@import "spectre/tables";
|
||||
@import "spectre/buttons";
|
||||
@import "spectre/forms";
|
||||
@import "spectre/labels";
|
||||
@import "spectre/codes";
|
||||
@import "spectre/media";
|
||||
|
||||
// Layout
|
||||
@import "spectre/layout";
|
||||
@import "spectre/hero";
|
||||
@import "spectre/navbar";
|
||||
|
||||
// Components
|
||||
@import "spectre/accordions";
|
||||
@import "spectre/avatars";
|
||||
@import "spectre/badges";
|
||||
@import "spectre/breadcrumbs";
|
||||
@import "spectre/bars";
|
||||
@import "spectre/cards";
|
||||
@import "spectre/chips";
|
||||
@import "spectre/dropdowns";
|
||||
@import "spectre/empty";
|
||||
@import "spectre/menus";
|
||||
@import "spectre/modals";
|
||||
@import "spectre/navs";
|
||||
@import "spectre/pagination";
|
||||
@import "spectre/panels";
|
||||
@import "spectre/popovers";
|
||||
@import "spectre/steps";
|
||||
@import "spectre/tabs";
|
||||
@import "spectre/tiles";
|
||||
@import "spectre/toasts";
|
||||
@import "spectre/tooltips";
|
||||
|
||||
// Utility classes
|
||||
@import "spectre/animations";
|
||||
@import "spectre/utilities";
|
||||
|
||||
// Extras
|
||||
@import "theme/extensions";
|
||||
@@ -1,38 +0,0 @@
|
||||
// Accordions
|
||||
.accordion {
|
||||
input:checked ~,
|
||||
&[open] {
|
||||
& .accordion-header {
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
& .accordion-body {
|
||||
max-height: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
display: block;
|
||||
padding: $unit-1 $unit-2;
|
||||
|
||||
.icon {
|
||||
transition: transform .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
margin-bottom: $layout-spacing;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height .25s;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove default details marker in Webkit
|
||||
summary.accordion-header {
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// Animations
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-$unit-8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
// Optimized for East Asian CJK
|
||||
html:lang(zh),
|
||||
html:lang(zh-Hans),
|
||||
.lang-zh,
|
||||
.lang-zh-hans {
|
||||
font-family: $cjk-zh-hans-font-family;
|
||||
}
|
||||
|
||||
html:lang(zh-Hant),
|
||||
.lang-zh-hant {
|
||||
font-family: $cjk-zh-hant-font-family;
|
||||
}
|
||||
|
||||
html:lang(ja),
|
||||
.lang-ja {
|
||||
font-family: $cjk-jp-font-family;
|
||||
}
|
||||
|
||||
html:lang(ko),
|
||||
.lang-ko {
|
||||
font-family: $cjk-ko-font-family;
|
||||
}
|
||||
|
||||
:lang(zh),
|
||||
:lang(ja),
|
||||
.lang-cjk {
|
||||
ins,
|
||||
u {
|
||||
border-bottom: $border-width solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del + del,
|
||||
del + s,
|
||||
ins + ins,
|
||||
ins + u,
|
||||
s + del,
|
||||
s + s,
|
||||
u + ins,
|
||||
u + u {
|
||||
margin-left: .125em;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
// Autocomplete
|
||||
.form-autocomplete {
|
||||
position: relative;
|
||||
|
||||
.form-autocomplete-input {
|
||||
align-content: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
min-height: $unit-8;
|
||||
padding: $unit-h;
|
||||
|
||||
&.is-focused {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
flex: 1 0 auto;
|
||||
height: $unit-6;
|
||||
line-height: $unit-4;
|
||||
margin: $unit-h;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.autocomplete-oneline {
|
||||
.form-autocomplete-input {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chip {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
// Avatars
|
||||
.avatar {
|
||||
@include avatar-base();
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
color: rgba($light-color, .85);
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&.avatar-xs {
|
||||
@include avatar-base($unit-4);
|
||||
}
|
||||
&.avatar-sm {
|
||||
@include avatar-base($unit-6);
|
||||
}
|
||||
&.avatar-lg {
|
||||
@include avatar-base($unit-12);
|
||||
}
|
||||
&.avatar-xl {
|
||||
@include avatar-base($unit-16);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
.avatar-icon,
|
||||
.avatar-presence {
|
||||
background: $bg-color-light;
|
||||
bottom: 14.64%;
|
||||
height: 50%;
|
||||
padding: $border-width-lg;
|
||||
position: absolute;
|
||||
right: 14.64%;
|
||||
transform: translate(50%, 50%);
|
||||
width: 50%;
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
|
||||
.avatar-presence {
|
||||
background: $gray-color;
|
||||
box-shadow: 0 0 0 $border-width-lg $light-color;
|
||||
border-radius: 50%;
|
||||
height: .5em;
|
||||
width: .5em;
|
||||
|
||||
&.online {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&.busy {
|
||||
background: $error-color;
|
||||
}
|
||||
|
||||
&.away {
|
||||
background: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-initial]::before {
|
||||
color: currentColor;
|
||||
content: attr(data-initial);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
// Badges
|
||||
.badge {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&[data-badge],
|
||||
&:not([data-badge]) {
|
||||
&::after {
|
||||
background: $primary-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 0 0 .1rem $bg-color-light;
|
||||
color: $light-color;
|
||||
content: attr(data-badge);
|
||||
display: inline-block;
|
||||
transform: translate(-.05rem, -.5rem);
|
||||
}
|
||||
}
|
||||
&[data-badge] {
|
||||
&::after {
|
||||
font-size: $font-size-sm;
|
||||
height: .9rem;
|
||||
line-height: 1;
|
||||
min-width: .9rem;
|
||||
padding: .1rem .2rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&:not([data-badge]),
|
||||
&[data-badge=""] {
|
||||
&::after {
|
||||
height: 6px;
|
||||
min-width: 6px;
|
||||
padding: 0;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Badges for Buttons
|
||||
&.btn {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Badges for Avatars
|
||||
&.avatar {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 14.64%;
|
||||
right: 14.64%;
|
||||
transform: translate(50%, -50%);
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// Bars
|
||||
.bar {
|
||||
background: $bg-color-dark;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: $unit-4;
|
||||
width: 100%;
|
||||
|
||||
&.bar-sm {
|
||||
height: $unit-1;
|
||||
}
|
||||
|
||||
// TODO: attr() support
|
||||
.bar-item {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
flex-shrink: 0;
|
||||
line-height: $unit-4;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slider bar
|
||||
.bar-slider {
|
||||
height: $border-width-lg;
|
||||
margin: $layout-spacing 0;
|
||||
position: relative;
|
||||
|
||||
.bar-item {
|
||||
left: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
&:not(:last-child):first-child {
|
||||
background: $bg-color-dark;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-slider-btn {
|
||||
background: $primary-color;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: $unit-3;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: $unit-3;
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0 .1rem $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
// Base
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: $html-font-size;
|
||||
line-height: $html-line-height;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $body-bg;
|
||||
color: $body-font-color;
|
||||
font-family: $body-font-family;
|
||||
font-size: $font-size;
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $link-color-dark;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $link-color-light;
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// Breadcrumbs
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
margin: $unit-1 0;
|
||||
padding: $unit-1 0;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $gray-color-dark;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $unit-1 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $unit-1;
|
||||
|
||||
a {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
color: $gray-color-dark;
|
||||
content: "/";
|
||||
padding-right: $unit-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
// Buttons
|
||||
.btn {
|
||||
appearance: none;
|
||||
background: $bg-color-light;
|
||||
border: $border-width solid $primary-color;
|
||||
border-radius: $border-radius;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $secondary-color;
|
||||
border-color: $primary-color-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
text-decoration: none;
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $light-color;
|
||||
border-left-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Button Primary
|
||||
&.btn-primary {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color-dark;
|
||||
color: $light-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: darken($primary-color-dark, 2%);
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken($primary-color-dark, 4%);
|
||||
border-color: darken($primary-color-dark, 7%);
|
||||
color: $light-color;
|
||||
}
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $light-color;
|
||||
border-left-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button Colors
|
||||
&.btn-success {
|
||||
@include button-variant($success-color);
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
@include button-variant($error-color);
|
||||
}
|
||||
|
||||
// Button Link
|
||||
&.btn-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: $link-color;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
&.btn-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
// Button Block
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Button Action
|
||||
&.btn-action {
|
||||
width: $control-size;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&.btn-sm {
|
||||
width: $control-size-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
width: $control-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Clear
|
||||
&.btn-clear {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: currentColor;
|
||||
height: $unit-5;
|
||||
line-height: $unit-4;
|
||||
margin-left: $unit-1;
|
||||
margin-right: -2px;
|
||||
opacity: 1;
|
||||
padding: $unit-h;
|
||||
text-decoration: none;
|
||||
width: $unit-5;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba($bg-color, .5);
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\2715";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.btn {
|
||||
flex: 1 0 auto;
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-group-block {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
// Calendars
|
||||
.calendar {
|
||||
border: $border-width solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
min-width: 280px;
|
||||
|
||||
.calendar-nav {
|
||||
align-items: center;
|
||||
background: $bg-color;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
display: flex;
|
||||
font-size: $font-size-lg;
|
||||
padding: $layout-spacing;
|
||||
}
|
||||
|
||||
.calendar-header,
|
||||
.calendar-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: $layout-spacing 0;
|
||||
|
||||
.calendar-date {
|
||||
flex: 0 0 14.28%; // 7 calendar-items each row
|
||||
max-width: 14.28%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
background: $bg-color;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
color: $gray-color;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
border: 0;
|
||||
padding: $unit-1;
|
||||
|
||||
.date-item {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: $border-width solid transparent;
|
||||
border-radius: 50%;
|
||||
color: $gray-color-dark;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
height: $unit-7;
|
||||
line-height: $unit-5;
|
||||
outline: none;
|
||||
padding: $unit-h;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
width: $unit-7;
|
||||
|
||||
&.date-today {
|
||||
border-color: $secondary-color-dark;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $secondary-color-light;
|
||||
border-color: $secondary-color-dark;
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
// Calendar badge support
|
||||
&.badge {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .25;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.prev-month,
|
||||
&.next-month {
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-range {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: $secondary-color;
|
||||
content: "";
|
||||
height: $unit-7;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.range-start {
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
&.range-end {
|
||||
&::before {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.range-start,
|
||||
&.range-end {
|
||||
.date-item {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.date-item {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendars size
|
||||
&.calendar-lg {
|
||||
.calendar-body {
|
||||
padding: 0;
|
||||
|
||||
.calendar-date {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
border-right: $border-width solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 5.5rem;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(7n) {
|
||||
border-right: 0;
|
||||
}
|
||||
&:nth-last-child(-n+7) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-item {
|
||||
align-self: flex-end;
|
||||
height: $unit-7;
|
||||
margin-right: $layout-spacing-sm;
|
||||
margin-top: $layout-spacing-sm;
|
||||
}
|
||||
|
||||
.calendar-range {
|
||||
&::before {
|
||||
top: 19px;
|
||||
}
|
||||
&.range-start {
|
||||
&::before {
|
||||
left: auto;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
&.range-end {
|
||||
&::before {
|
||||
right: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-events {
|
||||
flex-grow: 1;
|
||||
line-height: 1;
|
||||
overflow-y: auto;
|
||||
padding: $layout-spacing-sm;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-sm;
|
||||
display: block;
|
||||
margin: $unit-h auto;
|
||||
overflow: hidden;
|
||||
padding: 3px 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
// Cards
|
||||
.card {
|
||||
background: $bg-color-light;
|
||||
border: $border-width solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: $layout-spacing-lg;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $layout-spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
padding-top: $layout-spacing-lg;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
|
||||
img {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
img {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
// Carousels
|
||||
// The number of carousel images
|
||||
$carousel-number: 8;
|
||||
|
||||
%carousel-image-checked {
|
||||
animation: carousel-slidein .75s ease-in-out 1;
|
||||
opacity: 1;
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
|
||||
%carousel-nav-checked {
|
||||
color: $gray-color-light;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
background: $bg-color;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
z-index: $zindex-0;
|
||||
|
||||
.carousel-container {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
animation: carousel-slideout 1s ease-in-out 1;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
.item-prev,
|
||||
.item-next {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-prev,
|
||||
.item-next {
|
||||
background: rgba($gray-color-light, .25);
|
||||
border-color: rgba($gray-color-light, .5);
|
||||
color: $gray-color-light;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: all .4s;
|
||||
transform: translateY(-50%);
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
.item-prev {
|
||||
left: 1rem;
|
||||
}
|
||||
.item-next {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-locator {
|
||||
@for $i from 1 through ($carousel-number) {
|
||||
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
|
||||
@extend %carousel-image-checked;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through ($carousel-number) {
|
||||
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
|
||||
@extend %carousel-nav-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
bottom: $layout-spacing;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
z-index: $zindex-1;
|
||||
|
||||
.nav-item {
|
||||
color: rgba($gray-color-light, .5);
|
||||
display: block;
|
||||
flex: 1 0 auto;
|
||||
height: $unit-8;
|
||||
margin: $unit-1;
|
||||
max-width: 2.5rem;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-h;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel-slidein {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel-slideout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// Chips
|
||||
.chip {
|
||||
align-items: center;
|
||||
background: $bg-color-dark;
|
||||
border-radius: 5rem;
|
||||
display: inline-flex;
|
||||
font-size: 90%;
|
||||
height: $unit-6;
|
||||
line-height: $unit-4;
|
||||
margin: $unit-h;
|
||||
max-width: $control-width-sm;
|
||||
overflow: hidden;
|
||||
padding: $unit-1 $unit-2;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: -$unit-2;
|
||||
margin-right: $unit-1;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
border-radius: 50%;
|
||||
transform: scale(.75);
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
// Codes
|
||||
code {
|
||||
@include label-base();
|
||||
@include label-variant($code-color, lighten($code-color, 42.5%));
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.code {
|
||||
border-radius: $border-radius;
|
||||
color: $body-font-color;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
color: $gray-color;
|
||||
content: attr(data-lang);
|
||||
font-size: $font-size-sm;
|
||||
position: absolute;
|
||||
right: $layout-spacing;
|
||||
top: $unit-h;
|
||||
}
|
||||
|
||||
code {
|
||||
background: $bg-color;
|
||||
color: inherit;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
// Image comparison slider
|
||||
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
|
||||
.comparison-slider {
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.comparison-before,
|
||||
.comparison-after {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-before {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.comparison-label {
|
||||
right: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-after {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: $unit-4;
|
||||
top: 0;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 -5px, 0 5px;
|
||||
color: $light-color;
|
||||
content: "";
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
right: $unit-2;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
left: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-resizer {
|
||||
animation: first-run 1.5s 1 ease-in-out;
|
||||
cursor: ew-resize;
|
||||
height: $unit-4;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
min-width: $unit-4;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: relative;
|
||||
resize: horizontal;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scaleY(30);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
background: rgba($dark-color, .5);
|
||||
bottom: $unit-4;
|
||||
color: $light-color;
|
||||
padding: $unit-1 $unit-2;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes first-run {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
25% {
|
||||
width: $unit-12;
|
||||
}
|
||||
50% {
|
||||
width: $unit-4;
|
||||
}
|
||||
75% {
|
||||
width: $unit-6;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
// Dropdown
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.menu {
|
||||
animation: slide-down .15s ease 1;
|
||||
display: none;
|
||||
left: 0;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
&.dropdown-right {
|
||||
.menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .menu,
|
||||
.dropdown-toggle:focus + .menu,
|
||||
.menu:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Fix dropdown-toggle border radius in button groups
|
||||
.btn-group {
|
||||
.dropdown-toggle:nth-last-child(2) {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
// Empty states (or Blank slates)
|
||||
.empty {
|
||||
background: $bg-color;
|
||||
border-radius: $border-radius;
|
||||
color: $gray-color-dark;
|
||||
text-align: center;
|
||||
padding: $unit-16 $unit-8;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
.empty-title,
|
||||
.empty-subtitle {
|
||||
margin: $layout-spacing auto;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: $layout-spacing-lg;
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// Filters
|
||||
// The number of filter options
|
||||
$filter-number: 8 !default;
|
||||
|
||||
%filter-checked-nav {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
%filter-checked-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter {
|
||||
.filter-nav {
|
||||
margin: $layout-spacing 0;
|
||||
}
|
||||
|
||||
.filter-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
@for $i from 0 through ($filter-number) {
|
||||
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
|
||||
@extend %filter-checked-nav;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through ($filter-number) {
|
||||
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
|
||||
@extend %filter-checked-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,555 +0,0 @@
|
||||
// Forms
|
||||
.form-group {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $layout-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 500;
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
// Form element: Label
|
||||
.form-label {
|
||||
display: block;
|
||||
line-height: $line-height;
|
||||
padding: $control-padding-y + $border-width 0;
|
||||
|
||||
&.label-sm {
|
||||
font-size: $font-size-sm;
|
||||
padding: $control-padding-y-sm + $border-width 0;
|
||||
}
|
||||
|
||||
&.label-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: $control-padding-y-lg + $border-width 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input
|
||||
.form-input {
|
||||
appearance: none;
|
||||
background: $bg-color-light;
|
||||
background-image: none;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
color: $body-font-color;
|
||||
display: block;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
position: relative;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $gray-color;
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
&.input-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input types
|
||||
&[type="file"] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Textarea
|
||||
textarea.form-input {
|
||||
&,
|
||||
&.input-lg,
|
||||
&.input-sm {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input hint
|
||||
.form-input-hint {
|
||||
color: $gray-color;
|
||||
font-size: $font-size-sm;
|
||||
margin-top: $unit-1;
|
||||
|
||||
.has-success &,
|
||||
.is-success + & {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
.is-error + & {
|
||||
color: $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Select
|
||||
.form-select {
|
||||
appearance: none;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
color: inherit;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
background: $bg-color-light;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Select sizes
|
||||
&.select-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.select-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
// Multiple select
|
||||
&[size],
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
|
||||
option {
|
||||
padding: $unit-h $unit-1;
|
||||
}
|
||||
}
|
||||
&:not([multiple]):not([size]) {
|
||||
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
|
||||
padding-right: $control-icon-size + $control-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Icons
|
||||
.has-icon-left,
|
||||
.has-icon-right {
|
||||
position: relative;
|
||||
|
||||
.form-icon {
|
||||
height: $control-icon-size;
|
||||
margin: 0 $control-padding-y;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: $control-icon-size;
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.has-icon-left {
|
||||
.form-icon {
|
||||
left: $border-width;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding-left: $control-icon-size + $control-padding-y * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.has-icon-right {
|
||||
.form-icon {
|
||||
right: $border-width;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding-right: $control-icon-size + $control-padding-y * 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Checkbox and Radio
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
display: block;
|
||||
line-height: $line-height;
|
||||
margin: ($control-size - $control-size-sm) / 2 0;
|
||||
min-height: $control-size-sm;
|
||||
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
&:focus + .form-icon {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&:checked + .form-icon {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
border: $border-width solid $border-color-dark;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
}
|
||||
|
||||
// Input checkbox, radio and switch sizes
|
||||
&.input-sm {
|
||||
font-size: $font-size-sm;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
font-size: $font-size-lg;
|
||||
margin: ($control-size-lg - $control-size-sm) / 2 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
.form-icon {
|
||||
background: $bg-color-light;
|
||||
height: $control-icon-size;
|
||||
left: 0;
|
||||
top: ($control-size-sm - $control-icon-size) / 2;
|
||||
width: $control-icon-size;
|
||||
}
|
||||
|
||||
input {
|
||||
&:active + .form-icon {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-checkbox {
|
||||
.form-icon {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
background-clip: padding-box;
|
||||
border: $border-width-lg solid $light-color;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
content: "";
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: rotate(45deg);
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
&:indeterminate + .form-icon {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-radio {
|
||||
.form-icon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 6px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Switch
|
||||
.form-switch {
|
||||
padding-left: ($unit-8 + $control-padding-x);
|
||||
|
||||
.form-icon {
|
||||
background: $gray-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: $unit-2 + $border-width;
|
||||
height: $unit-4 + $border-width * 2;
|
||||
left: 0;
|
||||
top: ($control-size-sm - $unit-4) / 2 - $border-width;
|
||||
width: $unit-8;
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-4;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
|
||||
width: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
&:active + .form-icon {
|
||||
&::before {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input groups
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
||||
.input-group-addon {
|
||||
background: $bg-color;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
line-height: $line-height;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
white-space: nowrap;
|
||||
|
||||
&.addon-sm {
|
||||
font-size: $font-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.addon-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:focus {
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.form-input,
|
||||
.form-select {
|
||||
.has-success &,
|
||||
&.is-success {
|
||||
background: lighten($success-color, 53%);
|
||||
border-color: $success-color;
|
||||
&:focus {
|
||||
@include control-shadow($success-color);
|
||||
}
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
background: lighten($error-color, 53%);
|
||||
border-color: $error-color;
|
||||
&:focus {
|
||||
@include control-shadow($error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
.form-icon {
|
||||
border-color: $error-color;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
background: $error-color;
|
||||
border-color: $error-color;
|
||||
}
|
||||
|
||||
&:focus + .form-icon {
|
||||
@include control-shadow($error-color);
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
input {
|
||||
&:indeterminate + .form-icon {
|
||||
background: $error-color;
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// validation based on :placeholder-shown (Edge doesn't support it yet)
|
||||
.form-input {
|
||||
&:not(:placeholder-shown) {
|
||||
&:invalid {
|
||||
border-color: $error-color;
|
||||
&:focus {
|
||||
@include control-shadow($error-color);
|
||||
background: lighten($error-color, 53%);
|
||||
}
|
||||
|
||||
& + .form-input-hint {
|
||||
color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form disabled and readonly
|
||||
.form-input,
|
||||
.form-select {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $bg-color-dark;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
&[readonly] {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
& + .form-icon {
|
||||
background: $bg-color-dark;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
input {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
& + .form-icon::before {
|
||||
background: $bg-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form horizontal
|
||||
.form-horizontal {
|
||||
padding: $layout-spacing 0;
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Form inline
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// Hero
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 4rem;
|
||||
padding-top: 4rem;
|
||||
|
||||
&.hero-sm {
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
&.hero-lg {
|
||||
padding-bottom: 8rem;
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.hero-body {
|
||||
padding: $layout-spacing;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// CSS Icons
|
||||
@import "icons/icons-core";
|
||||
@import "icons/icons-navigation";
|
||||
@import "icons/icons-action";
|
||||
@import "icons/icons-object";
|
||||
@@ -1,34 +0,0 @@
|
||||
// Labels
|
||||
.label {
|
||||
@include label-base();
|
||||
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
|
||||
display: inline-block;
|
||||
|
||||
// Label rounded
|
||||
&.label-rounded {
|
||||
border-radius: 5rem;
|
||||
padding-left: .4rem;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
|
||||
// Label colors
|
||||
&.label-primary {
|
||||
@include label-variant($light-color, $primary-color);
|
||||
}
|
||||
|
||||
&.label-secondary {
|
||||
@include label-variant($primary-color, $secondary-color);
|
||||
}
|
||||
|
||||
&.label-success {
|
||||
@include label-variant($light-color, $success-color);
|
||||
}
|
||||
|
||||
&.label-warning {
|
||||
@include label-variant($light-color, $warning-color);
|
||||
}
|
||||
|
||||
&.label-error {
|
||||
@include label-variant($light-color, $error-color);
|
||||
}
|
||||
}
|
||||
@@ -1,444 +0,0 @@
|
||||
// Layout
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $layout-spacing;
|
||||
padding-right: $layout-spacing;
|
||||
width: 100%;
|
||||
|
||||
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
|
||||
|
||||
&.grid-xl {
|
||||
max-width: $grid-spacing * 2 + $size-xl;
|
||||
}
|
||||
|
||||
&.grid-lg {
|
||||
max-width: $grid-spacing * 2 + $size-lg;
|
||||
}
|
||||
|
||||
&.grid-md {
|
||||
max-width: $grid-spacing * 2 + $size-md;
|
||||
}
|
||||
|
||||
&.grid-sm {
|
||||
max-width: $grid-spacing * 2 + $size-sm;
|
||||
}
|
||||
|
||||
&.grid-xs {
|
||||
max-width: $grid-spacing * 2 + $size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive breakpoint system
|
||||
.show-xs,
|
||||
.show-sm,
|
||||
.show-md,
|
||||
.show-lg,
|
||||
.show-xl {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Responsive grid system
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -$layout-spacing;
|
||||
margin-right: -$layout-spacing;
|
||||
|
||||
&.col-gapless {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
& > .column {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&.col-oneline {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
.column {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
padding-left: $layout-spacing;
|
||||
padding-right: $layout-spacing;
|
||||
|
||||
&.col-12,
|
||||
&.col-11,
|
||||
&.col-10,
|
||||
&.col-9,
|
||||
&.col-8,
|
||||
&.col-7,
|
||||
&.col-6,
|
||||
&.col-5,
|
||||
&.col-4,
|
||||
&.col-3,
|
||||
&.col-2,
|
||||
&.col-1,
|
||||
&.col-auto {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
.col-mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.col-ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.col-mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
@media (max-width: $size-xl) {
|
||||
.col-xl-12,
|
||||
.col-xl-11,
|
||||
.col-xl-10,
|
||||
.col-xl-9,
|
||||
.col-xl-8,
|
||||
.col-xl-7,
|
||||
.col-xl-6,
|
||||
.col-xl-5,
|
||||
.col-xl-4,
|
||||
.col-xl-3,
|
||||
.col-xl-2,
|
||||
.col-xl-1,
|
||||
.col-xl-auto {
|
||||
flex: none;
|
||||
}
|
||||
.col-xl-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-xl-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-xl-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-xl-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-xl-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-xl-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-xl-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-xl-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-xl-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-xl-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-xl-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-xl-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-xl-auto {
|
||||
width: auto;
|
||||
}
|
||||
.hide-xl {
|
||||
display: none !important;
|
||||
}
|
||||
.show-xl {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: $size-lg) {
|
||||
.col-lg-12,
|
||||
.col-lg-11,
|
||||
.col-lg-10,
|
||||
.col-lg-9,
|
||||
.col-lg-8,
|
||||
.col-lg-7,
|
||||
.col-lg-6,
|
||||
.col-lg-5,
|
||||
.col-lg-4,
|
||||
.col-lg-3,
|
||||
.col-lg-2,
|
||||
.col-lg-1,
|
||||
.col-lg-auto {
|
||||
flex: none;
|
||||
}
|
||||
.col-lg-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-lg-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-lg-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-lg-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-lg-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-lg-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-lg-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-lg-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-lg-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-lg-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-lg-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-lg-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-lg-auto {
|
||||
width: auto;
|
||||
}
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
.show-lg {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: $size-md) {
|
||||
.col-md-12,
|
||||
.col-md-11,
|
||||
.col-md-10,
|
||||
.col-md-9,
|
||||
.col-md-8,
|
||||
.col-md-7,
|
||||
.col-md-6,
|
||||
.col-md-5,
|
||||
.col-md-4,
|
||||
.col-md-3,
|
||||
.col-md-2,
|
||||
.col-md-1,
|
||||
.col-md-auto {
|
||||
flex: none;
|
||||
}
|
||||
.col-md-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-md-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-md-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-md-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-md-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-md-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-md-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-md-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-md-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-md-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-md-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-md-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-md-auto {
|
||||
width: auto;
|
||||
}
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
.show-md {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: $size-sm) {
|
||||
.col-sm-12,
|
||||
.col-sm-11,
|
||||
.col-sm-10,
|
||||
.col-sm-9,
|
||||
.col-sm-8,
|
||||
.col-sm-7,
|
||||
.col-sm-6,
|
||||
.col-sm-5,
|
||||
.col-sm-4,
|
||||
.col-sm-3,
|
||||
.col-sm-2,
|
||||
.col-sm-1,
|
||||
.col-sm-auto {
|
||||
flex: none;
|
||||
}
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-sm-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-sm-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-sm-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-sm-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-sm-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-sm-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-sm-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-sm-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-sm-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-sm-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-sm-auto {
|
||||
width: auto;
|
||||
}
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
.show-sm {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: $size-xs) {
|
||||
.col-xs-12,
|
||||
.col-xs-11,
|
||||
.col-xs-10,
|
||||
.col-xs-9,
|
||||
.col-xs-8,
|
||||
.col-xs-7,
|
||||
.col-xs-6,
|
||||
.col-xs-5,
|
||||
.col-xs-4,
|
||||
.col-xs-3,
|
||||
.col-xs-2,
|
||||
.col-xs-1,
|
||||
.col-xs-auto {
|
||||
flex: none;
|
||||
}
|
||||
.col-xs-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-xs-11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col-xs-10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col-xs-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-xs-8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col-xs-7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col-xs-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-xs-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col-xs-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-xs-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-xs-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col-xs-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-xs-auto {
|
||||
width: auto;
|
||||
}
|
||||
.hide-xs {
|
||||
display: none !important;
|
||||
}
|
||||
.show-xs {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
// Media
|
||||
// Image responsive
|
||||
.img-responsive {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// object-fit support is coming to Microsoft Edge
|
||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
|
||||
.img-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.img-fit-contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// Video responsive
|
||||
.video-responsive {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
|
||||
}
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
video.video-responsive {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.video-responsive-4-3 {
|
||||
&::before {
|
||||
padding-bottom: 75%; // Ratio 4:3
|
||||
}
|
||||
}
|
||||
|
||||
.video-responsive-1-1 {
|
||||
&::before {
|
||||
padding-bottom: 100%; // Ratio 1:1
|
||||
}
|
||||
}
|
||||
|
||||
// Figure
|
||||
.figure {
|
||||
margin: 0 0 $layout-spacing 0;
|
||||
|
||||
.figure-caption {
|
||||
color: $gray-color-dark;
|
||||
margin-top: $layout-spacing;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
// Menus
|
||||
.menu {
|
||||
@include shadow-variant(.05rem);
|
||||
background: $bg-color-light;
|
||||
border-radius: $border-radius;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
min-width: $control-width-xs;
|
||||
padding: $unit-2;
|
||||
transform: translateY($layout-spacing-sm);
|
||||
z-index: $zindex-3;
|
||||
|
||||
&.menu-nav {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
margin-top: 0;
|
||||
padding: 0 $unit-2;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
& > a {
|
||||
border-radius: $border-radius;
|
||||
color: inherit;
|
||||
display: block;
|
||||
margin: 0 (-$unit-2);
|
||||
padding: $unit-1 $unit-2;
|
||||
text-decoration: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $secondary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $secondary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
margin: $unit-h 0;
|
||||
}
|
||||
|
||||
& + .menu-item {
|
||||
margin-top: $unit-1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-badge {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.label {
|
||||
margin-right: $unit-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
// Meters
|
||||
// Credit: https://css-tricks.com/html5-meter-element/
|
||||
.meter {
|
||||
appearance: none;
|
||||
background: $bg-color;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $unit-4;
|
||||
|
||||
&::-webkit-meter-inner-element {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-webkit-meter-bar,
|
||||
&::-webkit-meter-optimum-value,
|
||||
&::-webkit-meter-suboptimum-value,
|
||||
&::-webkit-meter-even-less-good-value {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
&::-webkit-meter-optimum-value {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&::-webkit-meter-suboptimum-value {
|
||||
background: $warning-color;
|
||||
}
|
||||
|
||||
&::-webkit-meter-even-less-good-value {
|
||||
background: $error-color;
|
||||
}
|
||||
|
||||
&::-moz-meter-bar,
|
||||
&:-moz-meter-optimum,
|
||||
&:-moz-meter-sub-optimum,
|
||||
&:-moz-meter-sub-sub-optimum {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:-moz-meter-optimum::-moz-meter-bar {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&:-moz-meter-sub-optimum::-moz-meter-bar {
|
||||
background: $warning-color;
|
||||
}
|
||||
|
||||
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
||||
background: $error-color;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
// Mixins
|
||||
@import "mixins/avatar";
|
||||
@import "mixins/button";
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/color";
|
||||
@import "mixins/label";
|
||||
@import "mixins/position";
|
||||
@import "mixins/shadow";
|
||||
@import "mixins/text";
|
||||
@import "mixins/toast";
|
||||
@@ -1,87 +0,0 @@
|
||||
// Modals
|
||||
.modal {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: $layout-spacing;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&:target,
|
||||
&.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
z-index: $zindex-4;
|
||||
|
||||
.modal-overlay {
|
||||
background: rgba($bg-color, .75);
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
animation: slide-down .2s ease 1;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal-sm {
|
||||
.modal-container {
|
||||
max-width: $control-width-sm;
|
||||
padding: 0 $unit-2;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal-lg {
|
||||
.modal-overlay {
|
||||
background: $bg-color-light;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
box-shadow: none;
|
||||
max-width: $control-width-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@include shadow-variant(.2rem);
|
||||
background: $bg-color-light;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 75vh;
|
||||
max-width: $control-width-md;
|
||||
padding: 0 $unit-4;
|
||||
width: 100%;
|
||||
|
||||
&.modal-fullheight {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: $dark-color;
|
||||
padding: $unit-4;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
padding: $unit-4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $unit-4;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
// Navbar
|
||||
.navbar {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.navbar-section {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
|
||||
&:not(:first-child):last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: $font-size-lg;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
// Navs
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: $unit-1 0;
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
color: $gray-color-dark;
|
||||
padding: $unit-1 $unit-2;
|
||||
text-decoration: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
& > a {
|
||||
color: darken($gray-color-dark, 10%);
|
||||
font-weight: bold;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .nav {
|
||||
margin-bottom: $unit-2;
|
||||
margin-left: $unit-4;
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
// Off canvas menus
|
||||
$off-canvas-breakpoint: $size-lg !default;
|
||||
|
||||
.off-canvas {
|
||||
display: flex;
|
||||
flex-flow: nowrap;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.off-canvas-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $layout-spacing;
|
||||
transition: none;
|
||||
z-index: $zindex-0;
|
||||
@if $rtl == true {
|
||||
right: $layout-spacing;
|
||||
} @else {
|
||||
left: $layout-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.off-canvas-sidebar {
|
||||
background: $bg-color;
|
||||
bottom: 0;
|
||||
min-width: 10rem;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: transform .25s;
|
||||
z-index: $zindex-2;
|
||||
@if $rtl == true {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
} @else {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.off-canvas-content {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
|
||||
}
|
||||
|
||||
.off-canvas-overlay {
|
||||
background: rgba($dark-color, .1);
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.off-canvas-sidebar {
|
||||
&:target,
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&:target ~ .off-canvas-overlay,
|
||||
&.active ~ .off-canvas-overlay {
|
||||
display: block;
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive layout
|
||||
@media (min-width: $off-canvas-breakpoint) {
|
||||
.off-canvas {
|
||||
&.off-canvas-sidebar-show {
|
||||
.off-canvas-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.off-canvas-sidebar {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.off-canvas-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: $unit-1 0;
|
||||
padding: $unit-1 0;
|
||||
|
||||
.page-item {
|
||||
margin: $unit-1 $unit-o;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: $unit-1 $unit-1;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
padding: $unit-1 $unit-2;
|
||||
text-decoration: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
a {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-prev,
|
||||
&.page-next {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
&.page-next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page-item-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-item-subtitle {
|
||||
margin: 0;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
// Panels
|
||||
.panel {
|
||||
border: $border-width solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.panel-header,
|
||||
.panel-footer {
|
||||
flex: 0 0 auto;
|
||||
padding: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
.panel-nav {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
padding: 0 $layout-spacing-lg;
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
// Parallax
|
||||
$parallax-deg: 3deg !default;
|
||||
$parallax-offset: 4.5px !default;
|
||||
$parallax-offset-z: 50px !default;
|
||||
$parallax-perspective: 1000px !default;
|
||||
$parallax-scale: .95 !default;
|
||||
$parallax-fade-color: rgba(255, 255, 255, .35) !default;
|
||||
|
||||
// Mixin: Parallax direction
|
||||
@mixin parallax-dir() {
|
||||
height: 50%;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
|
||||
.parallax {
|
||||
display: block;
|
||||
height: auto;
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
||||
.parallax-content {
|
||||
@include shadow-variant(1rem);
|
||||
height: auto;
|
||||
transform: perspective($parallax-perspective);
|
||||
transform-style: preserve-3d;
|
||||
transition: all .4s ease;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-front {
|
||||
align-items: center;
|
||||
color: $light-color;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 20px rgba($dark-color, .75);
|
||||
top: 0;
|
||||
transform: translateZ($parallax-offset-z) scale($parallax-scale);
|
||||
transition: transform .4s;
|
||||
width: 100%;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
.parallax-top-left {
|
||||
@include parallax-dir();
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&:focus ~ .parallax-content,
|
||||
&:hover ~ .parallax-content {
|
||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.parallax-front {
|
||||
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-top-right {
|
||||
@include parallax-dir();
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&:focus ~ .parallax-content,
|
||||
&:hover ~ .parallax-content {
|
||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.parallax-front {
|
||||
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bottom-left {
|
||||
@include parallax-dir();
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
&:focus ~ .parallax-content,
|
||||
&:hover ~ .parallax-content {
|
||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.parallax-front {
|
||||
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bottom-right {
|
||||
@include parallax-dir();
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
&:focus ~ .parallax-content,
|
||||
&:hover ~ .parallax-content {
|
||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.parallax-front {
|
||||
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
// Popovers
|
||||
.popover {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.popover-container {
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
padding: $layout-spacing;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform .2s;
|
||||
width: $control-width-sm;
|
||||
z-index: $zindex-3;
|
||||
}
|
||||
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -100%) scale(1);
|
||||
}
|
||||
|
||||
&.popover-right {
|
||||
.popover-container {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(0, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-bottom {
|
||||
.popover-container {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-left {
|
||||
.popover-container {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(-100%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@include shadow-variant(.2rem);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
// Progress
|
||||
// Credit: https://css-tricks.com/html5-progress-element/
|
||||
.progress {
|
||||
appearance: none;
|
||||
background: $bg-color-dark;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
color: $primary-color;
|
||||
height: $unit-1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background: $primary-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background: $primary-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
animation: progress-indeterminate 1.5s linear infinite;
|
||||
background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
// Sliders
|
||||
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
|
||||
.slider {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $unit-6;
|
||||
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.tooltip:not([data-tooltip]) {
|
||||
&::after {
|
||||
content: attr(value);
|
||||
}
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
background: $primary-color;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: $unit-3;
|
||||
margin-top: -($unit-3 - $unit-h) / 2;
|
||||
transition: transform .2s;
|
||||
width: $unit-3;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: $primary-color;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: $unit-3;
|
||||
transition: transform .2s;
|
||||
width: $unit-3;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background: $primary-color;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: $unit-3;
|
||||
transition: transform .2s;
|
||||
width: $unit-3;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&::-webkit-slider-thumb {
|
||||
background: $gray-color-light;
|
||||
transform: scale(1);
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: $gray-color-light;
|
||||
transform: scale(1);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background: $gray-color-light;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: $bg-color-dark;
|
||||
border-radius: $border-radius;
|
||||
height: $unit-h;
|
||||
width: 100%;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
background: $bg-color-dark;
|
||||
border-radius: $border-radius;
|
||||
height: $unit-h;
|
||||
width: 100%;
|
||||
}
|
||||
&::-ms-track {
|
||||
background: $bg-color-dark;
|
||||
border-radius: $border-radius;
|
||||
height: $unit-h;
|
||||
width: 100%;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// Steps
|
||||
.step {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
list-style: none;
|
||||
margin: $unit-1 0;
|
||||
width: 100%;
|
||||
|
||||
.step-item {
|
||||
flex: 1 1 0;
|
||||
margin-top: 0;
|
||||
min-height: 1rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child)::before {
|
||||
background: $primary-color;
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: -50%;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
display: inline-block;
|
||||
padding: 20px 10px 0;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
background: $primary-color;
|
||||
border: $border-width-lg solid $light-color;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-3;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: $unit-1;
|
||||
transform: translateX(-50%);
|
||||
width: $unit-3;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
&::before {
|
||||
background: $light-color;
|
||||
border: $border-width-lg solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .step-item {
|
||||
&::before {
|
||||
background: $border-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $gray-color;
|
||||
|
||||
&::before {
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
// Tables
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
@if $rtl == true {
|
||||
text-align: right;
|
||||
} @else {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
tbody {
|
||||
tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
&.table-striped {
|
||||
tbody {
|
||||
tr {
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scollable tables
|
||||
&.table-scroll {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding-bottom: .75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: $unit-3 $unit-2;
|
||||
}
|
||||
th {
|
||||
border-bottom-width: $border-width-lg;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
// Tabs
|
||||
.tab {
|
||||
align-items: center;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: $unit-1 0 ($unit-1 - $border-width) 0;
|
||||
|
||||
.tab-item {
|
||||
margin-top: 0;
|
||||
|
||||
a {
|
||||
border-bottom: $border-width-lg solid transparent;
|
||||
color: inherit;
|
||||
display: block;
|
||||
margin: 0 $unit-2 0 0;
|
||||
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
|
||||
text-decoration: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
&.active a,
|
||||
a.active {
|
||||
border-bottom-color: $primary-color;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
&.tab-action {
|
||||
flex: 1 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
margin-top: -$unit-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-block {
|
||||
.tab-item {
|
||||
flex: 1 0 0;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
&[data-badge]::after {
|
||||
position: absolute;
|
||||
right: $unit-h;
|
||||
top: $unit-h;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.tab-block) {
|
||||
.badge {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
// Tiles
|
||||
.tile {
|
||||
align-content: space-between;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
|
||||
.tile-icon,
|
||||
.tile-action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.tile-content {
|
||||
flex: 1 1 auto;
|
||||
&:not(:first-child) {
|
||||
padding-left: $unit-2;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-right: $unit-2;
|
||||
}
|
||||
}
|
||||
.tile-title,
|
||||
.tile-subtitle {
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
&.tile-centered {
|
||||
align-items: center;
|
||||
|
||||
.tile-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tile-title,
|
||||
.tile-subtitle {
|
||||
@include text-ellipsis();
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
// Timelines
|
||||
.timeline {
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
margin-bottom: $unit-6;
|
||||
position: relative;
|
||||
&::before {
|
||||
background: $border-color;
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: 11px;
|
||||
position: absolute;
|
||||
top: $unit-6;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.timeline-left {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1 1 auto;
|
||||
padding: 2px 0 2px $layout-spacing-lg;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: $light-color;
|
||||
display: flex;
|
||||
height: $unit-6;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: $unit-6;
|
||||
&::before {
|
||||
border: $border-width-lg solid $primary-color;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-2;
|
||||
left: $unit-2;
|
||||
position: absolute;
|
||||
top: $unit-2;
|
||||
width: $unit-2;
|
||||
}
|
||||
|
||||
&.icon-lg {
|
||||
background: $primary-color;
|
||||
line-height: $line-height;
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
// Toasts
|
||||
.toast {
|
||||
@include toast-variant($dark-color);
|
||||
border: $border-width solid $dark-color;
|
||||
border-radius: $border-radius;
|
||||
color: $light-color;
|
||||
display: block;
|
||||
padding: $layout-spacing;
|
||||
width: 100%;
|
||||
|
||||
&.toast-primary {
|
||||
@include toast-variant($primary-color);
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
@include toast-variant($success-color);
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
@include toast-variant($warning-color);
|
||||
}
|
||||
|
||||
&.toast-error {
|
||||
@include toast-variant($error-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $light-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
margin: $unit-h;
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
// Tooltips
|
||||
.tooltip {
|
||||
position: relative;
|
||||
&::after {
|
||||
background: rgba($dark-color, .95);
|
||||
border-radius: $border-radius;
|
||||
bottom: 100%;
|
||||
color: $light-color;
|
||||
content: attr(data-tooltip);
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
left: 50%;
|
||||
max-width: $control-width-sm;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: $unit-1 $unit-2;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-overflow: ellipsis;
|
||||
transform: translate(-50%, $unit-2);
|
||||
transition: opacity .2s, transform .2s;
|
||||
white-space: pre;
|
||||
z-index: $zindex-3;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -$unit-1);
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&.tooltip-right {
|
||||
&::after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
transform: translate(-$unit-1, 50%);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::after {
|
||||
transform: translate($unit-1, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-bottom {
|
||||
&::after {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
transform: translate(-50%, -$unit-2);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::after {
|
||||
transform: translate(-50%, $unit-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-left {
|
||||
&::after {
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
transform: translate($unit-2, 50%);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::after {
|
||||
transform: translate(-$unit-1, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
// Typography
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: .5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin: 0 0 $line-height;
|
||||
}
|
||||
|
||||
// Semantic text elements
|
||||
a,
|
||||
ins,
|
||||
u {
|
||||
text-decoration-skip: ink edges;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: $border-width dotted;
|
||||
cursor: help;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@include label-base();
|
||||
@include label-variant($light-color, $dark-color);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
mark {
|
||||
@include label-variant($body-font-color, $highlight-color);
|
||||
border-bottom: $unit-o solid darken($highlight-color, 15%);
|
||||
border-radius: $border-radius;
|
||||
padding: $unit-o $unit-h 0;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: $border-width-lg solid $border-color;
|
||||
margin-left: 0;
|
||||
padding: $unit-2 $unit-4;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin: $unit-4 0 $unit-4 $unit-4;
|
||||
padding: 0;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: $unit-4 0 $unit-4 $unit-4;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: $unit-2;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc inside;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin: $unit-2 0 $unit-4 0;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
@import "utilities/colors";
|
||||
@import "utilities/cursors";
|
||||
@import "utilities/display";
|
||||
@import "utilities/divider";
|
||||
@import "utilities/loading";
|
||||
@import "utilities/position";
|
||||
@import "utilities/shapes";
|
||||
@import "utilities/text";
|
||||
@@ -1,117 +0,0 @@
|
||||
// Core variables
|
||||
$version: "0.5.8";
|
||||
|
||||
// Core features
|
||||
$rtl: false !default;
|
||||
|
||||
// Core colors
|
||||
$primary-color: #5755d9 !default;
|
||||
$primary-color-dark: darken($primary-color, 3%) !default;
|
||||
$primary-color-light: lighten($primary-color, 3%) !default;
|
||||
$secondary-color: lighten($primary-color, 37.5%) !default;
|
||||
$secondary-color-dark: darken($secondary-color, 3%) !default;
|
||||
$secondary-color-light: lighten($secondary-color, 3%) !default;
|
||||
|
||||
// Gray colors
|
||||
$dark-color: #303742 !default;
|
||||
$light-color: #fff !default;
|
||||
$gray-color: lighten($dark-color, 55%) !default;
|
||||
$gray-color-dark: darken($gray-color, 30%) !default;
|
||||
$gray-color-light: lighten($gray-color, 20%) !default;
|
||||
|
||||
$border-color: lighten($dark-color, 65%) !default;
|
||||
$border-color-dark: darken($border-color, 10%) !default;
|
||||
$border-color-light: lighten($border-color, 8%) !default;
|
||||
$bg-color: lighten($dark-color, 75%) !default;
|
||||
$bg-color-dark: darken($bg-color, 3%) !default;
|
||||
$bg-color-light: $light-color !default;
|
||||
|
||||
// Control colors
|
||||
$success-color: #32b643 !default;
|
||||
$warning-color: #ffb700 !default;
|
||||
$error-color: #e85600 !default;
|
||||
|
||||
// Other colors
|
||||
$code-color: #d73e48 !default;
|
||||
$highlight-color: #ffe9b3 !default;
|
||||
$body-bg: $bg-color-light !default;
|
||||
$body-font-color: lighten($dark-color, 5%) !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-dark: darken($link-color, 10%) !default;
|
||||
$link-color-light: lighten($link-color, 10%) !default;
|
||||
|
||||
// Fonts
|
||||
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
||||
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
|
||||
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
|
||||
$fallback-font-family: "Helvetica Neue", sans-serif !default;
|
||||
$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
|
||||
$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
|
||||
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
|
||||
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
|
||||
$body-font-family: $base-font-family, $fallback-font-family !default;
|
||||
|
||||
// Unit sizes
|
||||
$unit-o: .05rem !default;
|
||||
$unit-h: .1rem !default;
|
||||
$unit-1: .2rem !default;
|
||||
$unit-2: .4rem !default;
|
||||
$unit-3: .6rem !default;
|
||||
$unit-4: .8rem !default;
|
||||
$unit-5: 1rem !default;
|
||||
$unit-6: 1.2rem !default;
|
||||
$unit-7: 1.4rem !default;
|
||||
$unit-8: 1.6rem !default;
|
||||
$unit-9: 1.8rem !default;
|
||||
$unit-10: 2rem !default;
|
||||
$unit-12: 2.4rem !default;
|
||||
$unit-16: 3.2rem !default;
|
||||
|
||||
// Font sizes
|
||||
$html-font-size: 20px !default;
|
||||
$html-line-height: 1.5 !default;
|
||||
$font-size: .8rem !default;
|
||||
$font-size-sm: .7rem !default;
|
||||
$font-size-lg: .9rem !default;
|
||||
$line-height: 1.2rem !default;
|
||||
|
||||
// Sizes
|
||||
$layout-spacing: $unit-2 !default;
|
||||
$layout-spacing-sm: $unit-1 !default;
|
||||
$layout-spacing-lg: $unit-4 !default;
|
||||
$border-radius: $unit-h !default;
|
||||
$border-width: $unit-o !default;
|
||||
$border-width-lg: $unit-h !default;
|
||||
$control-size: $unit-9 !default;
|
||||
$control-size-sm: $unit-7 !default;
|
||||
$control-size-lg: $unit-10 !default;
|
||||
$control-padding-x: $unit-2 !default;
|
||||
$control-padding-x-sm: $unit-2 * .75 !default;
|
||||
$control-padding-x-lg: $unit-2 * 1.5 !default;
|
||||
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
|
||||
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
|
||||
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
|
||||
$control-icon-size: .8rem !default;
|
||||
|
||||
$control-width-xs: 180px !default;
|
||||
$control-width-sm: 320px !default;
|
||||
$control-width-md: 640px !default;
|
||||
$control-width-lg: 960px !default;
|
||||
$control-width-xl: 1280px !default;
|
||||
|
||||
// Responsive breakpoints
|
||||
$size-xs: 480px !default;
|
||||
$size-sm: 600px !default;
|
||||
$size-md: 840px !default;
|
||||
$size-lg: 960px !default;
|
||||
$size-xl: 1280px !default;
|
||||
$size-2x: 1440px !default;
|
||||
|
||||
$responsive-breakpoint: $size-xs !default;
|
||||
|
||||
// Z-index
|
||||
$zindex-0: 1 !default;
|
||||
$zindex-1: 100 !default;
|
||||
$zindex-2: 200 !default;
|
||||
$zindex-3: 300 !default;
|
||||
$zindex-4: 400 !default;
|
||||
@@ -1,34 +0,0 @@
|
||||
// 360 Degree Viewer
|
||||
|
||||
// Mixin: Viewer slider sizes
|
||||
@mixin viewer-slider-size($image-number: 36) {
|
||||
@for $s from 1 through ($image-number) {
|
||||
.viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
|
||||
background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-360 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Copy and add more numbers if you need
|
||||
@include viewer-slider-size(36);
|
||||
|
||||
.viewer-slider {
|
||||
cursor: ew-resize;
|
||||
margin: 1rem;
|
||||
order: 2;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.viewer-image {
|
||||
background-position-y: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
max-width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,315 +0,0 @@
|
||||
// Icon resize
|
||||
.icon-resize-horiz,
|
||||
.icon-resize-vert {
|
||||
&::before,
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .45em;
|
||||
width: .45em;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-50%, -90%) rotate(45deg);
|
||||
}
|
||||
&::after {
|
||||
transform: translate(-50%, -10%) rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-resize-horiz {
|
||||
&::before {
|
||||
transform: translate(-90%, -50%) rotate(-45deg);
|
||||
}
|
||||
&::after {
|
||||
transform: translate(-10%, -50%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon more
|
||||
.icon-more-horiz,
|
||||
.icon-more-vert {
|
||||
&::before {
|
||||
background: currentColor;
|
||||
box-shadow: -.4em 0, .4em 0;
|
||||
border-radius: 50%;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more-vert {
|
||||
&::before {
|
||||
box-shadow: 0 -.4em, 0 .4em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon plus, minus, cross
|
||||
.icon-plus,
|
||||
.icon-minus,
|
||||
.icon-cross {
|
||||
&::before {
|
||||
background: currentColor;
|
||||
height: $icon-border-width;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-plus,
|
||||
.icon-cross {
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: 100%;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cross {
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
&::after {
|
||||
height: 100%;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon check
|
||||
.icon-check {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
height: .5em;
|
||||
width: .9em;
|
||||
transform: translate(-50%, -75%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon stop
|
||||
.icon-stop {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
background: currentColor;
|
||||
height: $icon-border-width;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon shutdown
|
||||
.icon-shutdown {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
&::before {
|
||||
background: currentColor;
|
||||
content: "";
|
||||
height: .5em;
|
||||
top: .1em;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon refresh
|
||||
.icon-refresh {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
&::after {
|
||||
border: .2em solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
height: 0;
|
||||
left: 80%;
|
||||
top: 20%;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon search
|
||||
.icon-search {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .75em;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
transform: translate(0, 0) rotate(45deg);
|
||||
width: .75em;
|
||||
}
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: $icon-border-width;
|
||||
left: 80%;
|
||||
top: 80%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon edit
|
||||
.icon-edit {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
height: .4em;
|
||||
transform: translate(-40%, -60%) rotate(-45deg);
|
||||
width: .85em;
|
||||
}
|
||||
&::after {
|
||||
border: .15em solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
height: 0;
|
||||
left: 5%;
|
||||
top: 95%;
|
||||
transform: translate(0, -100%);
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon delete
|
||||
.icon-delete {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top: 0;
|
||||
height: .75em;
|
||||
top: 60%;
|
||||
width: .75em;
|
||||
}
|
||||
&::after {
|
||||
background: currentColor;
|
||||
box-shadow: -.25em .2em, .25em .2em;
|
||||
height: $icon-border-width;
|
||||
top: $icon-border-width/2;
|
||||
width: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon share
|
||||
.icon-share {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: $border-radius;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: .4em;
|
||||
left: 100%;
|
||||
top: .25em;
|
||||
transform: translate(-125%, -50%) rotate(-45deg);
|
||||
width: .4em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
border-radius: 75% 0;
|
||||
height: .5em;
|
||||
width: .6em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon flag
|
||||
.icon-flag {
|
||||
&::before {
|
||||
background: currentColor;
|
||||
height: 1em;
|
||||
left: 15%;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-left: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
height: .65em;
|
||||
top: 35%;
|
||||
left: 60%;
|
||||
width: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon bookmark
|
||||
.icon-bookmark {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
height: .9em;
|
||||
width: .8em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: $border-radius;
|
||||
height: .5em;
|
||||
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
|
||||
width: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon download & upload
|
||||
.icon-download,
|
||||
.icon-upload {
|
||||
border-bottom: $icon-border-width solid currentColor;
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .5em;
|
||||
width: .5em;
|
||||
transform: translate(-50%, -60%) rotate(-135deg);
|
||||
}
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: .6em;
|
||||
top: 40%;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-upload {
|
||||
&::before {
|
||||
transform: translate(-50%, -60%) rotate(45deg);
|
||||
}
|
||||
&::after {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon copy
|
||||
.icon-copy {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: $border-radius;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
height: .8em;
|
||||
left: 40%;
|
||||
top: 35%;
|
||||
width: .8em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: $border-radius;
|
||||
height: .8em;
|
||||
left: 60%;
|
||||
top: 60%;
|
||||
width: .8em;
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
// Icon variables
|
||||
$icon-border-width: $border-width-lg;
|
||||
$icon-prefix: "icon";
|
||||
|
||||
// Icon base style
|
||||
.#{$icon-prefix} {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-style: normal;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-indent: -9999px;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// Icon sizes
|
||||
&.icon-2x {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
&.icon-3x {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
&.icon-4x {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Component icon support
|
||||
.accordion,
|
||||
.btn,
|
||||
.toast,
|
||||
.menu {
|
||||
.#{$icon-prefix} {
|
||||
vertical-align: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
.#{$icon-prefix} {
|
||||
vertical-align: -15%;
|
||||
}
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
// Icon arrows
|
||||
.icon-arrow-down,
|
||||
.icon-arrow-left,
|
||||
.icon-arrow-right,
|
||||
.icon-arrow-up,
|
||||
.icon-downward,
|
||||
.icon-back,
|
||||
.icon-forward,
|
||||
.icon-upward {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .65em;
|
||||
width: .65em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow-down {
|
||||
&::before {
|
||||
transform: translate(-50%, -75%) rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow-left {
|
||||
&::before {
|
||||
transform: translate(-25%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
&::before {
|
||||
transform: translate(-75%, -50%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow-up {
|
||||
&::before {
|
||||
transform: translate(-50%, -25%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-back,
|
||||
.icon-forward {
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: $icon-border-width;
|
||||
width: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-downward,
|
||||
.icon-upward {
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: .8em;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
&::after {
|
||||
left: 55%;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-downward {
|
||||
&::after {
|
||||
top: 45%;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-50%, -50%) rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-forward {
|
||||
&::after {
|
||||
left: 45%;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-50%, -50%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-upward {
|
||||
&::after {
|
||||
top: 55%;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon caret
|
||||
.icon-caret {
|
||||
&::before {
|
||||
border-top: .3em solid currentColor;
|
||||
border-right: .3em solid transparent;
|
||||
border-left: .3em solid transparent;
|
||||
height: 0;
|
||||
transform: translate(-50%, -25%);
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon menu
|
||||
.icon-menu {
|
||||
&::before {
|
||||
background: currentColor;
|
||||
box-shadow: 0 -.35em, 0 .35em;
|
||||
height: $icon-border-width;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon apps
|
||||
.icon-apps {
|
||||
&::before {
|
||||
background: currentColor;
|
||||
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
// Icon time
|
||||
.icon-time {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
background: currentColor;
|
||||
height: .4em;
|
||||
transform: translate(-50%, -75%);
|
||||
width: $icon-border-width;
|
||||
}
|
||||
&::after {
|
||||
background: currentColor;
|
||||
height: .3em;
|
||||
transform: translate(-50%, -75%) rotate(90deg);
|
||||
transform-origin: 50% 90%;
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon mail
|
||||
.icon-mail {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: $border-radius;
|
||||
height: .8em;
|
||||
width: 1em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
|
||||
width: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon people
|
||||
.icon-people {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .45em;
|
||||
top: 25%;
|
||||
width: .45em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50% 50% 0 0;
|
||||
height: .4em;
|
||||
top: 75%;
|
||||
width: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon message
|
||||
.icon-message {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: $border-radius;
|
||||
border-right: 0;
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: .8em;
|
||||
left: 65%;
|
||||
top: 40%;
|
||||
width: .7em;
|
||||
}
|
||||
&::after {
|
||||
background: currentColor;
|
||||
border-radius: $border-radius;
|
||||
height: .3em;
|
||||
left: 10%;
|
||||
top: 100%;
|
||||
transform: translate(0, -90%) rotate(45deg);
|
||||
width: $icon-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon photo
|
||||
.icon-photo {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: $border-radius;
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .25em;
|
||||
left: 35%;
|
||||
top: 35%;
|
||||
width: .25em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
height: .5em;
|
||||
left: 60%;
|
||||
transform: translate(-50%, 25%) rotate(-45deg);
|
||||
width: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon link
|
||||
.icon-link {
|
||||
&::before,
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 5em 0 0 5em;
|
||||
border-right: 0;
|
||||
height: .5em;
|
||||
width: .75em;
|
||||
}
|
||||
&::before {
|
||||
transform: translate(-70%, -45%) rotate(-45deg);
|
||||
}
|
||||
&::after {
|
||||
transform: translate(-30%, -55%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon location
|
||||
.icon-location {
|
||||
&::before {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
height: .8em;
|
||||
transform: translate(-50%, -60%) rotate(-45deg);
|
||||
width: .8em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .2em;
|
||||
transform: translate(-50%, -80%);
|
||||
width: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon emoji
|
||||
.icon-emoji {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
box-shadow: -.17em -.1em, .17em -.1em;
|
||||
height: .15em;
|
||||
width: .15em;
|
||||
}
|
||||
&::after {
|
||||
border: $icon-border-width solid currentColor;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -40%) rotate(-135deg);
|
||||
width: .5em;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
// Avatar mixin
|
||||
@mixin avatar-base($size: $unit-8) {
|
||||
font-size: $size / 2;
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
// Button variant mixin
|
||||
@mixin button-variant($color: $primary-color) {
|
||||
background: $color;
|
||||
border-color: darken($color, 3%);
|
||||
color: $light-color;
|
||||
&:focus {
|
||||
@include control-shadow($color);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: darken($color, 2%);
|
||||
border-color: darken($color, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken($color, 7%);
|
||||
border-color: darken($color, 10%);
|
||||
color: $light-color;
|
||||
}
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $light-color;
|
||||
border-left-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color: $primary-color) {
|
||||
background: $light-color;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
&:focus {
|
||||
@include control-shadow($color);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: lighten($color, 50%);
|
||||
border-color: darken($color, 2%);
|
||||
color: $color;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $color;
|
||||
border-color: darken($color, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $color;
|
||||
border-left-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
// Clearfix mixin
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// Background color utility mixin
|
||||
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
|
||||
#{$name} {
|
||||
background: $color !important;
|
||||
|
||||
@if (lightness($color) < 60) {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text color utility mixin
|
||||
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
|
||||
#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
a#{$name} {
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($color, 5%);
|
||||
}
|
||||
&:visited {
|
||||
color: lighten($color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
// Label base style
|
||||
@mixin label-base() {
|
||||
border-radius: $border-radius;
|
||||
line-height: 1.25;
|
||||
padding: .1rem .2rem;
|
||||
}
|
||||
|
||||
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
|
||||
background: $bg-color;
|
||||
color: $color;
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
// Margin utility mixin
|
||||
@mixin margin-variant($id: 1, $size: $unit-1) {
|
||||
.m-#{$id} {
|
||||
margin: $size !important;
|
||||
}
|
||||
|
||||
.mb-#{$id} {
|
||||
margin-bottom: $size !important;
|
||||
}
|
||||
|
||||
.ml-#{$id} {
|
||||
margin-left: $size !important;
|
||||
}
|
||||
|
||||
.mr-#{$id} {
|
||||
margin-right: $size !important;
|
||||
}
|
||||
|
||||
.mt-#{$id} {
|
||||
margin-top: $size !important;
|
||||
}
|
||||
|
||||
.mx-#{$id} {
|
||||
margin-left: $size !important;
|
||||
margin-right: $size !important;
|
||||
}
|
||||
|
||||
.my-#{$id} {
|
||||
margin-bottom: $size !important;
|
||||
margin-top: $size !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding utility mixin
|
||||
@mixin padding-variant($id: 1, $size: $unit-1) {
|
||||
.p-#{$id} {
|
||||
padding: $size !important;
|
||||
}
|
||||
|
||||
.pb-#{$id} {
|
||||
padding-bottom: $size !important;
|
||||
}
|
||||
|
||||
.pl-#{$id} {
|
||||
padding-left: $size !important;
|
||||
}
|
||||
|
||||
.pr-#{$id} {
|
||||
padding-right: $size !important;
|
||||
}
|
||||
|
||||
.pt-#{$id} {
|
||||
padding-top: $size !important;
|
||||
}
|
||||
|
||||
.px-#{$id} {
|
||||
padding-left: $size !important;
|
||||
padding-right: $size !important;
|
||||
}
|
||||
|
||||
.py-#{$id} {
|
||||
padding-bottom: $size !important;
|
||||
padding-top: $size !important;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
// Component focus shadow
|
||||
@mixin control-shadow($color: $primary-color) {
|
||||
box-shadow: 0 0 0 .1rem rgba($color, .2);
|
||||
}
|
||||
|
||||
// Shadow mixin
|
||||
@mixin shadow-variant($offset) {
|
||||
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
// Text Ellipsis
|
||||
@mixin text-ellipsis() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// Toast variant mixin
|
||||
@mixin toast-variant($color: $dark-color) {
|
||||
background: rgba($color, .95);
|
||||
border-color: $color;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Experimentals
|
||||
@import "autocomplete";
|
||||
@import "calendars";
|
||||
@import "carousels";
|
||||
@import "comparison-sliders";
|
||||
@import "filters";
|
||||
@import "meters";
|
||||
@import "off-canvas";
|
||||
@import "parallax";
|
||||
@import "progress";
|
||||
@import "sliders";
|
||||
@import "timelines";
|
||||
@import "viewer-360";
|
||||
@@ -1,10 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Icons
|
||||
@import "icons/icons-core";
|
||||
@import "icons/icons-navigation";
|
||||
@import "icons/icons-action";
|
||||
@import "icons/icons-object";
|
||||
@@ -1,49 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Reset and dependencies
|
||||
@import "normalize";
|
||||
@import "base";
|
||||
|
||||
// Elements
|
||||
@import "typography";
|
||||
@import "asian";
|
||||
@import "tables";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "labels";
|
||||
@import "codes";
|
||||
@import "media";
|
||||
|
||||
// Layout
|
||||
@import "layout";
|
||||
@import "hero";
|
||||
@import "navbar";
|
||||
|
||||
// Components
|
||||
@import "accordions";
|
||||
@import "avatars";
|
||||
@import "badges";
|
||||
@import "breadcrumbs";
|
||||
@import "bars";
|
||||
@import "cards";
|
||||
@import "chips";
|
||||
@import "dropdowns";
|
||||
@import "empty";
|
||||
@import "menus";
|
||||
@import "modals";
|
||||
@import "navs";
|
||||
@import "pagination";
|
||||
@import "panels";
|
||||
@import "popovers";
|
||||
@import "steps";
|
||||
@import "tabs";
|
||||
@import "tiles";
|
||||
@import "toasts";
|
||||
@import "tooltips";
|
||||
|
||||
// Utility classes
|
||||
@import "animations";
|
||||
@import "utilities";
|
||||
@@ -1,31 +0,0 @@
|
||||
// Text colors
|
||||
@include text-color-variant(".text-primary", $primary-color);
|
||||
|
||||
@include text-color-variant(".text-secondary", $secondary-color-dark);
|
||||
|
||||
@include text-color-variant(".text-gray", $gray-color);
|
||||
|
||||
@include text-color-variant(".text-light", $light-color);
|
||||
|
||||
@include text-color-variant(".text-dark", $body-font-color);
|
||||
|
||||
@include text-color-variant(".text-success", $success-color);
|
||||
|
||||
@include text-color-variant(".text-warning", $warning-color);
|
||||
|
||||
@include text-color-variant(".text-error", $error-color);
|
||||
|
||||
// Background colors
|
||||
@include bg-color-variant(".bg-primary", $primary-color);
|
||||
|
||||
@include bg-color-variant(".bg-secondary", $secondary-color);
|
||||
|
||||
@include bg-color-variant(".bg-dark", $dark-color);
|
||||
|
||||
@include bg-color-variant(".bg-gray", $bg-color);
|
||||
|
||||
@include bg-color-variant(".bg-success", $success-color);
|
||||
|
||||
@include bg-color-variant(".bg-warning", $warning-color);
|
||||
|
||||
@include bg-color-variant(".bg-error", $error-color);
|
||||
@@ -1,24 +0,0 @@
|
||||
// Cursors
|
||||
.c-hand {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.c-zoom-in {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.c-zoom-out {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.c-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
// Display
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
.d-inline {
|
||||
display: inline;
|
||||
}
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.d-inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.d-none,
|
||||
.d-hide {
|
||||
display: none !important;
|
||||
}
|
||||
.d-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.d-invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.text-hide {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
.text-assistive {
|
||||
border: 0;
|
||||
clip: rect(0,0,0,0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
// Divider
|
||||
.divider,
|
||||
.divider-vert {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&[data-content]::after {
|
||||
background: $bg-color-light;
|
||||
color: $gray-color;
|
||||
content: attr(data-content);
|
||||
display: inline-block;
|
||||
font-size: $font-size-sm;
|
||||
padding: 0 $unit-2;
|
||||
transform: translateY(-$font-size-sm + $border-width);
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-top: $border-width solid $border-color-light;
|
||||
height: $border-width;
|
||||
margin: $unit-2 0;
|
||||
|
||||
&[data-content] {
|
||||
margin: $unit-4 0;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-vert {
|
||||
display: block;
|
||||
padding: $unit-4;
|
||||
|
||||
&::before {
|
||||
border-left: $border-width solid $border-color;
|
||||
bottom: $unit-2;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: $unit-2;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&[data-content]::after {
|
||||
left: 50%;
|
||||
padding: $unit-1 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
// Loading
|
||||
.loading {
|
||||
color: transparent !important;
|
||||
min-height: $unit-4;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
&::after {
|
||||
animation: loading 500ms infinite linear;
|
||||
border: $border-width-lg solid $primary-color;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-4;
|
||||
left: 50%;
|
||||
margin-left: -$unit-2;
|
||||
margin-top: -$unit-2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: $unit-4;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
&.loading-lg {
|
||||
min-height: $unit-10;
|
||||
&::after {
|
||||
height: $unit-8;
|
||||
margin-left: -$unit-4;
|
||||
margin-top: -$unit-4;
|
||||
width: $unit-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
// Position
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.p-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.p-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.p-fixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.p-sticky {
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
.p-centered {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flex-centered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Spacing
|
||||
@include margin-variant(0, 0);
|
||||
|
||||
@include margin-variant(1, $unit-1);
|
||||
|
||||
@include margin-variant(2, $unit-2);
|
||||
|
||||
@include padding-variant(0, 0);
|
||||
|
||||
@include padding-variant(1, $unit-1);
|
||||
|
||||
@include padding-variant(2, $unit-2);
|
||||
@@ -1,8 +0,0 @@
|
||||
// Shapes
|
||||
.s-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.s-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
// Text
|
||||
// Text alignment utilities
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
// Text transform utilities
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
// Text style utilities
|
||||
.text-normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-large {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
// Text overflow utilities
|
||||
.text-ellipsis {
|
||||
@include text-ellipsis();
|
||||
}
|
||||
|
||||
.text-clip {
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-break {
|
||||
hyphens: auto;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
// Core variables and mixins
|
||||
@import 'theme/variables';
|
||||
@import 'spectre/variables';
|
||||
@import 'spectre/mixins';
|
||||
|
||||
@import 'theme/fonts';
|
||||
@import 'theme/mixins';
|
||||
@@ -10,6 +8,7 @@
|
||||
@import 'theme/forms';
|
||||
@import 'theme/mobile';
|
||||
@import 'theme/animation';
|
||||
@import 'theme/reset';
|
||||
|
||||
@import 'theme/header';
|
||||
@import 'theme/footer';
|
||||
@@ -18,4 +17,3 @@
|
||||
// Extra Skeleton Styling
|
||||
@import 'theme/blog';
|
||||
@import 'theme/onepage';
|
||||
|
||||
|
||||
+102
-156
@@ -1,43 +1,57 @@
|
||||
/* Manually forked from Normalize.css */
|
||||
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
// .bx-wrapper, .bx-viewport {
|
||||
// height: 200px !important; //provide height of slider
|
||||
// }
|
||||
|
||||
.map { height:500px; }
|
||||
|
||||
.bx-viewport {
|
||||
max-height: 70vh!important;
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
.slider{
|
||||
img{
|
||||
width: auto!important;
|
||||
height: 100%;
|
||||
max-height: 70vh;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -47,87 +61,69 @@ section {
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
font-size: auto;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8 (removed).
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers. (removed)
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
ul,li{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify default styling of address.
|
||||
*/
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -146,31 +142,17 @@ strong {
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $mono-font-family; /* 1 (changed) */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-. (Removed)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
font-weight: 400; /* (added) */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -198,44 +180,21 @@ sup {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
@@ -244,9 +203,9 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 (changed) */
|
||||
font-size: inherit; /* 1 (changed) */
|
||||
line-height: inherit; /* 1 (changed) */
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
@@ -271,16 +230,14 @@ select { /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -296,18 +253,22 @@ button::-moz-focus-inner,
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule (removed).
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated) (changed).
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -318,7 +279,8 @@ fieldset {
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
@@ -327,17 +289,15 @@ legend {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
@@ -345,13 +305,14 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
@@ -375,10 +336,9 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -397,12 +357,10 @@ textarea {
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -412,33 +370,21 @@ menu {
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
@@ -0,0 +1,15 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
|
||||
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
|
||||
{% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true) %}
|
||||
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
|
||||
{% set hero_image_name = page.header.hero_image %}
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
<section class="container {{ grid_size }}">
|
||||
<h1>{{page.parent.title}}</h1>
|
||||
{{content}}
|
||||
</section>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,31 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
{% set options = { items: {'@self.siblings':''}, 'order': {'by': 'folder', 'dir': 'asc'}} %}
|
||||
{% set collection = page.collection(options) %}
|
||||
|
||||
{% block hero %}
|
||||
<header class="sous_nav">
|
||||
{% include 'partials/sous-nav.html.twig' with {blog: page.parent, page: child} %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
<section class="container {{ grid_size }}">
|
||||
|
||||
{% block item %}
|
||||
{% for sibling in collection %}
|
||||
{% for item in sibling.collection %}
|
||||
{% if item.header.date_start|date("d/m/Y") < "now"|date("d/m/Y") %}
|
||||
{% include 'partials/blog-list-item.html.twig' with {blog: page, page: item} %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
<script>
|
||||
//Bricklayer
|
||||
var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,52 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
|
||||
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
|
||||
{% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true) %}
|
||||
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
|
||||
{% set hero_image_name = page.header.hero_image %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{% do assets.addCss('theme://css/jquery.bxslider.min.css') %}
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{% do assets.add('theme://js/jquery.bxslider.min.js') %}
|
||||
{% do assets.add('theme://js/item.js') %}
|
||||
{% endblock %}
|
||||
|
||||
{% block hero %}
|
||||
{% if hero_image_name %}
|
||||
{% set hero_image = page.media[hero_image_name] %}
|
||||
{% set content %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
<h2>{{ page.header.subtitle }}</h2>
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
{% endset %}
|
||||
{% include 'partials/hero.html.twig' with {id: 'blog-hero'} %}
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
<section class="container {{ grid_size }}">
|
||||
|
||||
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
|
||||
{% include 'partials/breadcrumbs.html.twig' %}
|
||||
{% endif %}
|
||||
|
||||
{% embed 'partials/layout.html.twig' %}
|
||||
{% block item %}
|
||||
{% include 'partials/blog-item.html.twig' %}
|
||||
{% endblock %}
|
||||
{% block sidebar %}
|
||||
{% include 'partials/sidebar.html.twig' %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -1,5 +1,4 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
{% set blog_image = page.media.images[page.header.hero_image] ?: page.media.images|first %}
|
||||
{% set collection = page.collection() %}
|
||||
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
|
||||
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
|
||||
@@ -13,53 +12,48 @@
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{% do assets.add('theme://js/bricklayer.min.js') %}
|
||||
{% do assets.add('theme://js/scopedQuerySelectorShim.min.js') %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block hero %}
|
||||
{% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %}
|
||||
<header class="sous_nav">
|
||||
<ul>
|
||||
{% set options = { items: {'@self.parent':page.url} } %}
|
||||
{% for i in page.collection(options) %}
|
||||
{% for child in i.collection %}
|
||||
<li>
|
||||
<a href='{{child.url}}'>{{child.title}}</a>
|
||||
</li>
|
||||
{% set page = child.title %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
<section class="container {{ grid_size }}">
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
{% embed 'partials/layout.html.twig' with {blog: page} %}
|
||||
{% block item %}
|
||||
{% for child in collection %}
|
||||
|
||||
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
|
||||
{% include 'partials/breadcrumbs.html.twig' %}
|
||||
{% endif %}
|
||||
{% if child.template == "events" or child.template == "news" or child.template == "artistes" %}
|
||||
{% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
|
||||
{% endif %}
|
||||
|
||||
{% embed 'partials/layout.html.twig' with {blog: page} %}
|
||||
{% block item %}
|
||||
<div class="bricklayer">
|
||||
{% for child in collection %}
|
||||
|
||||
{% if child.template == 'item' %}
|
||||
{% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% if show_pagination and config.plugins.pagination.enabled and collection.params.pagination %}
|
||||
<div id="listing-footer">
|
||||
{% include 'partials/pagination.html.twig' with {base_url: page.url, pagination: collection.params.pagination} %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if show_pagination and config.plugins.pagination.enabled and collection.params.pagination %}
|
||||
<div id="listing-footer">
|
||||
{% include 'partials/pagination.html.twig' with {base_url: page.url, pagination: collection.params.pagination} %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
{% if header.show_sidebar == true %}
|
||||
{% include 'partials/sidebar.html.twig' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
</section>
|
||||
</section>
|
||||
<script>
|
||||
//Bricklayer
|
||||
var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
|
||||
</script>
|
||||
{% block sidebar %}
|
||||
{% if header.show_sidebar == true %}
|
||||
{% include 'partials/sidebar.html.twig' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user