diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-bold.eot b/explorer/src/fonts/cerebrisans/cerebrisans-bold.eot new file mode 100644 index 0000000000..355aa0c731 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-bold.eot differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-bold.svg b/explorer/src/fonts/cerebrisans/cerebrisans-bold.svg new file mode 100644 index 0000000000..f798069a95 --- /dev/null +++ b/explorer/src/fonts/cerebrisans/cerebrisans-bold.svg @@ -0,0 +1,2155 @@ + + + + +Created by FontForge 20161013 at Sun Jul 23 14:11:45 2017 + By ,,, +Copyright (c)2016. Cerebri Sans is a trademark of Alfredo Marco Pradil. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-bold.ttf b/explorer/src/fonts/cerebrisans/cerebrisans-bold.ttf new file mode 100644 index 0000000000..80b3aa3c7e Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-bold.ttf differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-bold.woff b/explorer/src/fonts/cerebrisans/cerebrisans-bold.woff new file mode 100644 index 0000000000..dc6d2a1690 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-bold.woff differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-book.eot b/explorer/src/fonts/cerebrisans/cerebrisans-book.eot new file mode 100644 index 0000000000..34c73ebad8 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-book.eot differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-book.svg b/explorer/src/fonts/cerebrisans/cerebrisans-book.svg new file mode 100644 index 0000000000..b551e9c9f4 --- /dev/null +++ b/explorer/src/fonts/cerebrisans/cerebrisans-book.svg @@ -0,0 +1,2162 @@ + + + + +Created by FontForge 20161013 at Sun Jul 23 14:11:40 2017 + By ,,, +Copyright (c)2016. Cerebri Sans is a trademark of Alfredo Marco Pradil. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-book.ttf b/explorer/src/fonts/cerebrisans/cerebrisans-book.ttf new file mode 100644 index 0000000000..c28b42917e Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-book.ttf differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-book.woff b/explorer/src/fonts/cerebrisans/cerebrisans-book.woff new file mode 100644 index 0000000000..8849121cfe Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-book.woff differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-medium.eot b/explorer/src/fonts/cerebrisans/cerebrisans-medium.eot new file mode 100644 index 0000000000..d957f8d1ef Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-medium.eot differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-medium.svg b/explorer/src/fonts/cerebrisans/cerebrisans-medium.svg new file mode 100644 index 0000000000..17fcdbe92d --- /dev/null +++ b/explorer/src/fonts/cerebrisans/cerebrisans-medium.svg @@ -0,0 +1,2160 @@ + + + + +Created by FontForge 20161013 at Sun Jul 23 14:11:40 2017 + By ,,, +Copyright (c)2016. Cerebri Sans is a trademark of Alfredo Marco Pradil. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-medium.ttf b/explorer/src/fonts/cerebrisans/cerebrisans-medium.ttf new file mode 100644 index 0000000000..890b4d7b71 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-medium.ttf differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-medium.woff b/explorer/src/fonts/cerebrisans/cerebrisans-medium.woff new file mode 100644 index 0000000000..883acb4493 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-medium.woff differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-regular.eot b/explorer/src/fonts/cerebrisans/cerebrisans-regular.eot new file mode 100644 index 0000000000..c5de2691e7 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-regular.eot differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-regular.svg b/explorer/src/fonts/cerebrisans/cerebrisans-regular.svg new file mode 100644 index 0000000000..6b05fe0ac2 --- /dev/null +++ b/explorer/src/fonts/cerebrisans/cerebrisans-regular.svg @@ -0,0 +1,2165 @@ + + + + +Created by FontForge 20161013 at Sun Jul 23 14:11:40 2017 + By ,,, +Copyright (c)2016. Cerebri Sans is a trademark of Alfredo Marco Pradil. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-regular.ttf b/explorer/src/fonts/cerebrisans/cerebrisans-regular.ttf new file mode 100644 index 0000000000..a36bdebbf0 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-regular.ttf differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-regular.woff b/explorer/src/fonts/cerebrisans/cerebrisans-regular.woff new file mode 100644 index 0000000000..bf72aff7f6 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-regular.woff differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-semibold.eot b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.eot new file mode 100644 index 0000000000..da3130517c Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.eot differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-semibold.svg b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.svg new file mode 100644 index 0000000000..6c9d0a0e81 --- /dev/null +++ b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.svg @@ -0,0 +1,2157 @@ + + + + +Created by FontForge 20161013 at Sun Jul 23 14:11:45 2017 + By ,,, +Copyright (c)2016. Cerebri Sans is a trademark of Alfredo Marco Pradil. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-semibold.ttf b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.ttf new file mode 100644 index 0000000000..e4bf9b77f4 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.ttf differ diff --git a/explorer/src/fonts/cerebrisans/cerebrisans-semibold.woff b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.woff new file mode 100644 index 0000000000..0ef9309bc9 Binary files /dev/null and b/explorer/src/fonts/cerebrisans/cerebrisans-semibold.woff differ diff --git a/explorer/src/fonts/feather/feather.css b/explorer/src/fonts/feather/feather.css new file mode 100644 index 0000000000..a042a07705 --- /dev/null +++ b/explorer/src/fonts/feather/feather.css @@ -0,0 +1,823 @@ +@font-face { + font-family: 'Feather'; + src: + url('fonts/Feather.ttf?sdxovp') format('truetype'), + url('fonts/Feather.woff?sdxovp') format('woff'), + url('fonts/Feather.svg?sdxovp#Feather') format('svg'); + font-weight: normal; + font-style: normal; +} + +.fe { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'Feather' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.fe-activity:before { + content: "\e900"; +} +.fe-airplay:before { + content: "\e901"; +} +.fe-alert-circle:before { + content: "\e902"; +} +.fe-alert-octagon:before { + content: "\e903"; +} +.fe-alert-triangle:before { + content: "\e904"; +} +.fe-align-center:before { + content: "\e905"; +} +.fe-align-justify:before { + content: "\e906"; +} +.fe-align-left:before { + content: "\e907"; +} +.fe-align-right:before { + content: "\e908"; +} +.fe-anchor:before { + content: "\e909"; +} +.fe-aperture:before { + content: "\e90a"; +} +.fe-archive:before { + content: "\e90b"; +} +.fe-arrow-down:before { + content: "\e90c"; +} +.fe-arrow-down-circle:before { + content: "\e90d"; +} +.fe-arrow-down-left:before { + content: "\e90e"; +} +.fe-arrow-down-right:before { + content: "\e90f"; +} +.fe-arrow-left:before { + content: "\e910"; +} +.fe-arrow-left-circle:before { + content: "\e911"; +} +.fe-arrow-right:before { + content: "\e912"; +} +.fe-arrow-right-circle:before { + content: "\e913"; +} +.fe-arrow-up:before { + content: "\e914"; +} +.fe-arrow-up-circle:before { + content: "\e915"; +} +.fe-arrow-up-left:before { + content: "\e916"; +} +.fe-arrow-up-right:before { + content: "\e917"; +} +.fe-at-sign:before { + content: "\e918"; +} +.fe-award:before { + content: "\e919"; +} +.fe-bar-chart:before { + content: "\e91a"; +} +.fe-bar-chart-2:before { + content: "\e91b"; +} +.fe-battery:before { + content: "\e91c"; +} +.fe-battery-charging:before { + content: "\e91d"; +} +.fe-bell:before { + content: "\e91e"; +} +.fe-bell-off:before { + content: "\e91f"; +} +.fe-bluetooth:before { + content: "\e920"; +} +.fe-bold:before { + content: "\e921"; +} +.fe-book:before { + content: "\e922"; +} +.fe-book-open:before { + content: "\e923"; +} +.fe-bookmark:before { + content: "\e924"; +} +.fe-box:before { + content: "\e925"; +} +.fe-briefcase:before { + content: "\e926"; +} +.fe-calendar:before { + content: "\e927"; +} +.fe-camera:before { + content: "\e928"; +} +.fe-camera-off:before { + content: "\e929"; +} +.fe-cast:before { + content: "\e92a"; +} +.fe-check:before { + content: "\e92b"; +} +.fe-check-circle:before { + content: "\e92c"; +} +.fe-check-square:before { + content: "\e92d"; +} +.fe-chevron-down:before { + content: "\e92e"; +} +.fe-chevron-left:before { + content: "\e92f"; +} +.fe-chevron-right:before { + content: "\e930"; +} +.fe-chevron-up:before { + content: "\e931"; +} +.fe-chevrons-down:before { + content: "\e932"; +} +.fe-chevrons-left:before { + content: "\e933"; +} +.fe-chevrons-right:before { + content: "\e934"; +} +.fe-chevrons-up:before { + content: "\e935"; +} +.fe-chrome:before { + content: "\e936"; +} +.fe-circle:before { + content: "\e937"; +} +.fe-clipboard:before { + content: "\e938"; +} +.fe-clock:before { + content: "\e939"; +} +.fe-cloud:before { + content: "\e93a"; +} +.fe-cloud-drizzle:before { + content: "\e93b"; +} +.fe-cloud-lightning:before { + content: "\e93c"; +} +.fe-cloud-off:before { + content: "\e93d"; +} +.fe-cloud-rain:before { + content: "\e93e"; +} +.fe-cloud-snow:before { + content: "\e93f"; +} +.fe-code:before { + content: "\e940"; +} +.fe-codepen:before { + content: "\e941"; +} +.fe-command:before { + content: "\e942"; +} +.fe-compass:before { + content: "\e943"; +} +.fe-copy:before { + content: "\e944"; +} +.fe-corner-down-left:before { + content: "\e945"; +} +.fe-corner-down-right:before { + content: "\e946"; +} +.fe-corner-left-down:before { + content: "\e947"; +} +.fe-corner-left-up:before { + content: "\e948"; +} +.fe-corner-right-down:before { + content: "\e949"; +} +.fe-corner-right-up:before { + content: "\e94a"; +} +.fe-corner-up-left:before { + content: "\e94b"; +} +.fe-corner-up-right:before { + content: "\e94c"; +} +.fe-cpu:before { + content: "\e94d"; +} +.fe-credit-card:before { + content: "\e94e"; +} +.fe-crop:before { + content: "\e94f"; +} +.fe-crosshair:before { + content: "\e950"; +} +.fe-database:before { + content: "\e951"; +} +.fe-delete:before { + content: "\e952"; +} +.fe-disc:before { + content: "\e953"; +} +.fe-dollar-sign:before { + content: "\e954"; +} +.fe-download:before { + content: "\e955"; +} +.fe-download-cloud:before { + content: "\e956"; +} +.fe-droplet:before { + content: "\e957"; +} +.fe-edit:before { + content: "\e958"; +} +.fe-edit-2:before { + content: "\e959"; +} +.fe-edit-3:before { + content: "\e95a"; +} +.fe-external-link:before { + content: "\e95b"; +} +.fe-eye:before { + content: "\e95c"; +} +.fe-eye-off:before { + content: "\e95d"; +} +.fe-facebook:before { + content: "\e95e"; +} +.fe-fast-forward:before { + content: "\e95f"; +} +.fe-feather:before { + content: "\e960"; +} +.fe-file:before { + content: "\e961"; +} +.fe-file-minus:before { + content: "\e962"; +} +.fe-file-plus:before { + content: "\e963"; +} +.fe-file-text:before { + content: "\e964"; +} +.fe-film:before { + content: "\e965"; +} +.fe-filter:before { + content: "\e966"; +} +.fe-flag:before { + content: "\e967"; +} +.fe-folder:before { + content: "\e968"; +} +.fe-folder-minus:before { + content: "\e969"; +} +.fe-folder-plus:before { + content: "\e96a"; +} +.fe-gift:before { + content: "\e96b"; +} +.fe-git-branch:before { + content: "\e96c"; +} +.fe-git-commit:before { + content: "\e96d"; +} +.fe-git-merge:before { + content: "\e96e"; +} +.fe-git-pull-request:before { + content: "\e96f"; +} +.fe-github:before { + content: "\e970"; +} +.fe-gitlab:before { + content: "\e971"; +} +.fe-globe:before { + content: "\e972"; +} +.fe-grid:before { + content: "\e973"; +} +.fe-hard-drive:before { + content: "\e974"; +} +.fe-hash:before { + content: "\e975"; +} +.fe-headphones:before { + content: "\e976"; +} +.fe-heart:before { + content: "\e977"; +} +.fe-help-circle:before { + content: "\e978"; +} +.fe-home:before { + content: "\e979"; +} +.fe-image:before { + content: "\e97a"; +} +.fe-inbox:before { + content: "\e97b"; +} +.fe-info:before { + content: "\e97c"; +} +.fe-instagram:before { + content: "\e97d"; +} +.fe-italic:before { + content: "\e97e"; +} +.fe-layers:before { + content: "\e97f"; +} +.fe-layout:before { + content: "\e980"; +} +.fe-life-buoy:before { + content: "\e981"; +} +.fe-link:before { + content: "\e982"; +} +.fe-link-2:before { + content: "\e983"; +} +.fe-linkedin:before { + content: "\e984"; +} +.fe-list:before { + content: "\e985"; +} +.fe-loader:before { + content: "\e986"; +} +.fe-lock:before { + content: "\e987"; +} +.fe-log-in:before { + content: "\e988"; +} +.fe-log-out:before { + content: "\e989"; +} +.fe-mail:before { + content: "\e98a"; +} +.fe-map:before { + content: "\e98b"; +} +.fe-map-pin:before { + content: "\e98c"; +} +.fe-maximize:before { + content: "\e98d"; +} +.fe-maximize-2:before { + content: "\e98e"; +} +.fe-menu:before { + content: "\e98f"; +} +.fe-message-circle:before { + content: "\e990"; +} +.fe-message-square:before { + content: "\e991"; +} +.fe-mic:before { + content: "\e992"; +} +.fe-mic-off:before { + content: "\e993"; +} +.fe-minimize:before { + content: "\e994"; +} +.fe-minimize-2:before { + content: "\e995"; +} +.fe-minus:before { + content: "\e996"; +} +.fe-minus-circle:before { + content: "\e997"; +} +.fe-minus-square:before { + content: "\e998"; +} +.fe-monitor:before { + content: "\e999"; +} +.fe-moon:before { + content: "\e99a"; +} +.fe-more-horizontal:before { + content: "\e99b"; +} +.fe-more-vertical:before { + content: "\e99c"; +} +.fe-move:before { + content: "\e99d"; +} +.fe-music:before { + content: "\e99e"; +} +.fe-navigation:before { + content: "\e99f"; +} +.fe-navigation-2:before { + content: "\e9a0"; +} +.fe-octagon:before { + content: "\e9a1"; +} +.fe-package:before { + content: "\e9a2"; +} +.fe-paperclip:before { + content: "\e9a3"; +} +.fe-pause:before { + content: "\e9a4"; +} +.fe-pause-circle:before { + content: "\e9a5"; +} +.fe-percent:before { + content: "\e9a6"; +} +.fe-phone:before { + content: "\e9a7"; +} +.fe-phone-call:before { + content: "\e9a8"; +} +.fe-phone-forwarded:before { + content: "\e9a9"; +} +.fe-phone-incoming:before { + content: "\e9aa"; +} +.fe-phone-missed:before { + content: "\e9ab"; +} +.fe-phone-off:before { + content: "\e9ac"; +} +.fe-phone-outgoing:before { + content: "\e9ad"; +} +.fe-pie-chart:before { + content: "\e9ae"; +} +.fe-play:before { + content: "\e9af"; +} +.fe-play-circle:before { + content: "\e9b0"; +} +.fe-plus:before { + content: "\e9b1"; +} +.fe-plus-circle:before { + content: "\e9b2"; +} +.fe-plus-square:before { + content: "\e9b3"; +} +.fe-pocket:before { + content: "\e9b4"; +} +.fe-power:before { + content: "\e9b5"; +} +.fe-printer:before { + content: "\e9b6"; +} +.fe-radio:before { + content: "\e9b7"; +} +.fe-refresh-ccw:before { + content: "\e9b8"; +} +.fe-refresh-cw:before { + content: "\e9b9"; +} +.fe-repeat:before { + content: "\e9ba"; +} +.fe-rewind:before { + content: "\e9bb"; +} +.fe-rotate-ccw:before { + content: "\e9bc"; +} +.fe-rotate-cw:before { + content: "\e9bd"; +} +.fe-rss:before { + content: "\e9be"; +} +.fe-save:before { + content: "\e9bf"; +} +.fe-scissors:before { + content: "\e9c0"; +} +.fe-search:before { + content: "\e9c1"; +} +.fe-send:before { + content: "\e9c2"; +} +.fe-server:before { + content: "\e9c3"; +} +.fe-settings:before { + content: "\e9c4"; +} +.fe-share:before { + content: "\e9c5"; +} +.fe-share-2:before { + content: "\e9c6"; +} +.fe-shield:before { + content: "\e9c7"; +} +.fe-shield-off:before { + content: "\e9c8"; +} +.fe-shopping-bag:before { + content: "\e9c9"; +} +.fe-shopping-cart:before { + content: "\e9ca"; +} +.fe-shuffle:before { + content: "\e9cb"; +} +.fe-sidebar:before { + content: "\e9cc"; +} +.fe-skip-back:before { + content: "\e9cd"; +} +.fe-skip-forward:before { + content: "\e9ce"; +} +.fe-slack:before { + content: "\e9cf"; +} +.fe-slash:before { + content: "\e9d0"; +} +.fe-sliders:before { + content: "\e9d1"; +} +.fe-smartphone:before { + content: "\e9d2"; +} +.fe-speaker:before { + content: "\e9d3"; +} +.fe-square:before { + content: "\e9d4"; +} +.fe-star:before { + content: "\e9d5"; +} +.fe-stop-circle:before { + content: "\e9d6"; +} +.fe-sun:before { + content: "\e9d7"; +} +.fe-sunrise:before { + content: "\e9d8"; +} +.fe-sunset:before { + content: "\e9d9"; +} +.fe-tablet:before { + content: "\e9da"; +} +.fe-tag:before { + content: "\e9db"; +} +.fe-target:before { + content: "\e9dc"; +} +.fe-terminal:before { + content: "\e9dd"; +} +.fe-thermometer:before { + content: "\e9de"; +} +.fe-thumbs-down:before { + content: "\e9df"; +} +.fe-thumbs-up:before { + content: "\e9e0"; +} +.fe-toggle-left:before { + content: "\e9e1"; +} +.fe-toggle-right:before { + content: "\e9e2"; +} +.fe-trash:before { + content: "\e9e3"; +} +.fe-trash-2:before { + content: "\e9e4"; +} +.fe-trending-down:before { + content: "\e9e5"; +} +.fe-trending-up:before { + content: "\e9e6"; +} +.fe-triangle:before { + content: "\e9e7"; +} +.fe-truck:before { + content: "\e9e8"; +} +.fe-tv:before { + content: "\e9e9"; +} +.fe-twitter:before { + content: "\e9ea"; +} +.fe-type:before { + content: "\e9eb"; +} +.fe-umbrella:before { + content: "\e9ec"; +} +.fe-underline:before { + content: "\e9ed"; +} +.fe-unlock:before { + content: "\e9ee"; +} +.fe-upload:before { + content: "\e9ef"; +} +.fe-upload-cloud:before { + content: "\e9f0"; +} +.fe-user:before { + content: "\e9f1"; +} +.fe-user-check:before { + content: "\e9f2"; +} +.fe-user-minus:before { + content: "\e9f3"; +} +.fe-user-plus:before { + content: "\e9f4"; +} +.fe-user-x:before { + content: "\e9f5"; +} +.fe-users:before { + content: "\e9f6"; +} +.fe-video:before { + content: "\e9f7"; +} +.fe-video-off:before { + content: "\e9f8"; +} +.fe-voicemail:before { + content: "\e9f9"; +} +.fe-volume:before { + content: "\e9fa"; +} +.fe-volume-1:before { + content: "\e9fb"; +} +.fe-volume-2:before { + content: "\e9fc"; +} +.fe-volume-x:before { + content: "\e9fd"; +} +.fe-watch:before { + content: "\e9fe"; +} +.fe-wifi:before { + content: "\e9ff"; +} +.fe-wifi-off:before { + content: "\ea00"; +} +.fe-wind:before { + content: "\ea01"; +} +.fe-x:before { + content: "\ea02"; +} +.fe-x-circle:before { + content: "\ea03"; +} +.fe-x-square:before { + content: "\ea04"; +} +.fe-youtube:before { + content: "\ea05"; +} +.fe-zap:before { + content: "\ea06"; +} +.fe-zap-off:before { + content: "\ea07"; +} +.fe-zoom-in:before { + content: "\ea08"; +} +.fe-zoom-out:before { + content: "\ea09"; +} diff --git a/explorer/src/fonts/feather/fonts/Feather.svg b/explorer/src/fonts/feather/fonts/Feather.svg new file mode 100644 index 0000000000..a31be3cd25 --- /dev/null +++ b/explorer/src/fonts/feather/fonts/Feather.svg @@ -0,0 +1,276 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/fonts/feather/fonts/Feather.ttf b/explorer/src/fonts/feather/fonts/Feather.ttf new file mode 100644 index 0000000000..244dcaff96 Binary files /dev/null and b/explorer/src/fonts/feather/fonts/Feather.ttf differ diff --git a/explorer/src/fonts/feather/fonts/Feather.woff b/explorer/src/fonts/feather/fonts/Feather.woff new file mode 100644 index 0000000000..762faaaa93 Binary files /dev/null and b/explorer/src/fonts/feather/fonts/Feather.woff differ diff --git a/explorer/src/img/dashkit/covers/auth-side-cover.jpg b/explorer/src/img/dashkit/covers/auth-side-cover.jpg new file mode 100644 index 0000000000..55889a9b94 Binary files /dev/null and b/explorer/src/img/dashkit/covers/auth-side-cover.jpg differ diff --git a/explorer/src/img/dashkit/covers/header-cover.jpg b/explorer/src/img/dashkit/covers/header-cover.jpg new file mode 100644 index 0000000000..566c159ba6 Binary files /dev/null and b/explorer/src/img/dashkit/covers/header-cover.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-1.jpg b/explorer/src/img/dashkit/covers/profile-cover-1.jpg new file mode 100644 index 0000000000..5be7280060 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-1.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-2.jpg b/explorer/src/img/dashkit/covers/profile-cover-2.jpg new file mode 100644 index 0000000000..cdd7da8eb2 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-2.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-3.jpg b/explorer/src/img/dashkit/covers/profile-cover-3.jpg new file mode 100644 index 0000000000..b3abb6ed03 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-3.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-4.jpg b/explorer/src/img/dashkit/covers/profile-cover-4.jpg new file mode 100644 index 0000000000..a34c736729 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-4.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-5.jpg b/explorer/src/img/dashkit/covers/profile-cover-5.jpg new file mode 100644 index 0000000000..5a80ccf97b Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-5.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-6.jpg b/explorer/src/img/dashkit/covers/profile-cover-6.jpg new file mode 100644 index 0000000000..cabb03386c Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-6.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-7.jpg b/explorer/src/img/dashkit/covers/profile-cover-7.jpg new file mode 100644 index 0000000000..d3d4bfde64 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-7.jpg differ diff --git a/explorer/src/img/dashkit/covers/profile-cover-8.jpg b/explorer/src/img/dashkit/covers/profile-cover-8.jpg new file mode 100644 index 0000000000..21f26f18c8 Binary files /dev/null and b/explorer/src/img/dashkit/covers/profile-cover-8.jpg differ diff --git a/explorer/src/img/dashkit/covers/sidebar-cover.jpg b/explorer/src/img/dashkit/covers/sidebar-cover.jpg new file mode 100644 index 0000000000..4bb692eeaa Binary files /dev/null and b/explorer/src/img/dashkit/covers/sidebar-cover.jpg differ diff --git a/explorer/src/img/dashkit/covers/team-cover.jpg b/explorer/src/img/dashkit/covers/team-cover.jpg new file mode 100644 index 0000000000..f6c1089e2a Binary files /dev/null and b/explorer/src/img/dashkit/covers/team-cover.jpg differ diff --git a/explorer/src/img/dashkit/masks/avatar-group-hover-last.svg b/explorer/src/img/dashkit/masks/avatar-group-hover-last.svg new file mode 100644 index 0000000000..22abb0655d --- /dev/null +++ b/explorer/src/img/dashkit/masks/avatar-group-hover-last.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/img/dashkit/masks/avatar-group-hover.svg b/explorer/src/img/dashkit/masks/avatar-group-hover.svg new file mode 100644 index 0000000000..ed5bd16899 --- /dev/null +++ b/explorer/src/img/dashkit/masks/avatar-group-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/img/dashkit/masks/avatar-group.svg b/explorer/src/img/dashkit/masks/avatar-group.svg new file mode 100644 index 0000000000..d67e8d38c5 --- /dev/null +++ b/explorer/src/img/dashkit/masks/avatar-group.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/img/dashkit/masks/avatar-status.svg b/explorer/src/img/dashkit/masks/avatar-status.svg new file mode 100644 index 0000000000..fca5423ac7 --- /dev/null +++ b/explorer/src/img/dashkit/masks/avatar-status.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/img/dashkit/masks/icon-status.svg b/explorer/src/img/dashkit/masks/icon-status.svg new file mode 100644 index 0000000000..0b880fb333 --- /dev/null +++ b/explorer/src/img/dashkit/masks/icon-status.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_alert.scss b/explorer/src/scss/dashkit/_alert.scss new file mode 100644 index 0000000000..9e5f72fb0d --- /dev/null +++ b/explorer/src/scss/dashkit/_alert.scss @@ -0,0 +1,28 @@ +// +// alerts +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Allow for a text-decoration since links are the same color as the alert text. + +.alert-link { + text-decoration: $alert-link-text-decoration; +} + +// Color variants +// +// Using Bootstrap's core alert-variant mixin to generate solid background color + yiq colorized text (and making close/links match those colors) + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), color-yiq(theme-color-level($color, $alert-bg-level))); + .close, + .alert-link { + color: color-yiq(theme-color-level($color, $alert-bg-level)); + } + } +} diff --git a/explorer/src/scss/dashkit/_avatar.scss b/explorer/src/scss/dashkit/_avatar.scss new file mode 100644 index 0000000000..4c806f385b --- /dev/null +++ b/explorer/src/scss/dashkit/_avatar.scss @@ -0,0 +1,197 @@ +// +// avatar.scss +// Dashkit component +// + +// General + +.avatar { + position: relative; + display: inline-block; + width: $avatar-size-base; + height: $avatar-size-base; + font-size: $avatar-size-base / 3; + + // Loads mask images so they don't lag on hover + + &:after { + content: ''; + position: absolute; + width: 0; + height: 0; + background-image: url(#{$path-to-img}/masks/avatar-status.svg), + url(#{$path-to-img}/masks/avatar-group.svg), + url(#{$path-to-img}/masks/avatar-group-hover.svg), + url(#{$path-to-img}/masks/avatar-group-hover-last.svg); + } +} + +.avatar-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.avatar-title { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + line-height: 0; + background-color: $avatar-title-bg; + color: $avatar-title-color; +} + + +// Status + +.avatar-online, +.avatar-offline { + + &::before { + content: ''; + position: absolute; + bottom: 5%; + right: 5%; + width: 20%; + height: 20%; + border-radius: 50%; + } + + .avatar-img { + mask-image: url(#{$path-to-img}/masks/avatar-status.svg); + mask-size: 100% 100%; + } +} + +.avatar-online::before { + background-color: $success; +} + +.avatar-offline::before { + background-color: $gray-500; +} + + +// Sizing + +.avatar-xs { + width: $avatar-size-xs; + height: $avatar-size-xs; + font-size: $avatar-size-xs / 3; +} + +.avatar-sm { + width: $avatar-size-sm; + height: $avatar-size-sm; + font-size: $avatar-size-sm / 3; +} + +.avatar-lg { + width: $avatar-size-lg; + height: $avatar-size-lg; + font-size: $avatar-size-lg / 3; +} + +.avatar-xl { + width: $avatar-size-xl; + height: $avatar-size-xl; + font-size: $avatar-size-xl / 3; +} + +.avatar-xxl { + width: $avatar-size-xl; + height: $avatar-size-xl; + font-size: $avatar-size-xl / 3; + + @include media-breakpoint-up(md) { + width: $avatar-size-xxl; + height: $avatar-size-xxl; + font-size: $avatar-size-xxl / 3; + } +} + + +// Ratio + +.avatar.avatar-4by3 { + width: $avatar-size-base * 4 / 3; +} + +.avatar-xs.avatar-4by3 { + width: $avatar-size-xs * 4 / 3; +} + +.avatar-sm.avatar-4by3 { + width: $avatar-size-sm * 4 / 3; +} + +.avatar-lg.avatar-4by3 { + width: $avatar-size-lg * 4 / 3; +} + +.avatar-xl.avatar-4by3 { + width: $avatar-size-xl * 4 / 3; +} + +.avatar-xxl.avatar-4by3 { + width: $avatar-size-xxl * 4 / 3; +} + + +// Group + +.avatar-group { + display: inline-flex; + + // Shift every next avatar left + + .avatar + .avatar { + margin-left: -$avatar-size-base / 4; + } + + .avatar-xs + .avatar-xs { + margin-left: -$avatar-size-xs / 4; + } + + .avatar-sm + .avatar-sm { + margin-left: -$avatar-size-sm / 4; + } + + .avatar-lg + .avatar-lg { + margin-left: -$avatar-size-lg / 4; + } + + .avatar-xl + .avatar-xl { + margin-left: -$avatar-size-xl / 4; + } + + .avatar-xxl + .avatar-xxl { + margin-left: -$avatar-size-xxl / 4; + } + + // Add some spacing between avatars + + .avatar:not(:last-child) { + mask-image: url(#{$path-to-img}/masks/avatar-group.svg); + mask-size: 100% 100%; + } + + // Bring an avatar to front on hover + + .avatar:hover { + mask-image: none; + z-index: 1; + + + .avatar { + mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg); + mask-size: 100% 100%; + + &:last-child { + mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg); + } + } + } + +} diff --git a/explorer/src/scss/dashkit/_badge.scss b/explorer/src/scss/dashkit/_badge.scss new file mode 100644 index 0000000000..574ccf44f1 --- /dev/null +++ b/explorer/src/scss/dashkit/_badge.scss @@ -0,0 +1,28 @@ +// +// badge.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.badge { + vertical-align: middle; +} + +// Quick fix for badges in buttons +.btn .badge { + top: -2px; +} + +// +// Dashkit ===================================== +// + +// Creates the "soft" badge variant +@each $color, $value in $theme-colors { + .badge-soft-#{$color} { + @include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value); + } +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_breadcrumb.scss b/explorer/src/scss/dashkit/_breadcrumb.scss new file mode 100644 index 0000000000..ef70340842 --- /dev/null +++ b/explorer/src/scss/dashkit/_breadcrumb.scss @@ -0,0 +1,55 @@ +// +// breadcrumb.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.breadcrumb-item { + // The separator between breadcrumbs + + .breadcrumb-item::before { + width: .3rem; + height: .6rem; + margin-right: $breadcrumb-item-padding; + -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; + mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; + -webkit-mask-size: contain; + mask-size: contain; + background: $breadcrumb-divider-color; + } +} + + +// +// Dashkit ===================================== +// + +// Small +// +// Reduces font size + +.breadcrumb-sm { + font-size: $breadcrumb-font-size-sm; +} + + +// Overflow +// +// Allows the breadcrumb to be overflown horizontally + +.breadcrumb-overflow { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } +} + +.breadcrumb-overflow .breadcrumb-item { + white-space: nowrap; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_buttons.scss b/explorer/src/scss/dashkit/_buttons.scss new file mode 100644 index 0000000000..b99456ecb7 --- /dev/null +++ b/explorer/src/scss/dashkit/_buttons.scss @@ -0,0 +1,68 @@ +// +// buttons.scss +// Extended from Bootstrap +// + + +// +// Dashkit =================================== +// + +// Button white + +.btn-white { + border-color: $gray-300; + + @include hover-focus { + background-color: $gray-100; + border-color: $gray-400; + } +} + +.btn-group-toggle .btn-white:not(:disabled):not(.disabled):active, +.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active { + background-color: $input-bg; + border-color: $input-focus-border-color; + color: $primary; +} + +.btn-group-toggle .btn-white:focus, +.btn-group-toggle .btn-white.focus { + box-shadow: none; +} + + +// Button outline secondary + +.btn-outline-secondary { + &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){ + border-color: $gray-400; + } +} + + +// Button rounded +// +// Creates circle button variations + +.btn-rounded-circle { + width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2); + padding-left: 0; + padding-right: 0; + border-radius: 50%; +} +.btn-rounded-circle.btn-lg { + width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2); +} +.btn-rounded-circle.btn-sm { + width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2); +} + + +// Button group +// +// Prevent buttons from jittering on hover + +.btn-group .btn + .btn { + margin-left: 0; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_card.scss b/explorer/src/scss/dashkit/_card.scss new file mode 100644 index 0000000000..a4d826079b --- /dev/null +++ b/explorer/src/scss/dashkit/_card.scss @@ -0,0 +1,298 @@ +// +// card.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.card { + margin-bottom: $card-margin-bottom; + border-color: $card-outline-color; + box-shadow: $card-box-shadow; +} + +.card > * { + flex-shrink: 0; +} + +// Header + +.card-header { + display: flex; + flex-direction: row; + align-items: center; + height: $card-header-height; + padding-top: $card-spacer-y / 2; + padding-bottom: $card-spacer-y / 2; + + > *:first-child { + flex: 1; + } +} + +// Title + +.card-title { + margin-bottom: $card-spacer-y / 2; +} + + +// +// Dashkit =================================== +// + +// Card header +// +// Make sure the card header is always the same height with its content +// centered vertically + +.card-header-title { + margin-bottom: 0; +} + +.card-header-tabs { + margin-top: -$card-spacer-y / 2; + margin-bottom: -$card-spacer-y / 2; + margin-left: 0; + margin-right: 0; +} + +.card-header-tabs .nav-link { + padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; + padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; +} + + +// Card table +// +// Make sure the card table content is aligned with the rest of the card content + +.card-table { + margin-bottom: 0; +} + +.card-table thead th { + border-top-width: 0; +} + +.card-table thead th, +.card-table tbody td { + + &:first-child { + padding-left: $card-spacer-x !important; + } + + &:last-child { + padding-right: $card-spacer-x !important; + } +} + +.card > .card-table:first-child, +.card > .table-responsive:first-child > .card-table { + + > thead, > tbody, > tfoot { + + &:first-child { + + > tr:first-child { + + > th, > td { + + &:first-child { + border-top-left-radius: $card-border-radius; + } + + &:last-child { + border-top-right-radius: $card-border-radius; + } + } + } + } + } +} + + +// Card avatar +// +// Moves card avatar up by 50% + +.card-avatar { + display: block !important; + margin-left: auto; + margin-right: auto; + margin-bottom: $card-spacer-y; +} + +.card-avatar-top { + margin-top: -($card-spacer-x + $avatar-size-base / 2); +} + +.card-avatar-top.avatar-xs { + margin-top: -($card-spacer-x + $avatar-size-xs / 2); +} + +.card-avatar-top.avatar-sm { + margin-top: -($card-spacer-x + $avatar-size-sm / 2); +} + +.card-avatar-top.avatar-lg { + margin-top: -($card-spacer-x + $avatar-size-lg / 2); +} + +.card-avatar-top.avatar-xl { + margin-top: -($card-spacer-x + $avatar-size-xl / 2); +} + +.card-avatar-top.avatar-xxl { + margin-top: -($card-spacer-x + $avatar-size-xxl / 2); +} + + +// Card dropdown +// +// Places dropdowns in the top right corner + +.card-dropdown { + position: absolute; + top: $card-spacer-x; + right: $card-spacer-x; +} + + +// Card inactive +// +// Adds dashed border and removes background + +.card-inactive { + border-color: $border-color; + border-style: dashed; + background-color: transparent; + box-shadow: none; +} + + +// Card flush +// +// Removes borders and background + +.card-flush { + background: none; + border: none; + box-shadow: none; +} + + +// Card sizing +// +// Affects card padding + +.card-sm .card-body, +.card-sm .card-footer-boxed { + padding: $card-spacer-x-sm; +} + + +// Card header flush +// +// Removes border between card header and body and adjusts spacing + +.card-header-flush { + border-bottom: 0; +} + +.card-header-flush + .card-body { + padding-top: 0; +} + + +// Card fill +// +// Fills the whole available space to fit the height of the neighboring card + +.card-fill { + height: calc(100% - #{$card-margin-bottom}); +} + +.card-fill .card-body { + flex-grow: 0; + margin-top: auto; + margin-bottom: auto; +} + +// Responsive + +.card-fill { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + height: calc(100% - #{$card-margin-bottom}); + + .card-body { + flex-grow: 0; + margin-top: auto; + margin-bottom: auto; + } + } + } + } +} + + +// Card adjust +// +// Limits the height to the height of the neighboring card and adds a scrollbar to the card body + +.card-adjust { + height: 0; + min-height: 100%; +} + +.card-adjust .card { + height: calc(100% - #{$card-margin-bottom}); +} + +.card-adjust .card-body { + height: calc(100% - #{$card-header-height}); + overflow-y: auto; +} + +// Responsive + +.card-adjust { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + height: 0; + min-height: 100%; + + .card { + height: calc(100% - #{$card-margin-bottom}); + } + + .card-body { + height: calc(100% - #{$card-header-height}); + overflow-y: auto; + } + } + } + } +} + + +// Card footer boxed + +.card-footer-boxed { + padding-right: 0; + padding-bottom: $card-spacer-x; + padding-left: 0; + margin-left: $card-spacer-x; + margin-right: $card-spacer-x; +} diff --git a/explorer/src/scss/dashkit/_chart.scss b/explorer/src/scss/dashkit/_chart.scss new file mode 100644 index 0000000000..2b2b057eb4 --- /dev/null +++ b/explorer/src/scss/dashkit/_chart.scss @@ -0,0 +1,79 @@ +// +// chart.scss +// Dashkit component +// + +// Chart +// +// General styles + +.chart { + position: relative; + height: $chart-height; +} + +.chart.chart-appended { + height: calc(#{$chart-height} - #{$chart-legend-height}); +} + +.chart-sm { + height: $chart-height-sm; +} + +.chart-sm.chart-appended { + height: calc(#{$chart-height-sm} - #{$chart-legend-height}); +} + + +// Sparkline + +.chart-sparkline { + width: $chart-sparkline-width; + height: $chart-sparkline-height; +} + + +// Legend +// +// Custom legend + +.chart-legend { + display: flex; + justify-content: center; + margin-top: $chart-legend-margin-top; + font-size: $chart-legend-font-size; + text-align: center; + color: $chart-legend-color; +} + +.chart-legend-item { + display: inline-flex; + align-items: center; + + + .chart-legend-item { + margin-left: 1rem; + } +} + +.chart-legend-indicator { + display: inline-block; + width: .5rem; + height: .5rem; + margin-right: 0.375rem; + border-radius: 50%; +} + + +// Tooltip +// +// Custom tooltip + +#chart-tooltip { + z-index: 0; +} + +#chart-tooltip .arrow { + top: 100%; + left: 50%; + transform: translateX(-50%) translateX(-.5rem); +} diff --git a/explorer/src/scss/dashkit/_checklist.scss b/explorer/src/scss/dashkit/_checklist.scss new file mode 100644 index 0000000000..9f19c70712 --- /dev/null +++ b/explorer/src/scss/dashkit/_checklist.scss @@ -0,0 +1,36 @@ +// +// checklist.scss +// Dashkit component +// + +.checklist { + outline: none; +} + +.checklist-control { + display: flex; + flex-wrap: nowrap; + outline: none; + user-select: none; +} + +.checklist-control .custom-control-input:checked ~ .custom-control-caption { + text-decoration: line-through; + color: $checklist-control-checked-color; +} + +.checklist-control + .checklist-control { + margin-top: $checklist-control-spacer; +} + +.checklist-control:first-child[style*="display: none"] + .checklist-control { + margin-top: 0; +} + +.checklist-control.draggable-mirror { + z-index: $zindex-fixed; +} + +.checklist-control.draggable-source--is-dragging { + opacity: .2; +} diff --git a/explorer/src/scss/dashkit/_close.scss b/explorer/src/scss/dashkit/_close.scss new file mode 100644 index 0000000000..d5c9f2f729 --- /dev/null +++ b/explorer/src/scss/dashkit/_close.scss @@ -0,0 +1,10 @@ +// +// close.scss +// Extended from Bootstrap +// + +// Small + +.close-sm { + font-size: $close-font-size-sm; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_code.scss b/explorer/src/scss/dashkit/_code.scss new file mode 100644 index 0000000000..39cb6a15e8 --- /dev/null +++ b/explorer/src/scss/dashkit/_code.scss @@ -0,0 +1,16 @@ +// +// code.scss +// Extended from Bootstrap +// + +// +// Dashkit ================================= +// + +// Highlight +// +// Hightlight.js overrides + +.highlight { + padding: 0; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_comment.scss b/explorer/src/scss/dashkit/_comment.scss new file mode 100644 index 0000000000..072d602230 --- /dev/null +++ b/explorer/src/scss/dashkit/_comment.scss @@ -0,0 +1,34 @@ +// +// comment.scss +// Dashkit component +// + +// Comment +// +// General styles + +.comment { + margin-bottom: $comment-margin-bottom; +} + +.comment-body { + display: inline-block; + padding: $comment-body-padding-y $comment-body-padding-x; + background-color: $comment-body-bg; + border-radius: $comment-body-border-radius; +} + +.comment-time { + display: block; + margin-bottom: $comment-time-margin-bottom; + font-size: $comment-time-font-size; + color: $comment-time-color; +} + +.comment-text { + font-size: $comment-body-font-size; +} + +.comment-text:last-child { + margin-bottom: 0; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_custom-forms.scss b/explorer/src/scss/dashkit/_custom-forms.scss new file mode 100644 index 0000000000..1fcde355f8 --- /dev/null +++ b/explorer/src/scss/dashkit/_custom-forms.scss @@ -0,0 +1,37 @@ +// +// custom-forms.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + +// Switch + +.custom-switch { + min-height: $custom-switch-height; + + .custom-control-label { + + &::before { + top: 0; + height: $custom-switch-height; + border-radius: $custom-switch-height / 2; + } + + &::after { + top: $custom-switch-spacing; + left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width; + background-color: $custom-switch-indicator-bg; + } + } + + .custom-control-input:checked ~ .custom-control-label { + + &::after { + background-color: $custom-switch-indicator-active-bg; + transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size); + } + } +} diff --git a/explorer/src/scss/dashkit/_dashkit.scss b/explorer/src/scss/dashkit/_dashkit.scss new file mode 100644 index 0000000000..9dd6a91f88 --- /dev/null +++ b/explorer/src/scss/dashkit/_dashkit.scss @@ -0,0 +1,38 @@ +// Extended Bootstrap components + +@import 'mixins'; +@import 'alert'; +@import 'badge'; +@import 'breadcrumb'; +@import 'buttons'; +@import 'card'; +@import 'close'; +@import 'code'; +@import 'custom-forms'; +@import 'dropdowns'; +@import 'forms'; +@import 'jumbotron'; +@import 'list-group'; +@import 'modal'; +@import 'nav'; +@import 'navbar'; +@import 'popover'; +@import 'progress'; +@import 'reboot'; +@import 'root'; +@import 'tables'; +@import 'toasts'; +@import 'type'; +@import 'utilities'; + +// Dashkit only components + +@import 'avatar'; +@import 'chart'; +@import 'comment'; +@import 'checklist'; +@import 'header'; +@import 'icon'; +@import 'kanban'; +@import 'main-content'; +@import 'vendors'; diff --git a/explorer/src/scss/dashkit/_dropdowns.scss b/explorer/src/scss/dashkit/_dropdowns.scss new file mode 100644 index 0000000000..52fde5027f --- /dev/null +++ b/explorer/src/scss/dashkit/_dropdowns.scss @@ -0,0 +1,124 @@ +// +// dropdowns.scss +// Extended from Bootstrap +// + +// +// Bootstrap overrides ================================== +// + +// Dropdown arrows +// +// Replace original arrows with Feather icons + +.dropdown-toggle { + + &::after { + width: auto; + height: auto; + border: none !important; + vertical-align: middle; + font-family: 'Feather'; + } + + &::after { + content: '\e92e'; + } +} + +.dropup > .dropdown-toggle { + + &::after { + content: '\e931'; + } +} + +.dropright > .dropdown-toggle { + + &::after { + content: '\e930'; + } +} + +.dropleft > .dropdown-toggle { + + &::before { + content: '\e92f'; + width: auto; + height: auto; + border: none !important; + vertical-align: middle; + font-family: 'Feather'; + } +} + + +// Dropdown toggle +// +// Right align arrows + +.dropdown-item.dropdown-toggle { + display: flex; + justify-content: space-between; +} + + +// Dropdown menu animation +// +// Animate dropdown menu appearance + +.dropdown-menu { + animation: dropdownMenu .15s; +} + +@keyframes dropdownMenu { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + + + +// +// Dashkit =================================== +// + + +// Dropdown ellipses +// +// Styles the ellipses icon and removes the dropdown arrow + +.dropdown-ellipses { + font-size: $font-size-lg; + color: $gray-400; +} + +.dropdown-ellipses::after { + display: none; +} + + +// Dropdown card +// +// Makes the dropdown menu act like a card + +.dropdown-menu-card { + min-width: $dropdown-card-min-width; + padding-top: 0; + padding-bottom: 0; + background-color: $card-bg; + border-color: $dropdown-card-border-color; + + .card-header { + min-height: $dropdown-card-header-min-height; + } + + .card-body { + max-height: $dropdown-card-body-max-height; + overflow-y: auto; + } +} diff --git a/explorer/src/scss/dashkit/_forms.scss b/explorer/src/scss/dashkit/_forms.scss new file mode 100644 index 0000000000..54874bde21 --- /dev/null +++ b/explorer/src/scss/dashkit/_forms.scss @@ -0,0 +1,272 @@ +// +// forms.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + +// Help text + +.form-text { + margin-top: 0; + margin-bottom: $label-margin-bottom; +} + + +// Form validation + +.was-validated .form-control:valid:focus, .form-control.is-valid:focus, +.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + box-shadow: none; +} + + +// +// Dashkit =================================== +// + +// Form control flush +// +// Removes borders and paddings from inputs and text areas + +.form-control-flush { + padding-left: 0; + padding-right: 0; + border-color: transparent !important; + background-color: transparent !important; + resize: none; +} + + +// Form control auto +// +// Sets the height of the input to auto + +.form-control-auto { + height: auto; + padding-top: 0; + padding-bottom: 0; +} + + +// Form control rounded +// +// Makes input border radius round + +.form-control-rounded { + border-radius: 20rem; +} + + +// Input group merge +// +// Makes input group text and form control visually the same element + +.input-group.input-group-merge { + + > .form-control { + border-radius: $input-border-radius; + + &:focus { + box-shadow: none; + + ~ [class*="input-group"] { + + > .input-group-text { + border-color: $input-focus-border-color; + } + } + } + } + + > .form-control.is-valid ~ [class*="input-group"] > .input-group-text { + border-color: $success; + } + + > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text { + border-color: $danger; + } + + > .form-control-prepended { + padding-left: $input-padding-x / 2; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-left-width: 0; + } + + > .form-control-appended { + padding-right: $input-padding-x / 2; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-right-width: 0; + } + + > .input-group-prepend { + order: -1; // prepend always goes first + + > .input-group-text { + padding-right: $input-padding-x / 2; + border-top-left-radius: $input-border-radius; + border-bottom-left-radius: $input-border-radius; + border-right-width: 0; + transition: $input-transition; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x / 2; + border-top-right-radius: $input-border-radius; + border-bottom-right-radius: $input-border-radius; + border-left-width: 0; + transition: $input-transition; + } + } +} + +.input-group-lg.input-group-merge { + + > .form-control { + border-radius: $input-border-radius-lg; + } + + > .form-control-prepended { + padding-left: $input-padding-x-lg / 2; + + } + + > .form-control-appended { + padding-right: $input-padding-x-lg / 2; + + } + + > .input-group-prepend { + + > .input-group-text { + padding-right: $input-padding-x-lg / 2; + border-top-left-radius: $input-border-radius-lg; + border-bottom-left-radius: $input-border-radius-lg; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x-lg / 2; + border-top-right-radius: $input-border-radius-lg; + border-bottom-right-radius: $input-border-radius-lg; + } + } +} + +.input-group-sm.input-group-merge { + + > .form-control { + border-radius: $input-border-radius-sm; + } + + > .form-control-prepended { + padding-left: $input-padding-x-sm / 2; + + } + + > .form-control-appended { + padding-right: $input-padding-x-sm / 2; + } + + > .input-group-prepend { + + > .input-group-text { + padding-right: $input-padding-x-sm / 2; + border-top-left-radius: $input-border-radius-sm; + border-bottom-left-radius: $input-border-radius-sm; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x-sm / 2; + border-top-right-radius: $input-border-radius-sm; + border-bottom-right-radius: $input-border-radius-sm; + } + } +} + +.input-group-rounded.input-group-merge { + + > .form-control { + border-radius: 20rem; + } + + > .input-group-prepend { + + > .input-group-text { + border-top-left-radius: 20rem; + border-bottom-left-radius: 20rem; + } + } + + > .input-group-append { + + > .input-group-text { + border-top-right-radius: 20rem; + border-bottom-right-radius: 20rem; + } + } +} + +.input-group-flush { + + > .form-control { + padding-top: 0; + padding-bottom: 0; + border-color: transparent !important; + background-color: transparent !important; + } + + > .input-group-prepend, + > .input-group-append { + + > .input-group-text { + padding: 0; + border-width: 0; + background-color: transparent; + } + } +} + + +// Font size + +.form-control { + + &.h1, &.h2, &.h3, &.h4, &.h5 { + margin-bottom: 0; + font-weight: $headings-font-weight; + letter-spacing: $headings-letter-spacing; + } + + &.h1 { + font-size: $h1-font-size; + } + + &.h2 { + font-size: $h2-font-size; + } + + &.h3 { + font-size: $h3-font-size; + } + + &.h4 { + font-size: $h4-font-size; + } + + &.h5 { + font-size: $h5-font-size; + } +} diff --git a/explorer/src/scss/dashkit/_header.scss b/explorer/src/scss/dashkit/_header.scss new file mode 100644 index 0000000000..6e2d531092 --- /dev/null +++ b/explorer/src/scss/dashkit/_header.scss @@ -0,0 +1,58 @@ +// +// header.scss +// Dashkit component +// + +// Header +// +// General styles + +.header { + margin-bottom: $header-margin-bottom; +} + +.header-img-top { + width: 100%; height: auto; +} + +.header-body { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; + border-bottom: $header-body-border-width solid $header-body-border-color; +} + +.header.bg-dark .header-body, +.header.bg-hero .header-body { + border-bottom-color: $header-body-border-color-dark; +} + +.header-footer { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; +} + +.header-pretitle { + text-transform: uppercase; + letter-spacing: .08em; + color: $text-muted; +} + +.header-title { + margin-bottom: 0; +} + +.header-subtitle { + margin-top: map-get($spacers, 2); + margin-bottom: 0; + color: $text-muted; +} + +.header-tabs { + margin-bottom: -$header-spacing-y; + border-bottom-width: 0; + + .nav-link { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; + } +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_icon.scss b/explorer/src/scss/dashkit/_icon.scss new file mode 100644 index 0000000000..a9bdeac334 --- /dev/null +++ b/explorer/src/scss/dashkit/_icon.scss @@ -0,0 +1,54 @@ +// +// icon.scss +// Dashkit component +// + +// Icon +// +// General styles + +.icon { + display: inline-block; + + // Feather icon + + > .fe { + display: block; + min-width: 1em * $line-height-base; + min-height: 1em * $line-height-base; + text-align: center; + font-size: $font-size-lg; + } + + // Active state + + &.active { + position: relative; + + // Feather icon + + > .fe { + mask-image: url(#{$path-to-img}/masks/icon-status.svg); + mask-size: 100% 100%; + } + + // Indicator + + &::after { + content: ""; + position: absolute; + top: 10%; right: 20%; + width: 20%; height: 20%; + border-radius: 50%; + background-color: $primary; + } + } +} + +// Feather icons +// +// Fixes icon / font vertical alignment issue + +.fe { + line-height: inherit; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_jumbotron.scss b/explorer/src/scss/dashkit/_jumbotron.scss new file mode 100644 index 0000000000..023a35be88 --- /dev/null +++ b/explorer/src/scss/dashkit/_jumbotron.scss @@ -0,0 +1,15 @@ +// +// jumbotron.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.jumbotron { + padding: ($jumbotron-padding / 2); + @include media-breakpoint-up(sm) { + padding: $jumbotron-padding; + } +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_kanban.scss b/explorer/src/scss/dashkit/_kanban.scss new file mode 100644 index 0000000000..160c535377 --- /dev/null +++ b/explorer/src/scss/dashkit/_kanban.scss @@ -0,0 +1,68 @@ +// +// kanban.scss +// Dashkit component +// + +// Container + +.container-fluid.kanban-container { + min-height: calc(100vh - 129px); +} + +.container.kanban-container { + min-height: calc(100vh - 129px - 69px); +} + +.kanban-container { + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +} + +.kanban-container > .row { + flex-wrap: nowrap; +} + +.kanban-container > .row > [class*="col"] { + max-width: $kanban-col-width; +} + + +// Category + +.kanban-category { + min-height: 1rem; +} + + +// Item + +.kanban-item { + outline: none; + user-select: none; +} + +.kanban-item.draggable-source--is-dragging { + opacity: .2; +} + +.kanban-item.draggable-mirror { + z-index: $zindex-fixed; +} + +.card-body .kanban-item.draggable-mirror > .card { + transform: rotateZ(-3deg); +} + + +// Card + +.kanban-item > .card[data-toggle="modal"] { + cursor: pointer; +} + + +// Add form + +.kanban-add-form .form-control[data-toggle="flatpickr"] { + width: 12ch; // there is no CSS way to set input's width to auto so hardcoding this value +} diff --git a/explorer/src/scss/dashkit/_list-group.scss b/explorer/src/scss/dashkit/_list-group.scss new file mode 100644 index 0000000000..073030725e --- /dev/null +++ b/explorer/src/scss/dashkit/_list-group.scss @@ -0,0 +1,53 @@ +// +// list-group.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Contextual variants +// +// Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color + +@each $color, $value in $theme-colors { + @include list-group-item-variant($color, $value, color-yiq($value)); +} + + +// List group large + +.list-group-lg .list-group-item { + padding-top: $list-group-item-padding-y-lg; + padding-bottom: $list-group-item-padding-y-lg; +} + + +// List group flush + +.list-group-flush > .list-group-item { + padding-left: 0; + padding-right: 0; +} + + +// +// Dashkit =================================== +// + + +// Activity + +.list-group-activity .list-group-item { + border: 0; +} + +.list-group-activity .list-group-item:not(:last-child)::before { + content: ''; + position: absolute; + top: $list-group-item-padding-y; + left: $avatar-size-sm / 2; + height: 100%; + border-left: $border-width solid $border-color; +} diff --git a/explorer/src/scss/dashkit/_main-content.scss b/explorer/src/scss/dashkit/_main-content.scss new file mode 100644 index 0000000000..a222946740 --- /dev/null +++ b/explorer/src/scss/dashkit/_main-content.scss @@ -0,0 +1,70 @@ +// +// main-content.scss +// Dashkit component +// + +// Main content +// +// General styles + +.navbar-vertical:not([style*="display: none"]) ~ .main-content, +.navbar-vertical-sm:not([style*="display: none"]) ~ .main-content { + + .container, + .container-fluid { + + @include media-breakpoint-up(md) { + padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important; + padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important; + } + } +} + + +// Main content offset +// +// Offsets the main content depending on the sidebar positioning + +.navbar-vertical.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + &-#{$breakpoint} { + @include media-breakpoint-up(#{$breakpoint}) { + + // Left + + &.fixed-left:not([style*="display: none"]) ~ .main-content { + margin-left: $navbar-vertical-width; + } + + // Right + + &.fixed-right:not([style*="display: none"]) ~ .main-content { + margin-right: $navbar-vertical-width; + } + } + } + } +} + +.navbar-vertical-sm.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + &-#{$breakpoint} { + @include media-breakpoint-up(#{$breakpoint}) { + + // Left + + &.fixed-left:not([style*="display: none"]) ~ .main-content { + margin-left: $navbar-vertical-width-sm; + } + + // Right + + &.fixed-right:not([style*="display: none"]) ~ .main-content { + margin-right: $navbar-vertical-width-sm; + } + } + } + } +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_mixins.scss b/explorer/src/scss/dashkit/_mixins.scss new file mode 100644 index 0000000000..a1aaa707ce --- /dev/null +++ b/explorer/src/scss/dashkit/_mixins.scss @@ -0,0 +1,16 @@ +// Mixins +// +// + +// Utilities +@import "mixins/breakpoints"; +@import "mixins/badge"; + +// Components +// ... + +// Skins +// ... + +// Layout +// ... \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_modal.scss b/explorer/src/scss/dashkit/_modal.scss new file mode 100644 index 0000000000..0bca6a4d78 --- /dev/null +++ b/explorer/src/scss/dashkit/_modal.scss @@ -0,0 +1,101 @@ +// +// modal.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ======================= +// + +.modal-dialog { + + // When fading in the modal, animate it to slide down + .modal.fade & { + transform: translate(0, -150px); + } + + .modal.show & { + transform: translate(0, 0); + } +} + +.modal-header .close { + margin: -1.5rem -1.5rem -1.5rem auto; +} + + +// +// Dashkit =================================== +// + +// Modal dialog vertical +// +// Creates a vertically aligned version of the modal dialog + +.modal-dialog-vertical { + height: 100%; + max-width: $modal-dialog-vertical-width; + margin: 0; + + .modal-content { + height: inherit; + border-width: 0 $modal-content-border-width 0 0; + border-radius: 0; + } + + .modal-header { + border-radius: inherit; + } + + .modal-body { + height: inherit; + overflow-y: auto; + } +} + +.modal.fade .modal-dialog-vertical { + transform: translateX(-100%); +} + +.modal.show .modal-dialog-vertical { + transform: translateX(0); +} + + +// Positioning + +.modal.fixed-right { + padding-right: 0 !important; +} + +.modal.fixed-right .modal-dialog-vertical { + margin-left: auto; +} + +.modal.fixed-right.fade .modal-dialog-vertical { + transform: translateX(100%); +} + +.modal.fixed-right.show .modal-dialog-vertical { + transform: translateX(0); +} + + +// Modal card + +.modal-card { + margin-bottom: 0; + + .card-body { + max-height: $modal-card-body-max-height; + overflow-y: auto; + } +} + + +// Modal tabs + +.modal-header-tabs { + margin-top: -$modal-header-padding-y; + margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width}); +} diff --git a/explorer/src/scss/dashkit/_nav.scss b/explorer/src/scss/dashkit/_nav.scss new file mode 100644 index 0000000000..4f9e2af54f --- /dev/null +++ b/explorer/src/scss/dashkit/_nav.scss @@ -0,0 +1,112 @@ +// +// nav.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Changing nav tabs to be bottom highlight style + +.nav-tabs { + + .nav-item { + margin-left: $nav-tabs-link-margin-x; + margin-right: $nav-tabs-link-margin-x; + } + + .nav-link { + padding: $nav-tabs-link-padding-y 0; + border-bottom: $nav-tabs-link-active-border-width solid transparent; + border-left-width: 0; + border-right-width: 0; + border-top-width: 0; + + &:not(.active) { + color: $gray-600; + + &:hover { + color: $gray-700; + } + } + + } + + .nav-item:first-child { + margin-left: 0; + } + + .nav-item:last-child { + margin-right: 0; + } + + // Removes the primary color underline from dropdowns in .nav-tabs + .nav-item.show .nav-link { + border-color: transparent; + } + +} + + +// +// Dashkit ===================================== +// + +// Nav overflow +// +// Allow links to overflow and make horizontally scrollable + +.nav-overflow { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + padding-bottom: 1px; // to prevent active links border bottom from hiding + + // Hide scrollbar + + &::-webkit-scrollbar { + display: none; + } +} + + +// Creates a small version of the .nav-tabs + +.nav-tabs-sm { + font-size: $nav-tabs-sm-font-size; + + .nav-item { + margin-left: $nav-tabs-sm-link-margin-x; + margin-right: $nav-tabs-sm-link-margin-x; + } + + .nav-link { + // Calculates the exact padding necessary to vertically fill the .card-header + padding-top: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); + padding-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); + } +} + +// Creates a small version of the .nab + +.nav-sm { + + .nav-link { + font-size: $font-size-sm; + } +} + + +// Nav + button group +// +// Change the look of .btn-white when .active + +.nav.btn-group { + + .btn-white.active { + background-color: $primary; + border-color: $primary; + color: $white; + } +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_navbar.scss b/explorer/src/scss/dashkit/_navbar.scss new file mode 100644 index 0000000000..efef6c971d --- /dev/null +++ b/explorer/src/scss/dashkit/_navbar.scss @@ -0,0 +1,722 @@ +// +// navbar.scss +// Extended from Bootstrap +// + + +// +// Bootstrap Overrides ======================= +// + +.navbar { + border-width: 0 0 $border-width 0; + border-style: solid; +} + + +// Navbar dark + +.navbar-dark { + background-color: $navbar-dark-bg; + border-color: $navbar-dark-border-color; +} + +.navbar-dark .navbar-heading { + color: $navbar-dark-heading-color; +} + +.navbar-dark .navbar-divider { + border-color: $navbar-dark-divider-color; +} + +.navbar-dark .navbar-user { + border-top-color: $navbar-dark-divider-color; +} + +.navbar-dark .navbar-user-link { + color: $navbar-dark-color; + + @include hover-focus { + color: $navbar-dark-hover-color; + } +} + +.navbar-dark .navbar-brand { + filter: $navbar-dark-brand-filter; +} + +.navbar-dark .navbar-collapse::before { + border-top-color: $navbar-dark-divider-color; +} + +.navbar-dark.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-item { + color: $navbar-dark-color; + + @include hover-focus { + color: $navbar-dark-hover-color; + } + } + + .navbar-nav .show > .nav-link, + .navbar-nav .dropdown-item.active, + .navbar-nav .dropdown-item:active { + color: $navbar-dark-active-color; + } + } + } + } +} + + +// Navbar vibrant + +.navbar-dark.navbar-vibrant { + background-image: linear-gradient(to bottom right, fade-out(#126FEB, .1), fade-out(#7203E1, .1)), url(#{$path-to-img}/covers/sidebar-cover.jpg); + background-repeat: no-repeat, no-repeat; + background-position: center center, center center; + background-size: cover, cover; + background-origin: border-box; + border-color: $navbar-vibrant-border-color; + + @include media-breakpoint-down(sm) { + background-attachment: fixed, fixed; + } +} + +.navbar-dark.navbar-vibrant .nav-link { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } +} + +.navbar-dark.navbar-vibrant .nav-item.active .nav-link, +.navbar-dark.navbar-vibrant .nav-item .nav-link.active { + color: $navbar-vibrant-active-color; +} + +.navbar-dark.navbar-vibrant .navbar-heading { + color: $navbar-vibrant-heading-color; +} + +.navbar-dark.navbar-vibrant .navbar-divider { + border-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-user { + border-top-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-user-link { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } +} + +.navbar-dark.navbar-vibrant .navbar-brand { + filter: $navbar-vibrant-brand-filter; +} + +.navbar-dark.navbar-vibrant .navbar-collapse::before { + border-top-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-nav .nav-link.active::before { + border-color: $white; +} + +.navbar-dark.navbar-vibrant.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-item { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } + } + + .navbar-nav .show > .nav-link, + .navbar-nav .dropdown-item.active, + .navbar-nav .dropdown-item:active { + color: $navbar-vibrant-active-color; + } + + } + } + } +} + +.navbar-dark.navbar-vibrant .navbar-toggler-icon { + background-image: $navbar-vibrant-toggler-icon-bg; +} + + +// Navbar light + +.navbar-light { + background-color: $navbar-light-bg; + border-color: $navbar-light-border-color; +} + +.navbar-light .navbar-heading { + color: $navbar-light-heading-color; +} + +.navbar-light .navbar-divider { + border-color: $navbar-light-divider-color; +} + +.navbar-light .navbar-user { + border-top-color: $navbar-light-divider-color; +} + +.navbar-light .navbar-user-link { + color: $navbar-light-color; + + @include hover-focus { + color: $navbar-light-hover-color; + } +} + +.navbar-light .navbar-brand { + filter: $navbar-light-brand-filter; +} + +.navbar-light .navbar-collapse::before { + border-top-color: $navbar-light-divider-color; +} + + +// Navbar brand + +.navbar-brand { + margin-right: 0; +} + +.navbar-brand-img, +.navbar-brand > img { + max-width: 100%; + max-height: 1.5rem; +} + + +// Navbar collapse + +.navbar-collapse { + margin-left: -$navbar-padding-x; + margin-right: -$navbar-padding-x; + padding-left: $navbar-padding-x; + padding-right: $navbar-padding-x; + + // Spacer to replace margin / padding as those + // cause .navbar-collapse to "jump" when collapsing + &:before { + content: ''; + display: block; + border-top-width: $border-width; + border-top-style: solid; + margin: $navbar-padding-y (-$navbar-padding-x); + } +} + + +// Navbar navigaton + +.navbar-nav { + margin-left: -$navbar-padding-x; + margin-right: -$navbar-padding-x; +} + +.navbar-nav .nav-link { + padding-left: $navbar-padding-x; + padding-right: $navbar-padding-x; + + &.active { + position: relative; + + &:before { + content: ''; + position: absolute; + left: 0; + top: $nav-link-padding-y; + bottom: $nav-link-padding-y; + border-left: 2px solid $primary; + } + } +} + + +// Navbar icons + +.navbar-nav .nav-link > .fe { + min-width: $navbar-icon-min-width; + padding-bottom: .125em; + font-size: $font-size-lg; + line-height: ($font-size-base * $line-height-base); +} + + +// Navbar dropdowns + +.navbar-nav .dropdown-menu { + border: none; +} + +.navbar-nav .dropdown-menu .dropdown-menu { + margin-left: $dropdown-item-padding-x / 2; +} + +.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-menu { + background-color: transparent; + } + } + } + } +} + + +// Expanded +// +// Expanded navbar specific styles + +.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + padding-left: 0; + padding-right: 0; + + > [class*="container"] { + padding-left: 0; + padding-right: 0; + } + + .navbar-collapse { + flex-grow: inherit; + + &:before { + display: none; + } + } + + .navbar-nav { + margin-left: 0; + margin-right: 0; + } + + .navbar-nav .nav-link { + + // Increase $nav-link-padding-y value to align the underline + // with the bottom of the navbar + padding: .625rem $navbar-nav-link-padding-x; + + &.active { + position: relative; + + &:before { + top: auto; + bottom: calc(-#{$navbar-padding-y} - #{$border-width}); + right: $navbar-nav-link-padding-x; + left: $navbar-nav-link-padding-x; + border-left: 0; + border-bottom: 1px solid $primary; + } + } + } + + // Toggle dropdown on hover + @if ($navbar-dropdown-toggle-on-hover) { + .dropup, .dropright, .dropdown, .dropleft { + + @include hover { + + > .dropdown-menu { + display: block; + } + } + } + } + + .navbar-nav .dropdown-menu { + border: $dropdown-border-width solid $dropdown-border-color; + } + + .navbar-nav .dropdown-menu .dropdown-menu { + margin-left: 0; + } + } + } + } +} + + +// +// Dashkit =================================== +// + +// Navbar fixed +// +// Adds special zindex to custom fixed-left and fixed-right classes + +.navbar[class*="fixed-"] { + z-index: $zindex-fixed; +} + + +// Navbar overflow +// +// Allows the navbar navigation overflow its parent container +// horizontally + +.navbar-overflow { + display: flex; + flex-grow: 1; + flex-basis: 0; + margin-bottom: -$navbar-padding-y; + overflow-x: auto; + + // Hide scrollbar + &::-webkit-scrollbar { + display: none; + } +} + +.navbar-overflow .navbar-nav { + flex-direction: row; + flex-wrap: nowrap; + margin-left: -$navbar-nav-link-padding-x; + margin-right: -$navbar-nav-link-padding-x; +} + +.navbar-overflow .navbar-nav .nav-link { + padding-bottom: ($nav-link-padding-y + $navbar-padding-y); + + &.active { + + &:before { + bottom: 0; + } + } +} + + +// Navbar breadcrumb +// +// Applies special paddings to the navbar breadcrumb + +.navbar-breadcrumb { + padding: $navbar-breadcrumb-padding-y $navbar-breadcrumb-padding-x; +} + + +// Navbar user +// +// Navbar user notification area + +.navbar-user { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.navbar-user .dropdown-toggle { + + // Remove the default dropdown arrow + &:after { + display: none; + } +} + + +// Navbar link icon + +.navbar-nav .nav-link > .fe { + display: inline-block; + min-width: $navbar-icon-min-width; +} + + +// Vertical +// +// Creates a vertically aligned version of the navbar + +.navbar-vertical { + + .navbar-nav .nav-link { + display: flex; + align-items: center; + } + + .navbar-nav .nav-link[data-toggle="collapse"] { + + &:after { + display: block; + content: '\e92e'; + font-family: 'Feather'; + margin-left: auto; + transition: transform .2s; + } + + // Expanded + &[aria-expanded="true"] { + + &:after { + transform: rotate(-180deg); + } + } + } + + .navbar-nav .nav .nav-link { + padding-left: $navbar-padding-x + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav-link { + padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav .nav-link { + padding-left: $navbar-padding-x * 2 + $navbar-icon-min-width; + } + + .navbar-heading { + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; + font-size: $font-size-xs; + text-transform: uppercase; + letter-spacing: .04em; + } + + + // Expanded + // + // Expanded navbar specific styles + + &.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + display: block; + position: fixed; + top: 0; + bottom: 0; + width: 100%; + max-width: $navbar-vertical-width; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + overflow-y: auto; + + > [class*="container"] { + flex-direction: column; + align-items: stretch; + min-height: 100%; + padding-left: 0; + padding-right: 0; + + // Target IE 10 & 11 + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + min-height: none; + height: 100%; + } + } + + &.fixed-left { + left: 0; + border-width: 0 1px 0 0; + } + + &.fixed-right { + right: 0; + border-width: 0 0 0 1px; + } + + .navbar-collapse { + flex: 1; + display: flex; + flex-direction: column; + align-items: stretch; + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + + > * { + min-width: 100%; + } + } + + .navbar-nav { + flex-direction: column; + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + } + + .navbar-nav .nav-link { + padding: $nav-link-padding-y $navbar-vertical-padding-x; + + &.active { + + &:before { + top: $nav-link-padding-y; + bottom: $nav-link-padding-y; + left: 0; + right: auto; + border-left: 2px solid $primary; + border-bottom: 0; + } + } + } + + .navbar-nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x * 2 + $navbar-icon-min-width; + } + + .navbar-brand { + display: block; + text-align: center; + padding-top: (2rem - $navbar-padding-y); + padding-bottom: (2rem - $navbar-padding-y); + } + + .navbar-brand-img { + max-height: 3rem; + } + + .navbar-user { + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + padding-top: $spacer; + padding-bottom: $spacer - $navbar-padding-y; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + border-top-width: 1px; + border-top-style: solid; + + .dropup .dropdown-menu { + left: 50%; + transform: translateX(-50%); + } + } + } + } + } + } +} + + +// Vertical small +// +// Creates a small vertion of the vertical navbar + +.navbar-vertical-sm { + + // Expanded + // + // Expanded navbar specific styles + + &.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + max-width: $navbar-vertical-width-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + overflow: visible; + + .navbar-brand { + padding-top: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2 - $navbar-padding-y; + padding-bottom: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2; + } + + .navbar-brand-img { + width: auto; + max-height: 1.5rem; + } + + .navbar-collapse { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + } + + .navbar-nav { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + } + + .navbar-nav > .nav-item > .nav-link { + justify-content: center; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + text-align: center; + } + + .navbar-nav > .nav-item > .dropdown-toggle { + + &::after { + display: none; + } + } + + .navbar-user { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + } + + .navbar-user .dropright .dropdown-menu { + top: auto; + bottom: 0; + } + } + } + } + } +} diff --git a/explorer/src/scss/dashkit/_popover.scss b/explorer/src/scss/dashkit/_popover.scss new file mode 100644 index 0000000000..dfbbc2b0ff --- /dev/null +++ b/explorer/src/scss/dashkit/_popover.scss @@ -0,0 +1,101 @@ +// +// popover.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.popover { + padding: $popover-padding-y $popover-padding-x; + + &:hover { + visibility: visible !important; + } +} + +.popover-header { + margin-bottom: $popover-header-margin-bottom; + border-bottom: 0; +} + +.popover-body-label { + margin-left: .25rem; +} + +.popover-body-value { + margin-left: .25rem; +} + +.popover-body-indicator { + display: inline-block; + width: .5rem; + height: .5rem; + border-radius: 50%; +} + + +// Large + +.popover-lg { + max-width: $popover-lg-max-width; +} + + +// Dark + +.popover-dark { + background-color: $popover-dark-bg; + border-color: $popover-dark-border-color; +} + +.popover-dark .popover-header { + font-weight: $font-weight-normal; + background-color: $popover-dark-header-bg; + color: $popover-dark-header-color; +} + +.popover-dark.bs-popover-top .arrow { + + &::before { + border-top-color: $popover-dark-border-color; + } + + &::after { + border-top-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-right .arrow { + + &::before { + border-right-color: $popover-dark-border-color; + } + + &::after { + border-right-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-bottom .arrow { + + &::before { + border-bottom-color: $popover-dark-border-color; + } + + &::after { + border-bottom-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-left .arrow { + + &::before { + border-left-color: $popover-dark-border-color; + } + + &::after { + border-left-color: $popover-dark-bg; + } +} diff --git a/explorer/src/scss/dashkit/_progress.scss b/explorer/src/scss/dashkit/_progress.scss new file mode 100644 index 0000000000..00a9caf1a7 --- /dev/null +++ b/explorer/src/scss/dashkit/_progress.scss @@ -0,0 +1,27 @@ +// +// progress.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Rounds the progress bar, even for "multiple bar" progress bars +.progress-bar:first-child { + border-top-left-radius: $progress-border-radius; + border-bottom-left-radius: $progress-border-radius; +} +.progress-bar:last-child { + border-top-right-radius: $progress-border-radius; + border-bottom-right-radius: $progress-border-radius; +} + + +// +// Dashkit =================================== +// + +.progress-sm { + height: $progress-height-sm; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_reboot.scss b/explorer/src/scss/dashkit/_reboot.scss new file mode 100644 index 0000000000..a5f8a0e351 --- /dev/null +++ b/explorer/src/scss/dashkit/_reboot.scss @@ -0,0 +1,12 @@ +// +// reboot.scss +// Extended from Bootstrap +// + +// +// Remove the cancel buttons in Chrome and Safari on macOS. +// + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_root.scss b/explorer/src/scss/dashkit/_root.scss new file mode 100644 index 0000000000..0d1eca2930 --- /dev/null +++ b/explorer/src/scss/dashkit/_root.scss @@ -0,0 +1,12 @@ +// +// root.scss +// Extended from Bootstrap +// + +html { + height: 100%; +} + +body { + min-height: 100%; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_tables.scss b/explorer/src/scss/dashkit/_tables.scss new file mode 100644 index 0000000000..c7c150fa73 --- /dev/null +++ b/explorer/src/scss/dashkit/_tables.scss @@ -0,0 +1,76 @@ +// +// tables.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.table { + + thead th { + background-color: $table-head-bg; + text-transform: uppercase; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + letter-spacing: .08em; + color: $table-head-color; + border-bottom-width: $table-border-width; + } + + thead th, tbody th, tbody td { + vertical-align: middle; + } +} + +.table-sm { + font-size: $font-size-sm; + + thead th { + font-size: $font-size-xs; + } +} + + +// +// Dashkit ===================================== +// + +// No wrap +// +// Prevents table content from wrapping to the next line + +.table-nowrap { + + th, td { + white-space: nowrap; + } +} + + +// Sort +// +// Adds sorting icons + +.table [data-sort] { + white-space: nowrap; + + &::after { + content: str-replace(url("data:image/svg+xml;utf8,"), "#", "%23"); + margin-left: .25rem; + } +} + + +// Table checkbox + +.table-checkbox { + min-height: 0; +} + +.table-checkbox .custom-control-label::before, +.table-checkbox .custom-control-label::after { + top: 50%; + transform: translateY(-50%); +} diff --git a/explorer/src/scss/dashkit/_toasts.scss b/explorer/src/scss/dashkit/_toasts.scss new file mode 100644 index 0000000000..f424a911e8 --- /dev/null +++ b/explorer/src/scss/dashkit/_toasts.scss @@ -0,0 +1,4 @@ +// +// toasts.scss +// Extended from Bootstrap +// diff --git a/explorer/src/scss/dashkit/_type.scss b/explorer/src/scss/dashkit/_type.scss new file mode 100644 index 0000000000..3ef9248f71 --- /dev/null +++ b/explorer/src/scss/dashkit/_type.scss @@ -0,0 +1,115 @@ +// +// type.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +h1, .h1 { + margin-bottom: $headings-margin-bottom; + font-size: 1.5rem; + + @include media-breakpoint-up(md) { + font-size: $h1-font-size; + } +} + +h2, .h2 { + margin-bottom: $headings-margin-bottom; +} + +h3, .h3 { + margin-bottom: ($headings-margin-bottom * .75); +} + +h4, .h4 { + margin-bottom: ($headings-margin-bottom * .5); +} + +h5, .h5 { + margin-bottom: ($headings-margin-bottom * .5); +} + +h6, .h6 { + margin-bottom: ($headings-margin-bottom * .5); +} + + +// Links + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { + + > a { + color: inherit; + } +} + +// Type display classes + +.display-1, +.display-2, +.display-3, +.display-4 { + letter-spacing: $display-letter-spacing; +} + +// Headings + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { + letter-spacing: $headings-letter-spacing; +} + +h6.text-uppercase { + letter-spacing: .08em; +} + +// Bold, strong + +b, strong { + font-weight: $font-weight-bold; +} + + +// Links, buttons +// +// Removes focus outline + +a, button { + + &:focus { + outline: none !important; + } +} + + +// +// Dashkit ===================================== +// + +// Include Cerebri Sans + +@font-face { + font-family: 'Cerebri Sans'; + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot'); + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Cerebri Sans'; + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot'); + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Cerebri Sans'; + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot'); + src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} diff --git a/explorer/src/scss/dashkit/_utilities.scss b/explorer/src/scss/dashkit/_utilities.scss new file mode 100644 index 0000000000..9806da79d5 --- /dev/null +++ b/explorer/src/scss/dashkit/_utilities.scss @@ -0,0 +1,5 @@ +@import 'utilities/background'; +@import 'utilities/borders'; +@import 'utilities/lift'; +@import 'utilities/sizing'; +@import 'utilities/type'; \ No newline at end of file diff --git a/explorer/src/scss/dashkit/_variables.scss b/explorer/src/scss/dashkit/_variables.scss new file mode 100644 index 0000000000..6bcabdfca2 --- /dev/null +++ b/explorer/src/scss/dashkit/_variables.scss @@ -0,0 +1,757 @@ +// +// variables.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + + +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + + +// +// Color system +// + +// stylelint-disable +$white: #FFFFFF !default; +$gray-100: #F9FBFD !default; +$gray-200: #EDF2F9 !default; +$gray-300: #E3EBF6 !default; +$gray-400: #D2DDEC !default; +$gray-500: #B1C2D9 !default; +$gray-600: #95AAC9 !default; +$gray-700: #6E84A3 !default; +$gray-800: #3B506C !default; +$gray-900: #283E59 !default; +$black: #12263F !default; + +$gray-600-dark: #244166 !default; +$gray-700-dark: #1E3A5C !default; +$gray-800-dark: #152E4D !default; +$gray-900-dark: #132A46 !default; +$black-dark: #12263F !default; + +$blue: #2C7BE5 !default; +$indigo: #727cf5 !default; // NOT USED +$purple: #6b5eae !default; +$pink: #ff679b !default; // NOT USED +$red: #E63757 !default; +$orange: #fd7e14 !default; // NOT USED +$yellow: #F6C343 !default; +$green: #00D97E !default; +$teal: #02a8b5 !default; // NOT USED +$cyan: #39afd1 !default; // NOT USED + +$primary: $blue !default; +$secondary: $gray-700 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-200 !default; +$dark: $black !default; + +$theme-colors: () !default; +$theme-colors: map-merge(("primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "white": $white), $theme-colors); +// stylelint-enable + +$lighter: $gray-100 !default; + +// Customize the light and dark text colors for use in our YIQ color contrast function. +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; + + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-validation-icons: false !default; + + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1.5rem !default; +$spacers: () !default; +$spacers: map-merge((0: 0, + 1: ($spacer * .125), // 3px + 2: ($spacer * .25), // 6px + 3: ($spacer * .5), // 12px + 4: $spacer, // 24px + 5: ($spacer * 1.5), // 36px + 6: ($spacer * 3), // 72px + 7: ($spacer * 4.5), // 108px + 8: ($spacer * 9) // 216px + ), $spacers); + +// This variable affects the `.h-*` and `.w-*` classes. +$sizes: () !default; +$sizes: map-merge((15: 15%, + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%), $sizes); + + +// Body +// +// Settings for the `` element. + +$body-bg: $gray-100 !default; +$body-color: $black !default; + + +// Links +// +// Style anchor elements. + +$link-color: theme-color("primary") !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: none !default; + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-gutter-width: 24px !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.75 !default; + +$border-width: 1px !default; +$border-color: $gray-300 !default; + +$border-radius: 0.375rem !default; +$border-radius-lg: 0.5rem !default; +$border-radius-sm: 0.25rem !default; +$border-radius-xs: .1875rem !default; + +$component-active-bg: $primary !default; + +$caret-width: .25em !default; + + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: 'Cerebri Sans', sans-serif !default; +$font-family-base: $font-family-sans-serif !default; +// stylelint-enable value-keyword-case + +$font-size-base: 0.9375rem !default; // 15px +$font-size-lg: ($font-size-base * 1.133333333334) !default; // 17px +$font-size-sm: ($font-size-base * .866666667) !default; // 13px + +$font-weight-light: 400 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 600 !default; + +$line-height-base: 1.5 !default; + +$headings-margin-bottom: $spacer * .75 !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; + +$h1-font-size: 1.625rem !default; +$h2-font-size: 1.25rem !default; +$h3-font-size: 1.0625rem !default; +$h4-font-size: 0.9375rem !default; +$h5-font-size: 0.8125rem !default; +$h6-font-size: 0.625rem !default; + +$display1-size: 4rem !default; +$display2-size: 3.25rem !default; +$display3-size: 2.625rem !default; +$display4-size: 2rem !default; + +$display1-weight: 600 !default; +$display2-weight: 600 !default; +$display3-weight: 600 !default; +$display4-weight: 600 !default; +$display-line-height: $headings-line-height !default; + +$lead-font-size: ($font-size-base * 1.25) !default; + +$small-font-size: 0.8125rem !default; + +$text-muted: $gray-600 !default; + +$blockquote-font-size: ($font-size-base * 1.25) !default; + +$hr-border-color: $border-color !default; +$hr-margin-y: 1rem !default; + +$list-inline-padding: 6px !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-cell-padding: 1rem !default; +$table-cell-padding-sm: 1rem !default; + +$table-accent-bg: $gray-100 !default; +$table-hover-bg: $gray-100 !default; +$table-active-bg: $gray-100 !default; + +$table-border-color: $gray-200 !default; + +$table-head-bg: $gray-100 !default; +$table-head-color: $text-muted !default; + +$table-striped-order: even !default; + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-padding-y-lg: .75rem !default; +$input-btn-padding-x-lg: 1.25rem !default; +$input-btn-font-size-lg: $font-size-base !default; +$input-btn-line-height-lg: $line-height-base !default; + +$input-btn-focus-width: .15rem !default; +$input-btn-focus-color: rgba($primary, .25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: .125rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; + +//Custom button color +$btn-text-color: $white !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; + +$btn-font-weight: $font-weight-normal !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$btn-link-disabled-color: $gray-500 !default; + + +// Forms + +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; + +$input-bg: $white !default; +$input-disabled-bg: $input-bg !default; + +$input-color: $body-color !default; +$input-border-color: $gray-400 !default; + +$input-focus-border-color: $primary !default; +$input-focus-box-shadow: transparent !default; + +$input-placeholder-color: $gray-500 !default; + +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; + +$form-group-margin-bottom: 1.375rem !default; + +$input-group-addon-bg: $input-bg !default; +$input-group-addon-color: $text-muted !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; + +$custom-control-indicator-bg: $border-color !default; +$custom-control-indicator-border-width: 0 !default; + +$custom-switch-width: 3rem !default; +$custom-switch-indicator-size: 1.125rem !default; +$custom-switch-indicator-border-radius: $custom-switch-indicator-size / 2 !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-spacer: 0 !default; +$dropdown-border-color: rgba($black, .1) !default; + +$dropdown-link-color: $gray-700 !default; +$dropdown-link-hover-color: $black !default; +$dropdown-link-hover-bg: transparent !default; + +$dropdown-link-active-color: $dropdown-link-hover-color !default; +$dropdown-link-active-bg: $dropdown-link-hover-bg !default; + +$dropdown-item-padding-y: .375rem !default; + +$dropdown-header-color: inherit !default; + + +// Navs + +$nav-tabs-border-color: $border-color !default; +$nav-tabs-border-radius: 0 !default; +$nav-tabs-link-hover-border-color: transparent transparent transparent !default; +$nav-tabs-link-active-color: $body-color !default; +$nav-tabs-link-active-bg: transparent !default; +$nav-tabs-link-active-border-color: transparent transparent theme-color("primary") !default; + +$nav-pills-link-active-bg: $component-active-bg !default; + + +// Navbar + +$navbar-padding-x: 1rem !default; + +$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-padding-y: 0 !default; + +$navbar-toggler-padding-x: 0 !default; + +$navbar-dark-color: $gray-700 !default; +$navbar-dark-hover-color: $white !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-light-color: $gray-700 !default; +$navbar-light-hover-color: $black !default; +$navbar-light-active-color: $black !default; +$navbar-light-toggler-border-color: transparent !default; + + +// Pagination + +$pagination-color: $black !default; + +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$pagination-hover-color: $dark !default; +$pagination-hover-bg: $gray-100 !default; +$pagination-hover-border-color: $gray-300 !default !default; + +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; + + +// Jumbotron + +$jumbotron-bg: $gray-200 !default; + + +// Cards + +$card-spacer-y: 1rem !default; +$card-spacer-x: $spacer !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius-lg !default; +$card-border-color: $gray-200 !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-cap-bg: transparent !default; + + +// Tooltips + +$tooltip-color: $black !default; +$tooltip-bg: $gray-300 !default; +$tooltip-opacity: 1 !default; + +$tooltip-arrow-color: $tooltip-bg !default; + + +// Popovers + +$popover-bg: $white !default; +$popover-max-width: 10rem !default; +$popover-padding-x: .95rem !default; +$popover-padding-y: .8rem !default; +$popover-box-shadow: 0 0 1rem transparentize($black, .97) !default; + +$popover-header-bg: $popover-bg !default; +$popover-header-padding-y: 0 !default; +$popover-header-padding-x: 0 !default; +$popover-header-margin-bottom: .25rem !default; + +$popover-body-color: $text-muted !default; + + +// Toasts + +$toast-max-width: 300px !default; +$toast-padding-x: 1rem !default; +$toast-padding-y: 0.75rem !default; +$toast-font-size: $font-size-base !default; +$toast-background-color: $white !default; +$toast-border-color: $border-color !default; +$toast-border-radius: $border-radius !default; +$toast-box-shadow: 0 0.75rem 1.5rem fade-out($black, .9) !default; + +$toast-header-color: $body-color !default; +$toast-header-background-color: $toast-background-color !default; +$toast-header-border-color: $border-color !default; + + +// Badges + +$badge-font-weight: $font-weight-normal !default; +$badge-padding-y: .33em !default; + + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: 1.5rem !default; + +$modal-content-border-color: transparent !default; + +$modal-header-padding-y: 1rem !default; +$modal-header-padding: $modal-header-padding-y $modal-inner-padding !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $border-color !default; + +$modal-md: 600px !default; + + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-link-font-weight: $font-weight-normal !default; +$alert-margin-bottom: $spacer !default; + +$alert-bg-level: 0 !default; +$alert-border-level: 0 !default; +$alert-color-level: 6 !default; + + +// Progress bars + +$progress-border-radius: 200px !default; // Always rounds even if height is manually set higher + + +// List groups + +$list-group-bg: transparent !default; +$list-group-border-color: $border-color !default; + +$list-group-item-padding-y: 1rem !default; + + +// Figures + +$figure-caption-font-size: $small-font-size !default; + + +// Breadcrumbs + +$breadcrumb-padding-x: 0 !default; + +$breadcrumb-margin-bottom: 0 !default; + +$breadcrumb-bg: transparent !default; +$breadcrumb-divider-color: $gray-400 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: "" !default; + + +// Close + +$close-color: $text-muted; +$close-text-shadow: none !default; + + +// Code + +$code-color: $blue !default; + + +// +// Dashkit ===================================== +// + +// Paths + +$path-to-fonts: '../fonts' !default; +$path-to-img: '../img' !default; + + +// Type + +$font-size-xs: ($font-size-base * .6666666667) !default; // 10px + +$headings-letter-spacing: -.02em !default; + +$display-letter-spacing: -.02em !default; + + +// Alerts + +$alert-link-text-decoration: underline !default; + + +// Auth + +$auth-bg: $white !default; + + +// Avatar + +$avatar-size-base: 3rem !default; +$avatar-size-xs: 1.625rem !default; +$avatar-size-sm: 2.5rem !default; +$avatar-size-lg: 4rem !default; +$avatar-size-xl: 5.125rem !default; +$avatar-size-xxl: 8rem !default; + +$avatar-title-bg: $gray-500 !default; +$avatar-title-color: $white !default; + + +// Popover + +$popover-lg-max-width: 300px !default; + +$popover-dark-bg: $black !default; +$popover-dark-border-color: $black !default; + +$popover-dark-header-bg: $black !default; +$popover-dark-header-color: $white !default; + + +// Badges + +$badge-soft-bg-level: -10 !default; + +$badge-padding-x: .5em !default; + + +// Breadcrumb + +$breadcrumb-padding-y-sm: .5rem !default; +$breadcrumb-padding-x-sm: .5rem !default; +$breadcrumb-item-padding-sm: .25rem !default; + +$breadcrumb-margin-bottom-sm: .25rem !default; +$breadcrumb-font-size-sm: $font-size-sm !default; + + +// Cards + +$card-margin-bottom: $spacer !default; +$card-spacer-x-sm: 1rem !default; + +$card-outline-color: $card-border-color !default; +$card-box-shadow: 0 .75rem 1.5rem transparentize($black, .97) !default; + +$card-header-height: 60px !default; + + +// Charts + +$chart-height: 300px !default; +$chart-height-sm: 225px !default; + +$chart-sparkline-width: 75px !default; +$chart-sparkline-height: 35px !default; + +$chart-legend-margin-top: 2.5rem !default; +$chart-legend-font-size: $font-size-sm !default; +$chart-legend-color: $text-muted !default; +$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default; + + +// Comment + +$comment-margin-bottom: 1rem !default; + +$comment-body-padding-y: 1rem !default; +$comment-body-padding-x: 1.25rem !default; +$comment-body-bg: $body-bg !default; +$comment-body-border-radius: $border-radius-lg !default; +$comment-body-font-size: $font-size-sm !default; + +$comment-time-margin-bottom: .5625rem !default; +$comment-time-font-size: $font-size-xs !default; +$comment-time-color: $text-muted !default; + + +// Dropdowns + +$dropdown-card-min-width: 350px !default; +$dropdown-card-border-color: $dropdown-border-color !default; +$dropdown-card-header-min-height: 3.125rem !default; +$dropdown-card-body-max-height: 350px !default; + + +// Header + +$header-margin-bottom: 2rem !default; + +$header-spacing-y: 1.5rem !default; + +$header-body-border-width: 1px !default; +$header-body-border-color: $border-color !default; + +$header-body-border-color-dark: fade-out($header-body-border-color, .9) !default; + + +// List groups + +$list-group-item-padding-y-lg: $spacer !default; + + +// Main content + +$main-content-padding-y: 40px !default; +$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width + + +// Modal + +$modal-dialog-vertical-width: 350px !default; + +$modal-card-body-max-height: 350px !default; + + +// Navs + +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; + +$nav-tabs-link-active-border-width: 1px !default; +$nav-tabs-link-margin-x: .75rem !default; // Margin used for X so active underline matches width of label +$nav-tabs-link-padding-y: $card-spacer-y !default; // This keeps the height the same as the card header + +$nav-tabs-sm-font-size: .8125rem !default; +$nav-tabs-sm-link-margin-x: .5rem !default; + + +// Navbar + +$navbar-vertical-width: 250px !default; +$navbar-vertical-width-sm: 66px !default; + +$navbar-vertical-padding-x: 1.5rem !default; +$navbar-vertical-padding-x-sm: 0.75rem !default; + +$navbar-icon-min-width: 1.75rem !default; + +$navbar-breadcrumb-padding-y: $nav-link-padding-y !default; +$navbar-breadcrumb-padding-x: 0 !default; + +$navbar-vibrant-border-color: transparent !default; +$navbar-vibrant-heading-color: fade-out($white, .6) !default; +$navbar-vibrant-divider-color: fade-out($white, .8) !default; +$navbar-vibrant-color: fade-out($white, .3) !default; +$navbar-vibrant-hover-color: $white !default; +$navbar-vibrant-active-color: $white !default; +$navbar-vibrant-brand-filter: brightness(0) invert(1) !default; +$navbar-vibrant-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-vibrant-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; + +$navbar-dark-bg: $gray-800-dark !default; +$navbar-dark-border-color: $gray-800-dark !default; +$navbar-dark-heading-color: $navbar-dark-color !default; +$navbar-dark-divider-color: $gray-700-dark !default; +$navbar-dark-brand-filter: none !default; + +$navbar-light-bg: $white !default; +$navbar-light-border-color: $border-color !default; +$navbar-light-heading-color: $text-muted !default; +$navbar-light-divider-color: $border-color !default; +$navbar-light-brand-filter: none; + +$navbar-dropdown-toggle-on-hover: true !default; + + +// Progress bars + +$progress-height-sm: 0.25rem !default; + + +// Forms + +$custom-switch-height: 1.5rem !default; +$custom-switch-spacing: ($custom-switch-height - $custom-switch-indicator-size) / 2 !default; + +$custom-switch-indicator-bg: $white !default; +$custom-switch-indicator-active-bg: $white !default; + + +// Close + +$close-font-size-sm: $font-size-base !default; + + +// Kanban + +$kanban-col-width: 375px !default; + + +// Components + +$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default; +$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default; + + +// Checklist + +$checklist-control-spacer: .75rem !default; +$checklist-control-checked-color: $gray-700 !default; + + +// Backgrounds + +$bg-soft-level: -11 !default; diff --git a/explorer/src/scss/dashkit/_vendors.scss b/explorer/src/scss/dashkit/_vendors.scss new file mode 100644 index 0000000000..911dd9d970 --- /dev/null +++ b/explorer/src/scss/dashkit/_vendors.scss @@ -0,0 +1,5 @@ +@import 'vendors/dropzone'; +@import 'vendors/flatpickr'; +@import 'vendors/quill'; +@import 'vendors/list'; +@import 'vendors/select2'; diff --git a/explorer/src/scss/dashkit/dark/_overrides-dark.scss b/explorer/src/scss/dashkit/dark/_overrides-dark.scss new file mode 100644 index 0000000000..c4d6d53fdc --- /dev/null +++ b/explorer/src/scss/dashkit/dark/_overrides-dark.scss @@ -0,0 +1,60 @@ +// +// overrides.scss +// Dark mode overrides +// + +// +// Table of contents +// +// 1. Buttons +// 2. Forms +// 3. Input groups +// 4. Quill +// 5. Select2 +// + + +// Buttons + +.btn-white, .btn-light { + @include button-variant($gray-800-dark, $gray-600-dark); + + &:not(:disabled):not(.disabled):hover, + &:not(:disabled):not(.disabled):focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + .show > &.dropdown-toggle { + background-color: $black-dark; + border-color: $gray-700-dark; + color: $white; + } +} + + +// Forms + +.form-control { + border-color: $input-bg; +} + + +// Input groups + +.input-group .input-group-text { + border-color: $input-bg; +} + + +// Quill + +.ql-toolbar { + border-color: $input-bg; +} + +.ql-editor { + border-left-color: $input-bg; + border-right-color: $input-bg; + border-bottom-color: $input-bg; +} diff --git a/explorer/src/scss/dashkit/dark/_variables-dark.scss b/explorer/src/scss/dashkit/dark/_variables-dark.scss new file mode 100644 index 0000000000..01c42a732f --- /dev/null +++ b/explorer/src/scss/dashkit/dark/_variables-dark.scss @@ -0,0 +1,219 @@ +// +// variables-dark.scss +// Dashkit dark version +// + +// +// Bootstrap Overrides =================================== +// + + +// +// Color system +// + +$white: #FFFFFF !default; +$gray-300: #E3EBF6 !default; +$gray-600: #95AAC9 !default; +$gray-700: #6E84A3 !default; +$gray-900: #283E59 !default; +$black: #12263F !default; + +$gray-600-dark: #244166 !default; +$gray-700-dark: #1E3A5C !default; +$gray-800-dark: #152E4D !default; +$gray-900-dark: #132A46 !default; +$black-dark: #12263F !default; + +$light: $gray-800-dark !default; +$lighter: $gray-900-dark !default; + + +// Body +// +// Settings for the `` element. + +$body-bg: $black-dark !default; +$body-color: $white !default; + + +// Components +// +// Define common padding and border radius sizes and more. + +$border-color: $gray-700-dark !default; + + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +$text-muted: $gray-700 !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-border-color: $border-color !default; + +$table-head-bg: $black-dark !default; + +$table-accent-bg: $gray-900-dark !default; +$table-hover-bg: $gray-900-dark !default; +$table-active-bg: $gray-900-dark !default; + +$table-bg-level: 0 !default; +$table-border-level: 0 !default; + + +// Forms + +$input-bg: $gray-700-dark !default; + +$input-color: $white !default; +$input-border-color: $black-dark !default; + +$input-placeholder-color: $gray-600 !default; + +$custom-control-indicator-bg: $gray-600-dark !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-bg: $gray-800-dark !default; +$dropdown-border-color: $black !default; +$dropdown-divider-bg: $black !default; + +$dropdown-link-color: $text-muted !default; +$dropdown-link-hover-color: $white !default; + + +// Navbar + +$navbar-dark-color: $gray-700 !default; +$navbar-dark-hover-color: $black !default; +$navbar-dark-active-color: $black !default; +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-dark-bg: $white !default; +$navbar-dark-border-color: $white !default; +$navbar-dark-heading-color: $text-muted !default; +$navbar-dark-divider-color: $gray-300 !default; +$navbar-dark-brand-filter: none; + +$navbar-dark-input-bg: $input-bg !default; +$navbar-dark-input-border-color: $input-border-color !default; + +$navbar-light-hover-color: $white !default; +$navbar-light-active-color: $white !default; +$navbar-light-input-bg: $gray-700-dark !default; +$navbar-light-input-border-color: $black-dark !default; + + +// Pagination + +$pagination-color: $white !default; +$pagination-bg: $gray-800-dark !default; +$pagination-border-color: $gray-600-dark !default; + +$pagination-hover-color: $white !default; +$pagination-hover-bg: $gray-900-dark !default; +$pagination-hover-border-color: $gray-700-dark !default; + +$pagination-disabled-bg: $gray-900-dark !default; +$pagination-disabled-border-color: $gray-700-dark !default; + + +// Jumbotron + +$jumbotron-bg: $gray-800-dark !default; + + +// Cards + +$card-bg: $gray-800-dark !default; +$card-border-color: $border-color !default; + + +// Tooltips + +$tooltip-bg: $gray-800-dark !default; +$tooltip-color: $white !default; + + +// Popovers + +$popover-bg: $gray-800-dark !default; +$popover-border-color: $black !default; + + +// Toasts + +$toast-background-color: $gray-800-dark !default; +; + + +// Modals + +$modal-content-bg: $gray-800-dark !default; +$modal-content-border-color: $black !default; + + +// Progress bars + +$progress-bg: $gray-600-dark !default; + + +// +// Dashkit ===================================== +// + +// Auth + +$auth-bg: $body-bg !default; + + +// Avatar + +$avatar-title-bg: $gray-600-dark !default; + + +// Badges + +$badge-soft-bg-level: 10 !default; + + +// Cards + +$card-outline-color: $gray-800-dark !default; +$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default; + + +// Comment + +$comment-body-bg: $gray-700-dark; + + +// Header + +$header-body-border-color-dark: $border-color !default; + + +// Navbar + +$navbar-light-bg: $gray-800-dark !default; +$navbar-light-border-color: $gray-800-dark !default; + + +// Switch + +$custom-switch-indicator-bg: $gray-800-dark !default; +$custom-switch-indicator-active-bg: $white !default; + + +// Backgrounds + +$bg-soft-level: 10 !default; diff --git a/explorer/src/scss/dashkit/mixins/_badge.scss b/explorer/src/scss/dashkit/mixins/_badge.scss new file mode 100644 index 0000000000..b4a255941e --- /dev/null +++ b/explorer/src/scss/dashkit/mixins/_badge.scss @@ -0,0 +1,16 @@ +// Badge Mixins +// +// This is a custom mixin for badge-#{color}-soft variant of Bootstrap's .badge class + +@mixin badge-variant-soft($bg, $color) { + color: $color; + background-color: $bg; + + &[href] { + @include hover-focus { + color: $color; + text-decoration: none; + background-color: darken($bg, 5%); + } + } +} diff --git a/explorer/src/scss/dashkit/mixins/_breakpoints.scss b/explorer/src/scss/dashkit/mixins/_breakpoints.scss new file mode 100644 index 0000000000..ae60b41507 --- /dev/null +++ b/explorer/src/scss/dashkit/mixins/_breakpoints.scss @@ -0,0 +1,9 @@ +// +// breakpoint.scss +// Extended from Bootstrap +// + +@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null); +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/utilities/_background.scss b/explorer/src/scss/dashkit/utilities/_background.scss new file mode 100644 index 0000000000..77874162d4 --- /dev/null +++ b/explorer/src/scss/dashkit/utilities/_background.scss @@ -0,0 +1,80 @@ +// +// background.scss +// + + +// Fixed at the bottom + +.bg-fixed-bottom { + background-repeat: no-repeat; + background-position: right bottom; + background-size: 100% auto; + background-attachment: fixed; +} + +// Calculate the width of the main container because +// the background-attachment property will use 100vw instead + +.navbar-vertical ~ .main-content.bg-fixed-bottom { + background-size: 100%; + + @include media-breakpoint-up(md) { + background-size: calc(100% - #{$navbar-vertical-width}); + } +} + + +// Cover + +.bg-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + + +// Auth + +.bg-auth { + background-color: $auth-bg; +} + + +// Ellipses + +@each $color, $value in $theme-colors { + + .bg-ellipses.bg-#{$color} { + background-color: transparent !important; + background-repeat: no-repeat; + background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%); + background-size: 200% 150%; + background-position: center bottom; + } +} + + +// Hero + +.bg-hero { + background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(../#{$path-to-img}/covers/header-cover.jpg); + background-repeat: no-repeat, no-repeat; + background-position: center center, center center; + background-size: cover, cover; +} + + +// Colors + +.bg-lighter { + background-color: $lighter !important; +} + + +// Soft colors + +@each $color, $value in $theme-colors { + .bg-#{$color}-soft { + background-color: theme-color-level($color, $bg-soft-level) !important; + } +} diff --git a/explorer/src/scss/dashkit/utilities/_borders.scss b/explorer/src/scss/dashkit/utilities/_borders.scss new file mode 100644 index 0000000000..7c397fc838 --- /dev/null +++ b/explorer/src/scss/dashkit/utilities/_borders.scss @@ -0,0 +1,48 @@ +// +// borders.scss +// + + +// Sizing + +$border-sizing: () !default; +$border-sizing: map-merge(( + "2": 2, + "3": 3, + "4": 4, + "5": 5 +), $border-sizing); + +@each $size, $value in $border-sizing { + + .border-#{$size} { + border-width: $border-width * $value !important; + } + + .border-top-#{$size} { + border-top-width: $border-width * $value !important; + } + + .border-right-#{$size} { + border-right-width: $border-width * $value !important; + } + + .border-bottom-#{$size} { + border-bottom-width: $border-width * $value !important; + } + + .border-left-#{$size} { + border-left-width: $border-width * $value !important; + } +} + + +// Contextual classes + +.border-body { + border-color: $body-bg !important; +} + +.border-card { + border-color: $card-bg !important; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/utilities/_lift.scss b/explorer/src/scss/dashkit/utilities/_lift.scss new file mode 100644 index 0000000000..101732f79a --- /dev/null +++ b/explorer/src/scss/dashkit/utilities/_lift.scss @@ -0,0 +1,20 @@ +// +// lift.scss +// Theme utility +// + +.lift { + transition: box-shadow .25s ease, transform .25s ease; +} + +.lift:hover, +.lift:focus { + box-shadow: $box-shadow-lift !important; + transform: translate3d(0, -3px, 0); +} + +.lift-lg:hover, +.lift-lg:focus { + box-shadow: $box-shadow-lift-lg !important; + transform: translate3d(0, -5px, 0); +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/utilities/_sizing.scss b/explorer/src/scss/dashkit/utilities/_sizing.scss new file mode 100644 index 0000000000..a397a7e7a9 --- /dev/null +++ b/explorer/src/scss/dashkit/utilities/_sizing.scss @@ -0,0 +1,10 @@ +// +// sizing.scss +// + +.vw-100 { + width: 100vw !important; +} +.vh-100 { + height: 100vh !important; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/utilities/_type.scss b/explorer/src/scss/dashkit/utilities/_type.scss new file mode 100644 index 0000000000..5d79614d19 --- /dev/null +++ b/explorer/src/scss/dashkit/utilities/_type.scss @@ -0,0 +1,34 @@ +// +// type.scss +// Extended from Bootstrap +// + +// Font size + +.font-size-base { + font-size: $font-size-base !important; +} + +.font-size-sm { + font-size: $font-size-sm !important; +} + +.font-size-lg { + font-size: $font-size-lg !important; +} + + +// Decoration + +.text-decoration-underline { + text-decoration: underline !important; +} + + +// Gray colors + +@each $color, $value in $grays { + .text-gray-#{$color} { + color: $value !important; + } +} diff --git a/explorer/src/scss/dashkit/vendors/_dropzone.scss b/explorer/src/scss/dashkit/vendors/_dropzone.scss new file mode 100644 index 0000000000..34aa46b065 --- /dev/null +++ b/explorer/src/scss/dashkit/vendors/_dropzone.scss @@ -0,0 +1,75 @@ +// +// dropzone.scss +// Dropzone plugin overrides +// + +.dropzone { + position: relative; + display: flex; + flex-direction: column; +} + +.dz-message { + padding: 5rem 1rem; + background-color: $input-bg; + border: $input-border-width dashed $input-border-color; + border-radius: $border-radius; + text-align: center; + color: $text-muted; + transition: $transition-base; + order: -1; + cursor: pointer; + z-index: 999; + + &:hover { + border-color: $text-muted; + color: $body-color; + } +} + +.dz-drag-hover .dz-message { + border-color: $primary; + color: $primary; +} + +.dropzone-multiple .dz-message { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.dropzone-single.dz-max-files-reached .dz-message { + background-color: fade-out($black, .1); + color: white; + opacity: 0; + + &:hover { + opacity: 1; + } +} + +.dz-preview-single { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + border-radius: $border-radius; +} + +.dz-preview-cover { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + border-radius: $border-radius; +} + +.dz-preview-img { + object-fit: cover; + width: 100%; height: 100%; + border-radius: $border-radius; +} + +.dz-preview-multiple .list-group-item:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +[data-dz-size] strong { + font-weight: $font-weight-normal; +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/vendors/_flatpickr.scss b/explorer/src/scss/dashkit/vendors/_flatpickr.scss new file mode 100644 index 0000000000..a1b4386282 --- /dev/null +++ b/explorer/src/scss/dashkit/vendors/_flatpickr.scss @@ -0,0 +1,69 @@ +// +// flatpickr.scss +// Flatpickr plugin overrides +// + +.flatpickr-calendar { + background-color: $input-bg; + border: $input-border-width solid $input-border-color; + color: $input-color; + box-shadow: none; + + * { + color: inherit !important; + fill: currentColor !important; + } + + &.arrowTop:before { + border-bottom-color: $input-border-color; + } + + &.arrowTop:after { + border-bottom-color: $input-bg; + } + + .flatpickr-months { + padding-top: .625rem; + padding-bottom: .625rem; + } + + .flatpickr-prev-month, + .flatpickr-next-month { + top: .625rem; + } + + .flatpickr-current-month { + font-size: 115%; + } + + .flatpickr-day { + border-radius: $border-radius; + + &:hover { + background-color: $light; + border-color: $input-border-color; + } + } + + .flatpickr-day.prevMonthDay { + color: $text-muted !important; + } + + .flatpickr-day.today { + border-color: $border-color; + } + + .flatpickr-day.selected { + background-color: $primary; + border-color: $primary; + color: $white !important; + } + + .flatpickr-day.inRange { + background-color: $light; + border: none; + border-radius: 0; + box-shadow: -5px 0 0 $light, 5px 0 0 $light; + } + +} \ No newline at end of file diff --git a/explorer/src/scss/dashkit/vendors/_list.scss b/explorer/src/scss/dashkit/vendors/_list.scss new file mode 100644 index 0000000000..7c82a04e66 --- /dev/null +++ b/explorer/src/scss/dashkit/vendors/_list.scss @@ -0,0 +1,11 @@ +// +// list.scss +// + +[data-toggle="lists"] .pagination > li { + @extend .page-item; +} + +[data-toggle="lists"] .pagination .page { + @extend .page-link; +} diff --git a/explorer/src/scss/dashkit/vendors/_quill.scss b/explorer/src/scss/dashkit/vendors/_quill.scss new file mode 100644 index 0000000000..c4a83a01d1 --- /dev/null +++ b/explorer/src/scss/dashkit/vendors/_quill.scss @@ -0,0 +1,283 @@ +// +// quill.scss +// Quill plugin overrides +// + +.ql-container { + font-family: $font-family-base; +} + +.ql-toolbar { + position: relative; + padding: $input-padding-y $input-padding-x; + background-color: $input-bg; + border: $input-border-width solid $input-border-color; + border-radius: $input-border-radius $input-border-radius 0 0; + color: $input-color; +} + +.ql-toolbar + .ql-container { + margin-top: -$border-width; +} + +.ql-toolbar + .ql-container .ql-editor { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.ql-editor { + min-height: $line-height-base * $font-size-base * 4; + display: block; + width: 100%; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + background-clip: padding-box; + border: $input-border-width solid $input-border-color; + + // Note: This has no effect on `s in CSS. + @if $enable-rounded { + // Manually use the if/else instead of the mixin to account for iOS override + border-radius: $input-border-radius; + } + + @else { + // Otherwise undo the iOS default + border-radius: 0; + } + + @include box-shadow($input-box-shadow); + @include transition($input-transition); + + // Unstyle the caret on `