Eduard Kuzmenko
5 years ago
67 changed files with 1147 additions and 5778 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,150 @@
@@ -0,0 +1,150 @@
|
||||
import { $rootScope, safeReplaceObject, templateUrl, calcImageInBox, encodeEntities, copy } from "../utils"; |
||||
import appPhotosManager from "./appPhotosManager"; |
||||
import appDocsManager from "./appDocsManager"; |
||||
import { RichTextProcessor } from "../richtextprocessor"; |
||||
|
||||
class AppWebPagesManager { |
||||
webpages: any = {}; |
||||
pendingWebPages: any = {}; |
||||
|
||||
constructor() { |
||||
$rootScope.$on('apiUpdate', (e: CustomEvent) => { |
||||
let update = e.detail; |
||||
|
||||
switch (update._) { |
||||
case 'updateWebPage': |
||||
this.saveWebPage(update.webpage) |
||||
break |
||||
} |
||||
}) |
||||
} |
||||
|
||||
saveWebPage(apiWebPage: any, messageID?: number, mediaContext?: any) { |
||||
if (apiWebPage.photo && apiWebPage.photo._ === 'photo') { |
||||
appPhotosManager.savePhoto(apiWebPage.photo, mediaContext) |
||||
} else { |
||||
delete apiWebPage.photo |
||||
} |
||||
if (apiWebPage.document && apiWebPage.document._ === 'document') { |
||||
appDocsManager.saveDoc(apiWebPage.document, mediaContext) |
||||
} else { |
||||
if (apiWebPage.type == 'document') { |
||||
delete apiWebPage.type |
||||
} |
||||
delete apiWebPage.document |
||||
} |
||||
|
||||
var siteName = apiWebPage.site_name |
||||
var shortTitle = apiWebPage.title || apiWebPage.author || siteName || '' |
||||
if (siteName && shortTitle == siteName) { |
||||
delete apiWebPage.site_name |
||||
} |
||||
if (shortTitle.length > 100) { |
||||
shortTitle = shortTitle.substr(0, 80) + '...' |
||||
} |
||||
apiWebPage.rTitle = RichTextProcessor.wrapRichText(shortTitle, {noLinks: true, noLinebreaks: true}) |
||||
var contextHashtag = '' |
||||
if (siteName == 'GitHub') { |
||||
var matches = apiWebPage.url.match(/(https?:\/\/github\.com\/[^\/]+\/[^\/]+)/) |
||||
if (matches) { |
||||
contextHashtag = matches[0] + '/issues/{1}' |
||||
} |
||||
} |
||||
// delete apiWebPage.description
|
||||
var shortDescriptionText = (apiWebPage.description || '') |
||||
if (shortDescriptionText.length > 180) { |
||||
shortDescriptionText = shortDescriptionText.substr(0, 150).replace(/(\n|\s)+$/, '') + '...' |
||||
} |
||||
apiWebPage.rDescription = RichTextProcessor.wrapRichText(shortDescriptionText, { |
||||
contextSite: siteName || 'external', |
||||
contextHashtag: contextHashtag |
||||
}); |
||||
|
||||
if (apiWebPage.type != 'photo' && |
||||
apiWebPage.type != 'video' && |
||||
apiWebPage.type != 'gif' && |
||||
apiWebPage.type != 'document' && |
||||
!apiWebPage.description && |
||||
apiWebPage.photo) { |
||||
apiWebPage.type = 'photo' |
||||
} |
||||
|
||||
if (messageID) { |
||||
if (this.pendingWebPages[apiWebPage.id] === undefined) { |
||||
this.pendingWebPages[apiWebPage.id] = {} |
||||
} |
||||
this.pendingWebPages[apiWebPage.id][messageID] = true |
||||
this.webpages[apiWebPage.id] = apiWebPage |
||||
} |
||||
|
||||
if (this.webpages[apiWebPage.id] === undefined) { |
||||
this.webpages[apiWebPage.id] = apiWebPage |
||||
} else { |
||||
safeReplaceObject(this.webpages[apiWebPage.id], apiWebPage) |
||||
} |
||||
|
||||
if (!messageID && this.pendingWebPages[apiWebPage.id] !== undefined) { |
||||
var msgs = [] |
||||
for(let msgID in this.pendingWebPages[apiWebPage.id]) { |
||||
msgs.push(msgID); |
||||
} |
||||
|
||||
$rootScope.$broadcast('webpage_updated', { |
||||
id: apiWebPage.id, |
||||
msgs: msgs |
||||
}) |
||||
} |
||||
} |
||||
|
||||
wrapForHistory (webPageID: number) { |
||||
var webPage = copy(this.webpages[webPageID]) || {_: 'webPageEmpty'} |
||||
|
||||
if (webPage.photo && webPage.photo.id) { |
||||
webPage.photo = appPhotosManager.wrapForHistory(webPage.photo.id, {website: webPage.type != 'photo' && webPage.type != 'video'}) |
||||
} |
||||
|
||||
/* if (webPage.document && webPage.document.id) { |
||||
webPage.document = appDocsManager.wrapForHistory(webPage.document.id) |
||||
} */ // warning |
||||
|
||||
return webPage |
||||
} |
||||
|
||||
wrapForFull (webPageID: number) { |
||||
var webPage = this.wrapForHistory(webPageID) |
||||
|
||||
if (!webPage.embed_url) { |
||||
return webPage |
||||
} |
||||
|
||||
var fullWidth = window.innerWidth; |
||||
var fullHeight = window.innerHeight; |
||||
|
||||
var full: any = { |
||||
width: fullWidth, |
||||
height: fullHeight |
||||
} |
||||
|
||||
if (!webPage.embed_width || !webPage.embed_height) { |
||||
full.height = full.width = Math.min(fullWidth, fullHeight) |
||||
} else { |
||||
var wh = calcImageInBox(webPage.embed_width, webPage.embed_height, fullWidth, fullHeight) |
||||
full.width = wh.w |
||||
full.height = wh.h |
||||
} |
||||
|
||||
var embedTag = Config.Modes.chrome_packed ? 'webview' : 'iframe' |
||||
|
||||
var embedType = webPage.embed_type != 'iframe' ? webPage.embed_type || 'text/html' : 'text/html' |
||||
|
||||
var embedHtml = '<' + embedTag + ' src="' + encodeEntities(webPage.embed_url) + '" type="' + encodeEntities(embedType) + '" frameborder="0" border="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="' + full.width + '" height="' + full.height + '" style="width: ' + full.width + 'px; height: ' + full.height + 'px;"></' + embedTag + '>' |
||||
|
||||
full.html = embedHtml; |
||||
|
||||
webPage.full = full |
||||
|
||||
return webPage |
||||
} |
||||
} |
||||
|
||||
export default new AppWebPagesManager(); |
||||
@ -0,0 +1,278 @@
@@ -0,0 +1,278 @@
|
||||
String.prototype.toHHMMSS = function() { |
||||
let sec_num = parseInt(this, 10); |
||||
let hours = Math.floor(sec_num / 3600); |
||||
let minutes = Math.floor((sec_num - (hours * 3600)) / 60); |
||||
let seconds = sec_num - (hours * 3600) - (minutes * 60); |
||||
|
||||
if(hours < 10) hours = "0" + hours; |
||||
if(minutes < 10) minutes = minutes; |
||||
if(seconds < 10) seconds = "0" + seconds; |
||||
return minutes + ':' + seconds; |
||||
} |
||||
|
||||
function stylePlayer(player, video) { |
||||
let skin = attachSkin(video.dataset.ckin); |
||||
player.classList.add(skin); |
||||
|
||||
let overlay = video.dataset.overlay; |
||||
addOverlay(player, overlay); |
||||
|
||||
let html = buildControls(skin); |
||||
player.insertAdjacentHTML('beforeend', html); |
||||
|
||||
var stopAndScrubTimeout = 0; |
||||
|
||||
if(skin === 'default') { |
||||
var progress = player.querySelector('.progress');; |
||||
var progressBar = player.querySelector('.progress__filled'); |
||||
var toggle = player.querySelectorAll('.toggle'); |
||||
var fullScreenButton = player.querySelector('.fullscreen'); |
||||
var seek = player.querySelector('#seek'); |
||||
var timeElapsed = player.querySelector('#time-elapsed'); |
||||
var timeDuration = player.querySelector('#time-duration'); |
||||
seek.setAttribute('max', video.duration); |
||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
||||
|
||||
toggle.forEach((button) => { |
||||
return button.addEventListener('click', () => { |
||||
togglePlay(video, player); |
||||
}); |
||||
}); |
||||
|
||||
video.addEventListener('click', function() { |
||||
togglePlay(this, player); |
||||
}); |
||||
|
||||
video.addEventListener('play', function() { |
||||
updateButton(this, toggle); |
||||
}); |
||||
|
||||
video.addEventListener('pause', function() { |
||||
updateButton(this, toggle); |
||||
}); |
||||
|
||||
let mousedown = false; |
||||
progress.addEventListener('mousemove', (e) => { |
||||
return mousedown && scrub(e, video, progress); |
||||
}); |
||||
progress.addEventListener('mousedown', (e) => { |
||||
//console.log(video.currentTime);
|
||||
scrub(e, video, progress, progressBar); |
||||
//Таймер для того, чтобы стопать видео, если зажал мышку и не отпустил клик
|
||||
stopAndScrubTimeout = setTimeout(function() { |
||||
togglePlay(video, player, 1); |
||||
}, 150); |
||||
|
||||
return mousedown = true; |
||||
}); |
||||
progress.addEventListener('mouseup', () => { |
||||
clearTimeout(stopAndScrubTimeout); |
||||
togglePlay(video, player, 0); |
||||
return mousedown = false; |
||||
}); |
||||
fullScreenButton.addEventListener('click', (e) => { |
||||
return toggleFullScreen(player, fullScreenButton); |
||||
}); |
||||
addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', (e) => { |
||||
return onFullScreen(e, player); |
||||
}); |
||||
} |
||||
|
||||
if(skin === 'circle') { |
||||
let wrapper = document.createElement('div'); |
||||
wrapper.classList.add('circle-time-left'); |
||||
video.parentNode.insertBefore(wrapper, video); |
||||
wrapper.innerHTML = '<div class="circle-time"></div><div class="iconVolume tgico-nosound"></div>'; |
||||
|
||||
var circle = player.querySelector('.progress-ring__circle'); |
||||
var radius = circle.r.baseVal.value; |
||||
var circumference = 2 * Math.PI * radius; |
||||
var timeDuration = player.querySelector('.circle-time'); |
||||
var iconVolume = player.querySelector('.iconVolume'); |
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`; |
||||
circle.style.strokeDashoffset = circumference; |
||||
circle.addEventListener('click', () => { |
||||
togglePlay(video, player); |
||||
}); |
||||
|
||||
video.addEventListener('play', () => { |
||||
iconVolume.style.display = 'none'; |
||||
}); |
||||
|
||||
video.addEventListener('pause', () => { |
||||
iconVolume.style.display = ''; |
||||
}); |
||||
} |
||||
|
||||
//Для хрома
|
||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
||||
if(skin === 'default') seek.setAttribute('max', video.duration); |
||||
//Для Opera / Safari / IE
|
||||
video.addEventListener('loadeddata', function() { |
||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
||||
if(skin === 'default') seek.setAttribute('max', video.duration); |
||||
}) |
||||
|
||||
video.addEventListener('timeupdate', function() { |
||||
handleProgress(this, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed); |
||||
}); |
||||
} |
||||
|
||||
function showControls(video) { |
||||
video.setAttribute("controls", "controls"); |
||||
} |
||||
|
||||
function togglePlay(video, player, stop) { |
||||
if(stop == 1) { |
||||
video['pause'](); |
||||
player.classList.remove('is-playing'); |
||||
return; |
||||
} else if(stop == 0) { |
||||
video['play'](); |
||||
player.classList.add('is-playing'); |
||||
return; |
||||
} |
||||
|
||||
let method = video.paused ? 'play' : 'pause'; |
||||
video[method](); |
||||
video.paused ? player.classList.remove('is-playing') : player.classList.add('is-playing'); |
||||
} |
||||
|
||||
function updateButton(video, toggle) { |
||||
let icon = video.paused ? 'tgico-play' : 'tgico-pause'; |
||||
toggle.forEach((button) => { |
||||
button.classList.remove('tgico-play', 'tgico-pause'); |
||||
button.classList.add(icon); |
||||
}); |
||||
} |
||||
|
||||
function handleProgress(video, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed) { |
||||
let percent = video.currentTime / video.duration * 100; |
||||
if(skin === 'default') { |
||||
progressBar.style.width = percent + '%'; |
||||
seek.value = video.currentTime; |
||||
timeElapsed.innerHTML = String(video.currentTime | 0).toHHMMSS(); |
||||
} else if(skin === 'circle') { |
||||
let timeLeft = String((video.duration - video.currentTime) | 0).toHHMMSS(); |
||||
let offset = circumference - percent / 100 * circumference; |
||||
circle.style.strokeDashoffset = offset; |
||||
if(timeLeft != 0 | 0) timeDuration.innerHTML = timeLeft; |
||||
} |
||||
} |
||||
|
||||
function scrub(e, video, progress) { |
||||
let scrubTime = e.offsetX / progress.offsetWidth * video.duration; |
||||
video.currentTime = scrubTime; |
||||
} |
||||
|
||||
export function wrapPlayer(video) { |
||||
let wrapper = document.createElement('div'); |
||||
wrapper.classList.add('ckin__player'); |
||||
|
||||
video.parentNode.insertBefore(wrapper, video); |
||||
wrapper.appendChild(video); |
||||
|
||||
stylePlayer(wrapper, video); |
||||
} |
||||
|
||||
function buildControls(skin) { |
||||
let html = []; |
||||
if(skin === 'default') { |
||||
html.push('<button class="' + skin + '__button--big toggle tgico-largeplay" title="Toggle Play"></button>'); |
||||
html.push('<div class="' + skin + '__controls ckin__controls">'); |
||||
html.push('<div class="progress">', |
||||
'<div class="progress__filled"></div><input class="seek" id="seek" value="0" min="0" type="range" step="0.1" max="0">', |
||||
'</div>', |
||||
'<div class="bottom-controls">', |
||||
'<div class="left-controls"><button class="' + skin + '__button toggle tgico-play" title="Toggle Video"></button>', |
||||
'<div class="time">', |
||||
'<time id="time-elapsed">0:00</time>', |
||||
'<span> / </span>', |
||||
'<time id="time-duration">0:00</time>', |
||||
'</div>', |
||||
'</div>', |
||||
'<div class="right-controls"><button class="' + skin + '__button fullscreen tgico-fullscreen" title="Full Screen"></button></div></div>'); |
||||
html.push('</div>'); |
||||
} else if(skin === 'circle') { |
||||
html.push('<svg class="progress-ring" width="200px" height="200px">', |
||||
'<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="100" cy="100" r="93" fill="transparent"/>', |
||||
'</svg>'); |
||||
} |
||||
|
||||
return html.join(''); |
||||
} |
||||
|
||||
function attachSkin(skin) { |
||||
console.log("skin: " + skin); |
||||
if(typeof skin != 'undefined' && skin != '') { |
||||
return skin; |
||||
} else { |
||||
return 'default'; |
||||
} |
||||
} |
||||
|
||||
function addOverlay(player, overlay) { |
||||
if(overlay == 1) { |
||||
player.classList.add('ckin__overlay'); |
||||
} else { |
||||
return; |
||||
} |
||||
} |
||||
|
||||
function toggleFullScreen(player, fullScreenButton) { |
||||
// alternative standard method
|
||||
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { |
||||
player.classList.add('ckin__fullscreen'); |
||||
|
||||
if(player.requestFullscreen) { |
||||
player.requestFullscreen(); |
||||
} else if(player.mozRequestFullScreen) { |
||||
player.mozRequestFullScreen(); // Firefox
|
||||
} else if(player.webkitRequestFullscreen) { |
||||
player.webkitRequestFullscreen(); // Chrome and Safari
|
||||
} else if(player.msRequestFullscreen) { |
||||
player.msRequestFullscreen(); |
||||
} |
||||
|
||||
fullScreenButton.classList.remove('tgico-fullscreen'); |
||||
fullScreenButton.classList.add('tgico-smallscreen'); |
||||
fullScreenButton.setAttribute('title', 'Exit Full Screen'); |
||||
} else { |
||||
player.classList.remove('ckin__fullscreen'); |
||||
|
||||
if(document.cancelFullScreen) { |
||||
document.cancelFullScreen(); |
||||
} else if(document.mozCancelFullScreen) { |
||||
document.mozCancelFullScreen(); |
||||
} else if(document.webkitCancelFullScreen) { |
||||
document.webkitCancelFullScreen(); |
||||
} else if(document.msExitFullscreen) { |
||||
document.msExitFullscreen(); |
||||
} |
||||
|
||||
fullScreenButton.classList.remove('tgico-smallscreen'); |
||||
fullScreenButton.classList.add('tgico-fullscreen'); |
||||
fullScreenButton.setAttribute('title', 'Full Screen'); |
||||
} |
||||
} |
||||
|
||||
function onFullScreen(e, player) { |
||||
let isFullscreenNow = document.webkitFullscreenElement !== null; |
||||
if(!isFullscreenNow) { |
||||
player.classList.remove('ckin__fullscreen'); |
||||
|
||||
/* let el = player.querySelector('.fullscreen'); |
||||
el.classList.remove('tgico-smallscreen'); |
||||
el.classList.add('tgico-fullscreen'); */ |
||||
} else { |
||||
// player.querySelector('.fullscreen').innerHTML = iconExpand;
|
||||
|
||||
} |
||||
} |
||||
|
||||
function addListenerMulti(element, eventNames, listener) { |
||||
let events = eventNames.split(' '); |
||||
for (let i = 0, iLen = events.length; i < iLen; i++) { |
||||
element.addEventListener(events[i], listener, false); |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
|
||||
import {Webp} from "webp-hero/libwebp/dist/webp.js" |
||||
import {detectWebpSupport} from "webp-hero/dist/detect-webp-support.js" |
||||
|
||||
const relax = () => new Promise(resolve => requestAnimationFrame(resolve)) |
||||
|
||||
export class WebpMachineError extends Error {} |
||||
|
||||
/** |
||||
* Webp Machine |
||||
* - decode and polyfill webp images |
||||
* - can only decode images one-at-a-time (otherwise will throw busy error) |
||||
*/ |
||||
export class WebpMachine { |
||||
private readonly webp: Webp |
||||
private readonly webpSupport: Promise<boolean> |
||||
private busy = false |
||||
private cache: {[key: string]: string} = {} |
||||
|
||||
constructor({ |
||||
webp = new Webp(), |
||||
webpSupport = detectWebpSupport() |
||||
} = {}) { |
||||
this.webp = webp; |
||||
this.webp.Module.doNotCaptureKeyboard = true; |
||||
this.webpSupport = webpSupport; |
||||
} |
||||
|
||||
/** |
||||
* Decode raw webp data into a png data url |
||||
*/ |
||||
async decode(webpData: Uint8Array): Promise<string> { |
||||
if (this.busy) throw new WebpMachineError("cannot decode when already busy") |
||||
this.busy = true |
||||
|
||||
try { |
||||
await relax() |
||||
const canvas = document.createElement("canvas") |
||||
this.webp.setCanvas(canvas) |
||||
this.webp.webpToSdl(webpData, webpData.length) |
||||
this.busy = false |
||||
return canvas.toDataURL() |
||||
} |
||||
catch (error) { |
||||
this.busy = false |
||||
error.name = WebpMachineError.name |
||||
error.message = `failed to decode webp image: ${error.message}` |
||||
throw error |
||||
} |
||||
} |
||||
} |
||||
|
||||
(window as any).WebpMachine = WebpMachine; |
||||
@ -0,0 +1,24 @@
@@ -0,0 +1,24 @@
|
||||
import insideWorker from 'offscreen-canvas/inside-worker'; |
||||
|
||||
console.log(self); |
||||
|
||||
import { Webp } from "./libwebp.js"; |
||||
let webp = new Webp(); |
||||
webp.Module.doNotCaptureKeyboard = true; |
||||
webp.Module.noImageDecoding = true; |
||||
|
||||
let canvas = null; |
||||
|
||||
const worker = insideWorker(e => { |
||||
if(e.data.canvas) { |
||||
canvas = e.data.canvas; |
||||
console.log(e, canvas); |
||||
webp.setCanvas(canvas); |
||||
//webp.webpToSdl()
|
||||
// Draw on the canvas
|
||||
} else if(e.data.message == 'webpBytes') { |
||||
webp.webpToSdl(e.data.bytes, e.data.bytes.length); |
||||
//console.log(canvas);
|
||||
self.postMessage({converted: true}); |
||||
} |
||||
}); |
||||
File diff suppressed because one or more lines are too long
@ -1,42 +1,6 @@
@@ -1,42 +1,6 @@
|
||||
@charset "UTF-8"; |
||||
|
||||
// Color |
||||
@import "../node_modules/materialize-css/sass/components/color-variables"; |
||||
@import "../node_modules/materialize-css/sass/components/color-classes"; |
||||
@import "./scss/components/normalize"; |
||||
|
||||
// Variables; |
||||
@import "../node_modules/materialize-css/sass/components/variables"; |
||||
|
||||
// Reset |
||||
@import "../node_modules/materialize-css/sass/components/normalize"; |
||||
|
||||
// components |
||||
@import "../node_modules/materialize-css/sass/components/global"; |
||||
/* @import "components/badges"; |
||||
@import "components/icons-material-design"; */ |
||||
@import "../node_modules/materialize-css/sass/components/grid"; |
||||
/* @import "components/navbar"; */ |
||||
@import "../node_modules/materialize-css/sass/components/typography"; |
||||
@import "../node_modules/materialize-css/sass/components/preloader"; |
||||
/* @import "components/transitions"; |
||||
@import "components/cards"; |
||||
@import "components/toast"; |
||||
@import "components/tabs"; |
||||
@import "components/tooltip"; |
||||
@import "components/buttons"; |
||||
@import "components/dropdown"; |
||||
@import "components/waves"; |
||||
@import "components/modal"; |
||||
@import "components/collapsible"; |
||||
@import "components/chips"; |
||||
@import "components/materialbox"; |
||||
@import "components/forms/forms"; |
||||
@import "components/table_of_contents"; |
||||
@import "components/sidenav"; |
||||
@import "components/preloader"; |
||||
@import "components/slider"; |
||||
@import "components/carousel"; |
||||
@import "components/tapTarget"; |
||||
@import "components/pulse"; |
||||
@import "components/datepicker"; |
||||
@import "components/timepicker"; */ |
||||
@import "./scss/components/global"; |
||||
@import "./scss/components/typography"; |
||||
|
||||
@ -1,124 +0,0 @@
@@ -1,124 +0,0 @@
|
||||
/* |
||||
* Copyright (c) 2018-present, Evgeny Nadymov |
||||
* |
||||
* This source code is licensed under the GPL v.3.0 license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
//import TdLibController from './Controllers/TdLibController';
|
||||
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = |
||||
//false;
|
||||
Boolean( |
||||
window.location.hostname === 'localhost' || |
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' || |
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) |
||||
); |
||||
|
||||
export default async function register() { |
||||
console.log('[SW] Register'); |
||||
|
||||
if('serviceWorker' in navigator) { |
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location); |
||||
if(publicUrl.origin !== window.location.origin) { |
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return; |
||||
} |
||||
|
||||
const serviceWorkerName = |
||||
process.env.NODE_ENV === 'production' ? 'service-worker.js' : 'custom-service-worker.js'; |
||||
const swUrl = `${process.env.PUBLIC_URL}/${serviceWorkerName}`; |
||||
console.log(`[SW] Service worker url: ${swUrl}`); |
||||
|
||||
if(!isLocalhost) { |
||||
// Is not local host. Just register service worker
|
||||
await registerValidSW(swUrl); |
||||
} else { |
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
await checkValidServiceWorker(swUrl); |
||||
} |
||||
} |
||||
} |
||||
|
||||
async function registerValidSW(swUrl) { |
||||
console.log('[SW] RegisterValidSW'); |
||||
try { |
||||
const registration = await navigator.serviceWorker.register(swUrl); |
||||
registration.onupdatefound = () => { |
||||
const installingWorker = registration.installing; |
||||
installingWorker.onstatechange = () => { |
||||
if(installingWorker.state === 'installed') { |
||||
if(navigator.serviceWorker.controller) { |
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('[SW] New content is available; please refresh.'); |
||||
|
||||
ApplicationStore.emit('clientUpdateNewContentAvailable'); |
||||
} else { |
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('[SW] Content is cached for offline use.'); |
||||
} |
||||
} |
||||
}; |
||||
}; |
||||
} catch (error) { |
||||
console.error('[SW] Error during service worker registration: ', error); |
||||
} |
||||
} |
||||
|
||||
async function checkValidServiceWorker(swUrl) { |
||||
console.log('[SW] CheckValidServiceWorker'); |
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
try { |
||||
const response = await fetch(swUrl); |
||||
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if(response.status === 404 || response.headers.get('content-type').indexOf('javascript') === -1) { |
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
const registration = await navigator.serviceWorker.ready; |
||||
await registration.unregister(); |
||||
|
||||
window.location.reload(); |
||||
} else { |
||||
// Service worker found. Proceed as normal.
|
||||
await registerValidSW(swUrl); |
||||
} |
||||
} catch(error) { |
||||
console.log('[SW] No internet connection found. App is running in offline mode.'); |
||||
} |
||||
} |
||||
|
||||
export async function unregister() { |
||||
if ('serviceWorker' in navigator) { |
||||
const registration = await navigator.serviceWorker.ready; |
||||
|
||||
await registration.unregister(); |
||||
} |
||||
} |
||||
|
||||
export async function update() { |
||||
if ('serviceWorker' in navigator) { |
||||
const registration = await navigator.serviceWorker.ready; |
||||
|
||||
await registration.update(); |
||||
} |
||||
} |
||||
@ -1,55 +0,0 @@
@@ -1,55 +0,0 @@
|
||||
// Badges |
||||
span.badge { |
||||
min-width: 3rem; |
||||
padding: 0 6px; |
||||
margin-left: 14px; |
||||
text-align: center; |
||||
font-size: 1rem; |
||||
line-height: $badge-height; |
||||
height: $badge-height; |
||||
color: color('grey', 'darken-1'); |
||||
float: right; |
||||
box-sizing: border-box; |
||||
|
||||
&.new { |
||||
font-weight: 300; |
||||
font-size: 0.8rem; |
||||
color: #fff; |
||||
background-color: $badge-bg-color; |
||||
border-radius: 2px; |
||||
} |
||||
&.new:after { |
||||
content: " new"; |
||||
} |
||||
|
||||
&[data-badge-caption]::after { |
||||
content: " " attr(data-badge-caption); |
||||
} |
||||
} |
||||
|
||||
// Special cases |
||||
nav ul a span.badge { |
||||
display: inline-block; |
||||
float: none; |
||||
margin-left: 4px; |
||||
line-height: $badge-height; |
||||
height: $badge-height; |
||||
-webkit-font-smoothing: auto; |
||||
} |
||||
|
||||
// Line height centering |
||||
.collection-item span.badge { |
||||
margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2}); |
||||
} |
||||
.collapsible span.badge { |
||||
margin-left: auto; |
||||
} |
||||
.sidenav span.badge { |
||||
margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2}); |
||||
} |
||||
|
||||
table span.badge { |
||||
display: inline-block; |
||||
float: none; |
||||
margin-left: auto; |
||||
} |
||||
@ -1,322 +0,0 @@
@@ -1,322 +0,0 @@
|
||||
// shared styles |
||||
.btn, |
||||
.btn-flat { |
||||
border: $button-border; |
||||
border-radius: $button-radius; |
||||
display: inline-block; |
||||
height: $button-height; |
||||
line-height: $button-height; |
||||
padding: $button-padding; |
||||
text-transform: uppercase; |
||||
vertical-align: middle; |
||||
-webkit-tap-highlight-color: transparent; // Gets rid of tap active state |
||||
} |
||||
|
||||
// Disabled shared style |
||||
.btn.disabled, |
||||
.btn-floating.disabled, |
||||
.btn-large.disabled, |
||||
.btn-small.disabled, |
||||
.btn-flat.disabled, |
||||
.btn:disabled, |
||||
.btn-floating:disabled, |
||||
.btn-large:disabled, |
||||
.btn-small:disabled, |
||||
.btn-flat:disabled, |
||||
.btn[disabled], |
||||
.btn-floating[disabled], |
||||
.btn-large[disabled], |
||||
.btn-small[disabled], |
||||
.btn-flat[disabled] { |
||||
pointer-events: none; |
||||
background-color: $button-disabled-background !important; |
||||
box-shadow: none; |
||||
color: $button-disabled-color !important; |
||||
cursor: default; |
||||
&:hover { |
||||
background-color: $button-disabled-background !important; |
||||
color: $button-disabled-color !important; |
||||
} |
||||
} |
||||
|
||||
// Shared icon styles |
||||
.btn, |
||||
.btn-floating, |
||||
.btn-large, |
||||
.btn-small, |
||||
.btn-flat { |
||||
font-size: $button-font-size; |
||||
outline: 0; |
||||
i { |
||||
font-size: $button-icon-font-size; |
||||
line-height: inherit; |
||||
} |
||||
} |
||||
|
||||
// Shared focus button style |
||||
.btn, |
||||
.btn-floating { |
||||
&:focus { |
||||
background-color: darken($button-raised-background, 10%); |
||||
} |
||||
} |
||||
|
||||
// Raised Button |
||||
.btn { |
||||
text-decoration: none; |
||||
color: $button-raised-color; |
||||
background-color: $button-raised-background; |
||||
text-align: center; |
||||
letter-spacing: .5px; |
||||
@extend .z-depth-1; |
||||
transition: background-color .2s ease-out; |
||||
cursor: pointer; |
||||
&:hover { |
||||
background-color: $button-raised-background-hover; |
||||
@extend .z-depth-1-half; |
||||
} |
||||
} |
||||
|
||||
// Floating button |
||||
.btn-floating { |
||||
&:hover { |
||||
background-color: $button-floating-background-hover; |
||||
@extend .z-depth-1-half; |
||||
} |
||||
&:before { |
||||
border-radius: 0; |
||||
} |
||||
&.btn-large { |
||||
&.halfway-fab { |
||||
bottom: -$button-floating-large-size / 2; |
||||
} |
||||
width: $button-floating-large-size; |
||||
height: $button-floating-large-size; |
||||
padding: 0; |
||||
i { |
||||
line-height: $button-floating-large-size; |
||||
} |
||||
} |
||||
|
||||
&.btn-small { |
||||
&.halfway-fab { |
||||
bottom: -$button-floating-small-size / 2; |
||||
} |
||||
width: $button-floating-small-size; |
||||
height: $button-floating-small-size; |
||||
i { |
||||
line-height: $button-floating-small-size; |
||||
} |
||||
} |
||||
|
||||
&.halfway-fab { |
||||
&.left { |
||||
right: auto; |
||||
left: 24px; |
||||
} |
||||
position: absolute; |
||||
right: 24px; |
||||
bottom: -$button-floating-size / 2; |
||||
} |
||||
display: inline-block; |
||||
color: $button-floating-color; |
||||
position: relative; |
||||
overflow: hidden; |
||||
z-index: 1; |
||||
width: $button-floating-size; |
||||
height: $button-floating-size; |
||||
line-height: $button-floating-size; |
||||
padding: 0; |
||||
background-color: $button-floating-background; |
||||
border-radius: $button-floating-radius; |
||||
@extend .z-depth-1; |
||||
transition: background-color .3s; |
||||
cursor: pointer; |
||||
vertical-align: middle; |
||||
i { |
||||
width: inherit; |
||||
display: inline-block; |
||||
text-align: center; |
||||
color: $button-floating-color; |
||||
font-size: $button-large-icon-font-size; |
||||
line-height: $button-floating-size; |
||||
} |
||||
} |
||||
|
||||
// button fix |
||||
button.btn-floating { |
||||
border: $button-border; |
||||
} |
||||
|
||||
// Fixed Action Button |
||||
.fixed-action-btn { |
||||
&.active { |
||||
ul { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
// Directions |
||||
&.direction-left, |
||||
&.direction-right { |
||||
padding: 0 0 0 15px; |
||||
ul { |
||||
text-align: right; |
||||
right: 64px; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
height: 100%; |
||||
left: auto; |
||||
/*width 100% only goes to width of button container */ |
||||
width: 500px; |
||||
li { |
||||
display: inline-block; |
||||
margin: 7.5px 15px 0 0; |
||||
} |
||||
} |
||||
} |
||||
&.direction-right { |
||||
padding: 0 15px 0 0; |
||||
ul { |
||||
text-align: left; |
||||
direction: rtl; |
||||
left: 64px; |
||||
right: auto; |
||||
li { |
||||
margin: 7.5px 0 0 15px; |
||||
} |
||||
} |
||||
} |
||||
&.direction-bottom { |
||||
padding: 0 0 15px 0; |
||||
ul { |
||||
top: 64px; |
||||
bottom: auto; |
||||
display: flex; |
||||
flex-direction: column-reverse; |
||||
li { |
||||
margin: 15px 0 0 0; |
||||
} |
||||
} |
||||
} |
||||
&.toolbar { |
||||
&.active { |
||||
&>a i { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
padding: 0; |
||||
height: $button-floating-large-size; |
||||
ul { |
||||
display: flex; |
||||
top: 0; |
||||
bottom: 0; |
||||
z-index: 1; |
||||
li { |
||||
flex: 1; |
||||
display: inline-block; |
||||
margin: 0; |
||||
height: 100%; |
||||
transition: none; |
||||
a { |
||||
display: block; |
||||
overflow: hidden; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: transparent; |
||||
box-shadow: none; |
||||
color: #fff; |
||||
line-height: $button-floating-large-size; |
||||
z-index: 1; |
||||
i { |
||||
line-height: inherit; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
position: fixed; |
||||
right: 23px; |
||||
bottom: 23px; |
||||
padding-top: 15px; |
||||
margin-bottom: 0; |
||||
z-index: 997; |
||||
ul { |
||||
left: 0; |
||||
right: 0; |
||||
text-align: center; |
||||
position: absolute; |
||||
bottom: 64px; |
||||
margin: 0; |
||||
visibility: hidden; |
||||
li { |
||||
margin-bottom: 15px; |
||||
} |
||||
a.btn-floating { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.fab-backdrop { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -1; |
||||
width: $button-floating-size; |
||||
height: $button-floating-size; |
||||
background-color: $button-floating-background; |
||||
border-radius: $button-floating-radius; |
||||
transform: scale(0); |
||||
} |
||||
} |
||||
|
||||
// Flat button |
||||
.btn-flat { |
||||
box-shadow: none; |
||||
background-color: transparent; |
||||
color: $button-flat-color; |
||||
cursor: pointer; |
||||
transition: background-color .2s; |
||||
&:focus, |
||||
&:hover { |
||||
box-shadow: none; |
||||
} |
||||
&:focus { |
||||
background-color: rgba(0, 0, 0, .1); |
||||
} |
||||
&.disabled, |
||||
&.btn-flat[disabled] { |
||||
background-color: transparent !important; |
||||
color: $button-flat-disabled-color !important; |
||||
cursor: default; |
||||
} |
||||
} |
||||
|
||||
// Large button |
||||
.btn-large { |
||||
@extend .btn; |
||||
height: $button-large-height; |
||||
line-height: $button-large-height; |
||||
font-size: $button-large-font-size; |
||||
padding: 0 28px; |
||||
|
||||
i { |
||||
font-size: $button-large-icon-font-size; |
||||
} |
||||
} |
||||
|
||||
// Small button |
||||
.btn-small { |
||||
@extend .btn; |
||||
height: $button-small-height; |
||||
line-height: $button-small-height; |
||||
font-size: $button-small-font-size; |
||||
i { |
||||
font-size: $button-small-icon-font-size; |
||||
} |
||||
} |
||||
|
||||
// Block button |
||||
.btn-block { |
||||
display: block; |
||||
} |
||||
@ -1,195 +0,0 @@
@@ -1,195 +0,0 @@
|
||||
|
||||
|
||||
.card-panel { |
||||
transition: box-shadow .25s; |
||||
padding: $card-padding; |
||||
margin: $element-top-margin 0 $element-bottom-margin 0; |
||||
border-radius: 2px; |
||||
@extend .z-depth-1; |
||||
background-color: $card-bg-color; |
||||
} |
||||
|
||||
.card { |
||||
position: relative; |
||||
margin: $element-top-margin 0 $element-bottom-margin 0; |
||||
background-color: $card-bg-color; |
||||
transition: box-shadow .25s; |
||||
border-radius: 2px; |
||||
@extend .z-depth-1; |
||||
|
||||
|
||||
.card-title { |
||||
font-size: 24px; |
||||
font-weight: 300; |
||||
&.activator { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
// Card Sizes |
||||
&.small, &.medium, &.large { |
||||
position: relative; |
||||
|
||||
.card-image { |
||||
max-height: 60%; |
||||
overflow: hidden; |
||||
} |
||||
.card-image + .card-content { |
||||
max-height: 40%; |
||||
} |
||||
.card-content { |
||||
max-height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.card-action { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
} |
||||
|
||||
&.small { |
||||
height: 300px; |
||||
} |
||||
|
||||
&.medium { |
||||
height: 400px; |
||||
} |
||||
|
||||
&.large { |
||||
height: 500px; |
||||
} |
||||
|
||||
// Horizontal Cards |
||||
&.horizontal { |
||||
&.small, &.medium, &.large { |
||||
.card-image { |
||||
height: 100%; |
||||
max-height: none; |
||||
overflow: visible; |
||||
|
||||
img { |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
display: flex; |
||||
|
||||
.card-image { |
||||
max-width: 50%; |
||||
img { |
||||
border-radius: 2px 0 0 2px; |
||||
max-width: 100%; |
||||
width: auto; |
||||
} |
||||
} |
||||
|
||||
.card-stacked { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: 1; |
||||
position: relative; |
||||
|
||||
.card-content { |
||||
flex-grow: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Sticky Action Section |
||||
&.sticky-action { |
||||
.card-action { |
||||
z-index: 2; |
||||
} |
||||
|
||||
.card-reveal { |
||||
z-index: 1; |
||||
padding-bottom: 64px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.card-image { |
||||
position: relative; |
||||
|
||||
// Image background for content |
||||
img { |
||||
display: block; |
||||
border-radius: 2px 2px 0 0; |
||||
position: relative; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.card-title { |
||||
color: $card-bg-color; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
max-width: 100%; |
||||
padding: $card-padding; |
||||
} |
||||
} |
||||
|
||||
.card-content { |
||||
padding: $card-padding; |
||||
border-radius: 0 0 2px 2px; |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
.card-title { |
||||
display: block; |
||||
line-height: 32px; |
||||
margin-bottom: 8px; |
||||
|
||||
i { |
||||
line-height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.card-action { |
||||
&:last-child { |
||||
border-radius: 0 0 2px 2px; |
||||
} |
||||
background-color: inherit; // Use inherit to inherit color classes |
||||
border-top: 1px solid rgba(160,160,160,.2); |
||||
position: relative; |
||||
padding: 16px $card-padding; |
||||
|
||||
a:not(.btn):not(.btn-large):not(.btn-floating) { |
||||
color: $card-link-color; |
||||
margin-right: $card-padding; |
||||
transition: color .3s ease; |
||||
text-transform: uppercase; |
||||
|
||||
&:hover { color: $card-link-color-light; } |
||||
} |
||||
} |
||||
|
||||
.card-reveal { |
||||
padding: $card-padding; |
||||
position: absolute; |
||||
background-color: $card-bg-color; |
||||
width: 100%; |
||||
overflow-y: auto; |
||||
left: 0; |
||||
top: 100%; |
||||
height: 100%; |
||||
z-index: 3; |
||||
display: none; |
||||
|
||||
.card-title { |
||||
cursor: pointer; |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
@ -1,90 +0,0 @@
@@ -1,90 +0,0 @@
|
||||
.carousel { |
||||
&.carousel-slider { |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
.carousel-fixed-item { |
||||
&.with-indicators { |
||||
bottom: 68px; |
||||
} |
||||
|
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 20px; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.carousel-item { |
||||
width: 100%; |
||||
height: 100%; |
||||
min-height: $carousel-height; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
h2 { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
p { |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
overflow: hidden; |
||||
position: relative; |
||||
width: 100%; |
||||
height: $carousel-height; |
||||
perspective: 500px; |
||||
transform-style: preserve-3d; |
||||
transform-origin: 0% 50%; |
||||
|
||||
.carousel-item { |
||||
visibility: hidden; |
||||
width: $carousel-item-width; |
||||
height: $carousel-item-height; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
& > img { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.indicators { |
||||
position: absolute; |
||||
text-align: center; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: 0; |
||||
|
||||
.indicator-item { |
||||
&.active { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
display: inline-block; |
||||
position: relative; |
||||
cursor: pointer; |
||||
height: 8px; |
||||
width: 8px; |
||||
margin: 24px 4px; |
||||
background-color: rgba(255,255,255,.5); |
||||
|
||||
transition: background-color .3s; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
|
||||
// Materialbox compatibility |
||||
&.scrolling .carousel-item .materialboxed, |
||||
.carousel-item:not(.active) .materialboxed { |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
@ -1,90 +0,0 @@
@@ -1,90 +0,0 @@
|
||||
.chip { |
||||
&:focus { |
||||
outline: none; |
||||
background-color: $chip-selected-color; |
||||
color: #fff; |
||||
} |
||||
|
||||
display: inline-block; |
||||
height: 32px; |
||||
font-size: 13px; |
||||
font-weight: 500; |
||||
color: rgba(0,0,0,.6); |
||||
line-height: 32px; |
||||
padding: 0 12px; |
||||
border-radius: 16px; |
||||
background-color: $chip-bg-color; |
||||
margin-bottom: $chip-margin; |
||||
margin-right: $chip-margin; |
||||
|
||||
> img { |
||||
float: left; |
||||
margin: 0 8px 0 -12px; |
||||
height: 32px; |
||||
width: 32px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.close { |
||||
cursor: pointer; |
||||
float: right; |
||||
font-size: 16px; |
||||
line-height: 32px; |
||||
padding-left: 8px; |
||||
} |
||||
} |
||||
|
||||
.chips { |
||||
border: none; |
||||
border-bottom: 1px solid $chip-border-color; |
||||
box-shadow: none; |
||||
margin: $input-margin; |
||||
min-height: 45px; |
||||
outline: none; |
||||
transition: all .3s; |
||||
|
||||
&.focus { |
||||
border-bottom: 1px solid $chip-selected-color; |
||||
box-shadow: 0 1px 0 0 $chip-selected-color; |
||||
} |
||||
|
||||
&:hover { |
||||
cursor: text; |
||||
} |
||||
|
||||
.input { |
||||
background: none; |
||||
border: 0; |
||||
color: rgba(0,0,0,.6); |
||||
display: inline-block; |
||||
font-size: $input-font-size; |
||||
height: $input-height; |
||||
line-height: 32px; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0 !important; |
||||
width: 120px !important; |
||||
} |
||||
|
||||
.input:focus { |
||||
border: 0 !important; |
||||
box-shadow: none !important; |
||||
} |
||||
|
||||
// Autocomplete |
||||
.autocomplete-content { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
// Form prefix |
||||
.prefix ~ .chips { |
||||
margin-left: 3rem; |
||||
width: 92%; |
||||
width: calc(100% - 3rem); |
||||
} |
||||
.chips:empty ~ label { |
||||
font-size: 0.8rem; |
||||
transform: translateY(-140%); |
||||
} |
||||
@ -1,91 +0,0 @@
@@ -1,91 +0,0 @@
|
||||
.collapsible { |
||||
border-top: 1px solid $collapsible-border-color; |
||||
border-right: 1px solid $collapsible-border-color; |
||||
border-left: 1px solid $collapsible-border-color; |
||||
margin: $element-top-margin 0 $element-bottom-margin 0; |
||||
@extend .z-depth-1; |
||||
} |
||||
|
||||
.collapsible-header { |
||||
&:focus { |
||||
outline: 0 |
||||
} |
||||
|
||||
display: flex; |
||||
cursor: pointer; |
||||
-webkit-tap-highlight-color: transparent; |
||||
line-height: 1.5; |
||||
padding: 1rem; |
||||
background-color: $collapsible-header-color; |
||||
border-bottom: 1px solid $collapsible-border-color; |
||||
|
||||
i { |
||||
width: 2rem; |
||||
font-size: 1.6rem; |
||||
display: inline-block; |
||||
text-align: center; |
||||
margin-right: 1rem; |
||||
} |
||||
} |
||||
.keyboard-focused .collapsible-header:focus { |
||||
background-color: #eee; |
||||
} |
||||
|
||||
.collapsible-body { |
||||
display: none; |
||||
border-bottom: 1px solid $collapsible-border-color; |
||||
box-sizing: border-box; |
||||
padding: 2rem; |
||||
} |
||||
|
||||
// Sidenav collapsible styling |
||||
.sidenav, |
||||
.sidenav.fixed { |
||||
|
||||
.collapsible { |
||||
border: none; |
||||
box-shadow: none; |
||||
|
||||
li { padding: 0; } |
||||
} |
||||
|
||||
.collapsible-header { |
||||
background-color: transparent; |
||||
border: none; |
||||
line-height: inherit; |
||||
height: inherit; |
||||
padding: 0 $sidenav-padding; |
||||
|
||||
&:hover { background-color: rgba(0,0,0,.05); } |
||||
i { line-height: inherit; } |
||||
} |
||||
|
||||
.collapsible-body { |
||||
border: 0; |
||||
background-color: $collapsible-header-color; |
||||
|
||||
li a { |
||||
padding: 0 (7.5px + $sidenav-padding) |
||||
0 (15px + $sidenav-padding); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// Popout Collapsible |
||||
|
||||
.collapsible.popout { |
||||
border: none; |
||||
box-shadow: none; |
||||
> li { |
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
||||
// transform: scaleX(.92); |
||||
margin: 0 24px; |
||||
transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940); |
||||
} |
||||
> li.active { |
||||
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); |
||||
margin: 16px 0; |
||||
// transform: scaleX(1); |
||||
} |
||||
} |
||||
@ -1,32 +0,0 @@
@@ -1,32 +0,0 @@
|
||||
// Color Classes |
||||
|
||||
@each $color_name, $color in $colors { |
||||
@each $color_type, $color_value in $color { |
||||
@if $color_type == "base" { |
||||
.#{$color_name} { |
||||
background-color: $color_value !important; |
||||
} |
||||
.#{$color_name}-text { |
||||
color: $color_value !important; |
||||
} |
||||
} |
||||
@else if $color_name != "shades" { |
||||
.#{$color_name}.#{$color_type} { |
||||
background-color: $color_value !important; |
||||
} |
||||
.#{$color_name}-text.text-#{$color_type} { |
||||
color: $color_value !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Shade classes |
||||
@each $color, $color_value in $shades { |
||||
.#{$color} { |
||||
background-color: $color_value !important; |
||||
} |
||||
.#{$color}-text { |
||||
color: $color_value !important; |
||||
} |
||||
} |
||||
@ -1,370 +0,0 @@
@@ -1,370 +0,0 @@
|
||||
// Google Color Palette defined: http://www.google.com/design/spec/style/color.html |
||||
|
||||
$materialize-red: ( |
||||
"base": #e51c23, |
||||
"lighten-5": #fdeaeb, |
||||
"lighten-4": #f8c1c3, |
||||
"lighten-3": #f3989b, |
||||
"lighten-2": #ee6e73, |
||||
"lighten-1": #ea454b, |
||||
"darken-1": #d0181e, |
||||
"darken-2": #b9151b, |
||||
"darken-3": #a21318, |
||||
"darken-4": #8b1014, |
||||
); |
||||
|
||||
$red: ( |
||||
"base": #F44336, |
||||
"lighten-5": #FFEBEE, |
||||
"lighten-4": #FFCDD2, |
||||
"lighten-3": #EF9A9A, |
||||
"lighten-2": #E57373, |
||||
"lighten-1": #EF5350, |
||||
"darken-1": #E53935, |
||||
"darken-2": #D32F2F, |
||||
"darken-3": #C62828, |
||||
"darken-4": #B71C1C, |
||||
"accent-1": #FF8A80, |
||||
"accent-2": #FF5252, |
||||
"accent-3": #FF1744, |
||||
"accent-4": #D50000 |
||||
); |
||||
|
||||
$pink: ( |
||||
"base": #e91e63, |
||||
"lighten-5": #fce4ec, |
||||
"lighten-4": #f8bbd0, |
||||
"lighten-3": #f48fb1, |
||||
"lighten-2": #f06292, |
||||
"lighten-1": #ec407a, |
||||
"darken-1": #d81b60, |
||||
"darken-2": #c2185b, |
||||
"darken-3": #ad1457, |
||||
"darken-4": #880e4f, |
||||
"accent-1": #ff80ab, |
||||
"accent-2": #ff4081, |
||||
"accent-3": #f50057, |
||||
"accent-4": #c51162 |
||||
); |
||||
|
||||
$purple: ( |
||||
"base": #9c27b0, |
||||
"lighten-5": #f3e5f5, |
||||
"lighten-4": #e1bee7, |
||||
"lighten-3": #ce93d8, |
||||
"lighten-2": #ba68c8, |
||||
"lighten-1": #ab47bc, |
||||
"darken-1": #8e24aa, |
||||
"darken-2": #7b1fa2, |
||||
"darken-3": #6a1b9a, |
||||
"darken-4": #4a148c, |
||||
"accent-1": #ea80fc, |
||||
"accent-2": #e040fb, |
||||
"accent-3": #d500f9, |
||||
"accent-4": #aa00ff |
||||
); |
||||
|
||||
$deep-purple: ( |
||||
"base": #673ab7, |
||||
"lighten-5": #ede7f6, |
||||
"lighten-4": #d1c4e9, |
||||
"lighten-3": #b39ddb, |
||||
"lighten-2": #9575cd, |
||||
"lighten-1": #7e57c2, |
||||
"darken-1": #5e35b1, |
||||
"darken-2": #512da8, |
||||
"darken-3": #4527a0, |
||||
"darken-4": #311b92, |
||||
"accent-1": #b388ff, |
||||
"accent-2": #7c4dff, |
||||
"accent-3": #651fff, |
||||
"accent-4": #6200ea |
||||
); |
||||
|
||||
$indigo: ( |
||||
"base": #3f51b5, |
||||
"lighten-5": #e8eaf6, |
||||
"lighten-4": #c5cae9, |
||||
"lighten-3": #9fa8da, |
||||
"lighten-2": #7986cb, |
||||
"lighten-1": #5c6bc0, |
||||
"darken-1": #3949ab, |
||||
"darken-2": #303f9f, |
||||
"darken-3": #283593, |
||||
"darken-4": #1a237e, |
||||
"accent-1": #8c9eff, |
||||
"accent-2": #536dfe, |
||||
"accent-3": #3d5afe, |
||||
"accent-4": #304ffe |
||||
); |
||||
|
||||
$blue: ( |
||||
"base": #2196F3, |
||||
"lighten-5": #E3F2FD, |
||||
"lighten-4": #BBDEFB, |
||||
"lighten-3": #90CAF9, |
||||
"lighten-2": #64B5F6, |
||||
"lighten-1": #42A5F5, |
||||
"darken-1": #1E88E5, |
||||
"darken-2": #1976D2, |
||||
"darken-3": #1565C0, |
||||
"darken-4": #0D47A1, |
||||
"accent-1": #82B1FF, |
||||
"accent-2": #448AFF, |
||||
"accent-3": #2979FF, |
||||
"accent-4": #2962FF |
||||
); |
||||
|
||||
$light-blue: ( |
||||
"base": #03a9f4, |
||||
"lighten-5": #e1f5fe, |
||||
"lighten-4": #b3e5fc, |
||||
"lighten-3": #81d4fa, |
||||
"lighten-2": #4fc3f7, |
||||
"lighten-1": #29b6f6, |
||||
"darken-1": #039be5, |
||||
"darken-2": #0288d1, |
||||
"darken-3": #0277bd, |
||||
"darken-4": #01579b, |
||||
"accent-1": #80d8ff, |
||||
"accent-2": #40c4ff, |
||||
"accent-3": #00b0ff, |
||||
"accent-4": #0091ea |
||||
); |
||||
|
||||
$cyan: ( |
||||
"base": #00bcd4, |
||||
"lighten-5": #e0f7fa, |
||||
"lighten-4": #b2ebf2, |
||||
"lighten-3": #80deea, |
||||
"lighten-2": #4dd0e1, |
||||
"lighten-1": #26c6da, |
||||
"darken-1": #00acc1, |
||||
"darken-2": #0097a7, |
||||
"darken-3": #00838f, |
||||
"darken-4": #006064, |
||||
"accent-1": #84ffff, |
||||
"accent-2": #18ffff, |
||||
"accent-3": #00e5ff, |
||||
"accent-4": #00b8d4 |
||||
); |
||||
|
||||
$teal: ( |
||||
"base": #009688, |
||||
"lighten-5": #e0f2f1, |
||||
"lighten-4": #b2dfdb, |
||||
"lighten-3": #80cbc4, |
||||
"lighten-2": #4db6ac, |
||||
"lighten-1": #26a69a, |
||||
"darken-1": #00897b, |
||||
"darken-2": #00796b, |
||||
"darken-3": #00695c, |
||||
"darken-4": #004d40, |
||||
"accent-1": #a7ffeb, |
||||
"accent-2": #64ffda, |
||||
"accent-3": #1de9b6, |
||||
"accent-4": #00bfa5 |
||||
); |
||||
|
||||
$green: ( |
||||
"base": #4CAF50, |
||||
"lighten-5": #E8F5E9, |
||||
"lighten-4": #C8E6C9, |
||||
"lighten-3": #A5D6A7, |
||||
"lighten-2": #81C784, |
||||
"lighten-1": #66BB6A, |
||||
"darken-1": #43A047, |
||||
"darken-2": #388E3C, |
||||
"darken-3": #2E7D32, |
||||
"darken-4": #1B5E20, |
||||
"accent-1": #B9F6CA, |
||||
"accent-2": #69F0AE, |
||||
"accent-3": #00E676, |
||||
"accent-4": #00C853 |
||||
); |
||||
|
||||
$light-green: ( |
||||
"base": #8bc34a, |
||||
"lighten-5": #f1f8e9, |
||||
"lighten-4": #dcedc8, |
||||
"lighten-3": #c5e1a5, |
||||
"lighten-2": #aed581, |
||||
"lighten-1": #9ccc65, |
||||
"darken-1": #7cb342, |
||||
"darken-2": #689f38, |
||||
"darken-3": #558b2f, |
||||
"darken-4": #33691e, |
||||
"accent-1": #ccff90, |
||||
"accent-2": #b2ff59, |
||||
"accent-3": #76ff03, |
||||
"accent-4": #64dd17 |
||||
); |
||||
|
||||
$lime: ( |
||||
"base": #cddc39, |
||||
"lighten-5": #f9fbe7, |
||||
"lighten-4": #f0f4c3, |
||||
"lighten-3": #e6ee9c, |
||||
"lighten-2": #dce775, |
||||
"lighten-1": #d4e157, |
||||
"darken-1": #c0ca33, |
||||
"darken-2": #afb42b, |
||||
"darken-3": #9e9d24, |
||||
"darken-4": #827717, |
||||
"accent-1": #f4ff81, |
||||
"accent-2": #eeff41, |
||||
"accent-3": #c6ff00, |
||||
"accent-4": #aeea00 |
||||
); |
||||
|
||||
$yellow: ( |
||||
"base": #ffeb3b, |
||||
"lighten-5": #fffde7, |
||||
"lighten-4": #fff9c4, |
||||
"lighten-3": #fff59d, |
||||
"lighten-2": #fff176, |
||||
"lighten-1": #ffee58, |
||||
"darken-1": #fdd835, |
||||
"darken-2": #fbc02d, |
||||
"darken-3": #f9a825, |
||||
"darken-4": #f57f17, |
||||
"accent-1": #ffff8d, |
||||
"accent-2": #ffff00, |
||||
"accent-3": #ffea00, |
||||
"accent-4": #ffd600 |
||||
); |
||||
|
||||
$amber: ( |
||||
"base": #ffc107, |
||||
"lighten-5": #fff8e1, |
||||
"lighten-4": #ffecb3, |
||||
"lighten-3": #ffe082, |
||||
"lighten-2": #ffd54f, |
||||
"lighten-1": #ffca28, |
||||
"darken-1": #ffb300, |
||||
"darken-2": #ffa000, |
||||
"darken-3": #ff8f00, |
||||
"darken-4": #ff6f00, |
||||
"accent-1": #ffe57f, |
||||
"accent-2": #ffd740, |
||||
"accent-3": #ffc400, |
||||
"accent-4": #ffab00 |
||||
); |
||||
|
||||
$orange: ( |
||||
"base": #ff9800, |
||||
"lighten-5": #fff3e0, |
||||
"lighten-4": #ffe0b2, |
||||
"lighten-3": #ffcc80, |
||||
"lighten-2": #ffb74d, |
||||
"lighten-1": #ffa726, |
||||
"darken-1": #fb8c00, |
||||
"darken-2": #f57c00, |
||||
"darken-3": #ef6c00, |
||||
"darken-4": #e65100, |
||||
"accent-1": #ffd180, |
||||
"accent-2": #ffab40, |
||||
"accent-3": #ff9100, |
||||
"accent-4": #ff6d00 |
||||
); |
||||
|
||||
$deep-orange: ( |
||||
"base": #ff5722, |
||||
"lighten-5": #fbe9e7, |
||||
"lighten-4": #ffccbc, |
||||
"lighten-3": #ffab91, |
||||
"lighten-2": #ff8a65, |
||||
"lighten-1": #ff7043, |
||||
"darken-1": #f4511e, |
||||
"darken-2": #e64a19, |
||||
"darken-3": #d84315, |
||||
"darken-4": #bf360c, |
||||
"accent-1": #ff9e80, |
||||
"accent-2": #ff6e40, |
||||
"accent-3": #ff3d00, |
||||
"accent-4": #dd2c00 |
||||
); |
||||
|
||||
$brown: ( |
||||
"base": #795548, |
||||
"lighten-5": #efebe9, |
||||
"lighten-4": #d7ccc8, |
||||
"lighten-3": #bcaaa4, |
||||
"lighten-2": #a1887f, |
||||
"lighten-1": #8d6e63, |
||||
"darken-1": #6d4c41, |
||||
"darken-2": #5d4037, |
||||
"darken-3": #4e342e, |
||||
"darken-4": #3e2723 |
||||
); |
||||
|
||||
$blue-grey: ( |
||||
"base": #607d8b, |
||||
"lighten-5": #eceff1, |
||||
"lighten-4": #cfd8dc, |
||||
"lighten-3": #b0bec5, |
||||
"lighten-2": #90a4ae, |
||||
"lighten-1": #78909c, |
||||
"darken-1": #546e7a, |
||||
"darken-2": #455a64, |
||||
"darken-3": #37474f, |
||||
"darken-4": #263238 |
||||
); |
||||
|
||||
$grey: ( |
||||
"base": #9e9e9e, |
||||
"lighten-5": #fafafa, |
||||
"lighten-4": #f5f5f5, |
||||
"lighten-3": #eeeeee, |
||||
"lighten-2": #e0e0e0, |
||||
"lighten-1": #bdbdbd, |
||||
"darken-1": #757575, |
||||
"darken-2": #616161, |
||||
"darken-3": #424242, |
||||
"darken-4": #212121 |
||||
); |
||||
|
||||
$shades: ( |
||||
"black": #000000, |
||||
"white": #FFFFFF, |
||||
"transparent": transparent |
||||
); |
||||
|
||||
$colors: ( |
||||
"materialize-red": $materialize-red, |
||||
"red": $red, |
||||
"pink": $pink, |
||||
"purple": $purple, |
||||
"deep-purple": $deep-purple, |
||||
"indigo": $indigo, |
||||
"blue": $blue, |
||||
"light-blue": $light-blue, |
||||
"cyan": $cyan, |
||||
"teal": $teal, |
||||
"green": $green, |
||||
"light-green": $light-green, |
||||
"lime": $lime, |
||||
"yellow": $yellow, |
||||
"amber": $amber, |
||||
"orange": $orange, |
||||
"deep-orange": $deep-orange, |
||||
"brown": $brown, |
||||
"blue-grey": $blue-grey, |
||||
"grey": $grey, |
||||
"shades": $shades |
||||
) !default; |
||||
|
||||
|
||||
// usage: color("name_of_color", "type_of_color") |
||||
// to avoid to repeating map-get($colors, ...) |
||||
|
||||
@function color($color, $type) { |
||||
@if map-has-key($colors, $color) { |
||||
$curr_color: map-get($colors, $color); |
||||
@if map-has-key($curr_color, $type) { |
||||
@return map-get($curr_color, $type); |
||||
} |
||||
} |
||||
@warn "Unknown `#{$color}` - `#{$type}` in $colors."; |
||||
@return null; |
||||
} |
||||
@ -1,191 +0,0 @@
@@ -1,191 +0,0 @@
|
||||
/* Modal */ |
||||
.datepicker-modal { |
||||
max-width: 325px; |
||||
min-width: 300px; |
||||
max-height: none; |
||||
} |
||||
|
||||
.datepicker-container.modal-content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0; |
||||
} |
||||
|
||||
.datepicker-controls { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 280px; |
||||
margin: 0 auto; |
||||
|
||||
.selects-container { |
||||
display: flex; |
||||
} |
||||
|
||||
.select-wrapper { |
||||
input { |
||||
&:focus { |
||||
border-bottom: none; |
||||
} |
||||
border-bottom: none; |
||||
text-align: center; |
||||
margin: 0; |
||||
} |
||||
|
||||
.caret { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.select-year input { |
||||
width: 50px; |
||||
} |
||||
|
||||
.select-month input { |
||||
width: 70px; |
||||
} |
||||
} |
||||
|
||||
.month-prev, .month-next { |
||||
margin-top: 4px; |
||||
cursor: pointer; |
||||
background-color: transparent; |
||||
border: none; |
||||
} |
||||
|
||||
|
||||
/* Date Display */ |
||||
.datepicker-date-display { |
||||
flex: 1 auto; |
||||
background-color: $secondary-color; |
||||
color: #fff; |
||||
padding: 20px 22px; |
||||
font-weight: 500; |
||||
|
||||
.year-text { |
||||
display: block; |
||||
font-size: 1.5rem; |
||||
line-height: 25px; |
||||
color: $datepicker-year; |
||||
} |
||||
|
||||
.date-text { |
||||
display: block; |
||||
font-size: 2.8rem; |
||||
line-height: 47px; |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* Calendar */ |
||||
.datepicker-calendar-container { |
||||
flex: 2.5 auto; |
||||
} |
||||
|
||||
.datepicker-table { |
||||
width: 280px; |
||||
font-size: 1rem; |
||||
margin: 0 auto; |
||||
|
||||
thead { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
th { |
||||
padding: 10px 5px; |
||||
text-align: center; |
||||
} |
||||
|
||||
tr { |
||||
border: none; |
||||
} |
||||
|
||||
abbr { |
||||
text-decoration: none; |
||||
color: $datepicker-calendar-header-color; |
||||
} |
||||
|
||||
td { |
||||
&.is-today { |
||||
color: $secondary-color; |
||||
} |
||||
|
||||
&.is-selected { |
||||
background-color: $secondary-color; |
||||
color: #fff; |
||||
} |
||||
|
||||
&.is-outside-current-month, |
||||
&.is-disabled { |
||||
color: $datepicker-disabled-day-color; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
border-radius: 50%; |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
.datepicker-day-button { |
||||
&:focus { |
||||
background-color: $datepicker-day-focus; |
||||
} |
||||
|
||||
background-color: transparent; |
||||
border: none; |
||||
line-height: 38px; |
||||
display: block; |
||||
width: 100%; |
||||
border-radius: 50%; |
||||
padding: 0 5px; |
||||
cursor: pointer; |
||||
color: inherit; |
||||
} |
||||
|
||||
|
||||
/* Footer */ |
||||
.datepicker-footer { |
||||
width: 280px; |
||||
margin: 0 auto; |
||||
padding-bottom: 5px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.datepicker-cancel, |
||||
.datepicker-clear, |
||||
.datepicker-today, |
||||
.datepicker-done { |
||||
color: $secondary-color; |
||||
padding: 0 1rem; |
||||
} |
||||
|
||||
.datepicker-clear { |
||||
color: $error-color; |
||||
} |
||||
|
||||
|
||||
/* Media Queries */ |
||||
@media #{$medium-and-up} { |
||||
.datepicker-modal { |
||||
max-width: 625px; |
||||
} |
||||
|
||||
.datepicker-container.modal-content { |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.datepicker-date-display { |
||||
flex: 0 1 270px; |
||||
} |
||||
|
||||
.datepicker-controls, |
||||
.datepicker-table, |
||||
.datepicker-footer { |
||||
width: 320px; |
||||
} |
||||
|
||||
.datepicker-day-button { |
||||
line-height: 44px; |
||||
} |
||||
} |
||||
@ -1,85 +0,0 @@
@@ -1,85 +0,0 @@
|
||||
.dropdown-content { |
||||
&:focus { |
||||
outline: 0; |
||||
} |
||||
|
||||
|
||||
@extend .z-depth-1; |
||||
background-color: $dropdown-bg-color; |
||||
margin: 0; |
||||
display: none; |
||||
min-width: 100px; |
||||
overflow-y: auto; |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 9999; // TODO: Check if this doesn't break other things |
||||
transform-origin: 0 0; |
||||
|
||||
|
||||
li { |
||||
&:hover, &.active { |
||||
background-color: $dropdown-hover-bg-color; |
||||
} |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
&.divider { |
||||
min-height: 0; |
||||
height: 1px; |
||||
} |
||||
|
||||
& > a, & > span { |
||||
font-size: 16px; |
||||
color: $dropdown-color; |
||||
display: block; |
||||
line-height: 22px; |
||||
padding: (($dropdown-item-height - 22) / 2) 16px; |
||||
} |
||||
|
||||
& > span > label { |
||||
top: 1px; |
||||
left: 0; |
||||
height: 18px; |
||||
} |
||||
|
||||
// Icon alignment override |
||||
& > a > i { |
||||
height: inherit; |
||||
line-height: inherit; |
||||
float: left; |
||||
margin: 0 24px 0 0; |
||||
width: 24px; |
||||
} |
||||
|
||||
|
||||
clear: both; |
||||
color: $off-black; |
||||
cursor: pointer; |
||||
min-height: $dropdown-item-height; |
||||
line-height: 1.5rem; |
||||
width: 100%; |
||||
text-align: left; |
||||
} |
||||
} |
||||
|
||||
body.keyboard-focused { |
||||
.dropdown-content li:focus { |
||||
background-color: darken($dropdown-hover-bg-color, 8%); |
||||
} |
||||
} |
||||
|
||||
// Input field specificity bugfix |
||||
.input-field.col .dropdown-content [type="checkbox"] + label { |
||||
top: 1px; |
||||
left: 0; |
||||
height: 18px; |
||||
transform: none; |
||||
} |
||||
|
||||
.dropdown-trigger { |
||||
cursor: pointer; |
||||
} |
||||
@ -1,156 +0,0 @@
@@ -1,156 +0,0 @@
|
||||
.container { |
||||
margin: 0 auto; |
||||
max-width: 1280px; |
||||
width: 90%; |
||||
} |
||||
@media #{$medium-and-up} { |
||||
.container { |
||||
width: 85%; |
||||
} |
||||
} |
||||
@media #{$large-and-up} { |
||||
.container { |
||||
width: 70%; |
||||
} |
||||
} |
||||
.col .row { |
||||
margin-left: (-1 * $gutter-width / 2); |
||||
margin-right: (-1 * $gutter-width / 2); |
||||
} |
||||
|
||||
.section { |
||||
padding-top: 1rem; |
||||
padding-bottom: 1rem; |
||||
|
||||
&.no-pad { |
||||
padding: 0; |
||||
} |
||||
&.no-pad-bot { |
||||
padding-bottom: 0; |
||||
} |
||||
&.no-pad-top { |
||||
padding-top: 0; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Mixins to eliminate code repitition |
||||
@mixin reset-offset { |
||||
margin-left: auto; |
||||
left: auto; |
||||
right: auto; |
||||
} |
||||
@mixin grid-classes($size, $i, $perc) { |
||||
&.offset-#{$size}#{$i} { |
||||
margin-left: $perc; |
||||
} |
||||
&.pull-#{$size}#{$i} { |
||||
right: $perc; |
||||
} |
||||
&.push-#{$size}#{$i} { |
||||
left: $perc; |
||||
} |
||||
} |
||||
|
||||
|
||||
.row { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 20px; |
||||
|
||||
// Clear floating children |
||||
&:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
|
||||
.col { |
||||
float: left; |
||||
box-sizing: border-box; |
||||
padding: 0 $gutter-width / 2; |
||||
min-height: 1px; |
||||
|
||||
&[class*="push-"], |
||||
&[class*="pull-"] { |
||||
position: relative; |
||||
} |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
&.s#{$i} { |
||||
width: $perc; |
||||
@include reset-offset; |
||||
} |
||||
$i: $i + 1; |
||||
} |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
@include grid-classes("s", $i, $perc); |
||||
$i: $i + 1; |
||||
} |
||||
|
||||
@media #{$medium-and-up} { |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
&.m#{$i} { |
||||
width: $perc; |
||||
@include reset-offset; |
||||
} |
||||
$i: $i + 1 |
||||
} |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
@include grid-classes("m", $i, $perc); |
||||
$i: $i + 1; |
||||
} |
||||
} |
||||
|
||||
@media #{$large-and-up} { |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
&.l#{$i} { |
||||
width: $perc; |
||||
@include reset-offset; |
||||
} |
||||
$i: $i + 1; |
||||
} |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
@include grid-classes("l", $i, $perc); |
||||
$i: $i + 1; |
||||
} |
||||
} |
||||
|
||||
@media #{$extra-large-and-up} { |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
&.xl#{$i} { |
||||
width: $perc; |
||||
@include reset-offset; |
||||
} |
||||
$i: $i + 1; |
||||
} |
||||
|
||||
$i: 1; |
||||
@while $i <= $num-cols { |
||||
$perc: unquote((100 / ($num-cols / $i)) + "%"); |
||||
@include grid-classes("xl", $i, $perc); |
||||
$i: $i + 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,5 +0,0 @@
@@ -1,5 +0,0 @@
|
||||
/* This is needed for some mobile phones to display the Google Icon font properly */ |
||||
.material-icons { |
||||
text-rendering: optimizeLegibility; |
||||
font-feature-settings: 'liga'; |
||||
} |
||||
@ -1,43 +0,0 @@
@@ -1,43 +0,0 @@
|
||||
.materialboxed { |
||||
&:hover { |
||||
&:not(.active) { |
||||
opacity: .8; |
||||
} |
||||
} |
||||
|
||||
display: block; |
||||
cursor: zoom-in; |
||||
position: relative; |
||||
transition: opacity .4s; |
||||
-webkit-backface-visibility: hidden; |
||||
|
||||
&.active { |
||||
cursor: zoom-out; |
||||
} |
||||
} |
||||
|
||||
#materialbox-overlay { |
||||
position:fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
background-color: #292929; |
||||
z-index: 1000; |
||||
will-change: opacity; |
||||
} |
||||
|
||||
.materialbox-caption { |
||||
position: fixed; |
||||
display: none; |
||||
color: #fff; |
||||
line-height: 50px; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
padding: 0% 15%; |
||||
height: 50px; |
||||
z-index: 1000; |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
@ -1,94 +0,0 @@
@@ -1,94 +0,0 @@
|
||||
.modal { |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
@extend .z-depth-5; |
||||
|
||||
display: none; |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
background-color: #fafafa; |
||||
padding: 0; |
||||
max-height: 70%; |
||||
width: 55%; |
||||
margin: auto; |
||||
overflow-y: auto; |
||||
|
||||
border-radius: 2px; |
||||
will-change: top, opacity; |
||||
|
||||
@media #{$medium-and-down} { |
||||
width: 80%; |
||||
} |
||||
|
||||
h1,h2,h3,h4 { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.modal-content { |
||||
padding: 24px; |
||||
} |
||||
.modal-close { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.modal-footer { |
||||
border-radius: 0 0 2px 2px; |
||||
background-color: #fafafa; |
||||
padding: 4px 6px; |
||||
height: 56px; |
||||
width: 100%; |
||||
text-align: right; |
||||
|
||||
.btn, .btn-flat { |
||||
margin: 6px 0; |
||||
} |
||||
} |
||||
} |
||||
.modal-overlay { |
||||
position: fixed; |
||||
z-index: 999; |
||||
top: -25%; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
height: 125%; |
||||
width: 100%; |
||||
background: #000; |
||||
display: none; |
||||
|
||||
will-change: opacity; |
||||
} |
||||
|
||||
// Modal with fixed action footer |
||||
.modal.modal-fixed-footer { |
||||
padding: 0; |
||||
height: 70%; |
||||
|
||||
.modal-content { |
||||
position: absolute; |
||||
height: calc(100% - 56px); |
||||
max-height: 100%; |
||||
width: 100%; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.modal-footer { |
||||
border-top: 1px solid rgba(0,0,0,.1); |
||||
position: absolute; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
|
||||
// Modal Bottom Sheet Style |
||||
.modal.bottom-sheet { |
||||
top: auto; |
||||
bottom: -100%; |
||||
margin: 0; |
||||
width: 100%; |
||||
max-height: 45%; |
||||
border-radius: 0; |
||||
will-change: bottom, opacity; |
||||
} |
||||
@ -1,208 +0,0 @@
@@ -1,208 +0,0 @@
|
||||
nav { |
||||
&.nav-extended { |
||||
height: auto; |
||||
|
||||
.nav-wrapper { |
||||
min-height: $navbar-height-mobile; |
||||
height: auto; |
||||
} |
||||
|
||||
.nav-content { |
||||
position: relative; |
||||
line-height: normal; |
||||
} |
||||
} |
||||
|
||||
color: $navbar-font-color; |
||||
@extend .z-depth-1; |
||||
background-color: $primary-color; |
||||
width: 100%; |
||||
height: $navbar-height-mobile; |
||||
line-height: $navbar-line-height-mobile; |
||||
|
||||
a { color: $navbar-font-color; } |
||||
|
||||
i, |
||||
[class^="mdi-"], [class*="mdi-"], |
||||
i.material-icons { |
||||
display: block; |
||||
font-size: 24px; |
||||
height: $navbar-height-mobile; |
||||
line-height: $navbar-line-height-mobile; |
||||
} |
||||
|
||||
.nav-wrapper { |
||||
position: relative; |
||||
height: 100%; |
||||
} |
||||
|
||||
@media #{$large-and-up} { |
||||
a.sidenav-trigger { display: none; } |
||||
} |
||||
|
||||
|
||||
// Collapse button |
||||
.sidenav-trigger { |
||||
float: left; |
||||
position: relative; |
||||
z-index: 1; |
||||
height: $navbar-height-mobile; |
||||
margin: 0 18px; |
||||
|
||||
i { |
||||
height: $navbar-height-mobile; |
||||
line-height: $navbar-line-height-mobile; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Logo |
||||
.brand-logo { |
||||
position: absolute; |
||||
color: $navbar-font-color; |
||||
display: inline-block; |
||||
font-size: $navbar-brand-font-size; |
||||
padding: 0; |
||||
|
||||
&.center { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
|
||||
@media #{$medium-and-down} { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
|
||||
&.left, &.right { |
||||
padding: 0; |
||||
transform: none; |
||||
} |
||||
|
||||
&.left { left: 0.5rem; } |
||||
&.right { |
||||
right: 0.5rem; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
&.right { |
||||
right: 0.5rem; |
||||
padding: 0; |
||||
} |
||||
|
||||
i, |
||||
[class^="mdi-"], [class*="mdi-"], |
||||
i.material-icons { |
||||
float: left; |
||||
margin-right: 15px; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Title |
||||
.nav-title { |
||||
display: inline-block; |
||||
font-size: 32px; |
||||
padding: 28px 0; |
||||
} |
||||
|
||||
|
||||
// Navbar Links |
||||
ul { |
||||
margin: 0; |
||||
|
||||
li { |
||||
transition: background-color .3s; |
||||
float: left; |
||||
padding: 0; |
||||
|
||||
&.active { |
||||
background-color: rgba(0,0,0,.1); |
||||
} |
||||
} |
||||
a { |
||||
transition: background-color .3s; |
||||
font-size: $navbar-font-size; |
||||
color: $navbar-font-color; |
||||
display: block; |
||||
padding: 0 15px; |
||||
cursor: pointer; |
||||
|
||||
&.btn, &.btn-large, &.btn-flat, &.btn-floating { |
||||
margin-top: -2px; |
||||
margin-left: 15px; |
||||
margin-right: 15px; |
||||
|
||||
& > .material-icons { |
||||
height: inherit; |
||||
line-height: inherit; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
background-color: rgba(0,0,0,.1); |
||||
} |
||||
} |
||||
|
||||
&.left { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
// Navbar Search Form |
||||
form { |
||||
height: 100%; |
||||
} |
||||
|
||||
.input-field { |
||||
margin: 0; |
||||
height: 100%; |
||||
|
||||
input { |
||||
height: 100%; |
||||
font-size: 1.2rem; |
||||
border: none; |
||||
padding-left: 2rem; |
||||
|
||||
&:focus, &[type=text]:valid, &[type=password]:valid, |
||||
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid { |
||||
border: none; |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
|
||||
label { |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
i { |
||||
color: rgba(255,255,255,.7); |
||||
transition: color .3s; |
||||
} |
||||
&.active i { color: $navbar-font-color; } |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Fixed Navbar |
||||
.navbar-fixed { |
||||
position: relative; |
||||
height: $navbar-height-mobile; |
||||
z-index: 997; |
||||
|
||||
nav { |
||||
position: fixed; |
||||
} |
||||
} |
||||
@media #{$medium-and-up} { |
||||
nav.nav-extended .nav-wrapper { |
||||
min-height: $navbar-height; |
||||
} |
||||
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { |
||||
height: $navbar-height; |
||||
line-height: $navbar-line-height; |
||||
} |
||||
.navbar-fixed { |
||||
height: $navbar-height; |
||||
} |
||||
} |
||||
@ -1,334 +0,0 @@
@@ -1,334 +0,0 @@
|
||||
/* |
||||
@license |
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
||||
Code distributed by Google as part of the polymer project is also |
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
||||
*/ |
||||
|
||||
/**************************/ |
||||
/* STYLES FOR THE SPINNER */ |
||||
/**************************/ |
||||
|
||||
/* |
||||
* Constants: |
||||
* STROKEWIDTH = 3px |
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up) |
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc) |
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc |
||||
* should rotate each time, 216 gives us a |
||||
* 5 pointed star shape (it's 360/5 * 3). |
||||
* For a 7 pointed star, we might do |
||||
* 360/7 * 3 = 154.286) |
||||
* CONTAINERWIDTH = 28px |
||||
* SHRINK_TIME = 400ms |
||||
*/ |
||||
|
||||
|
||||
.preloader-wrapper { |
||||
display: inline-block; |
||||
position: relative; |
||||
width: 50px; |
||||
height: 50px; |
||||
|
||||
&.small { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
|
||||
&.big { |
||||
width: 64px; |
||||
height: 64px; |
||||
} |
||||
|
||||
&.active { |
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
||||
-webkit-animation: container-rotate 1568ms linear infinite; |
||||
animation: container-rotate 1568ms linear infinite; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes container-rotate { |
||||
to { -webkit-transform: rotate(360deg) } |
||||
} |
||||
|
||||
@keyframes container-rotate { |
||||
to { transform: rotate(360deg) } |
||||
} |
||||
|
||||
.spinner-layer { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: 0; |
||||
border-color: $spinner-default-color; |
||||
} |
||||
|
||||
.spinner-blue, |
||||
.spinner-blue-only { |
||||
border-color: #4285f4; |
||||
} |
||||
|
||||
.spinner-red, |
||||
.spinner-red-only { |
||||
border-color: #db4437; |
||||
} |
||||
|
||||
.spinner-yellow, |
||||
.spinner-yellow-only { |
||||
border-color: #f4b400; |
||||
} |
||||
|
||||
.spinner-green, |
||||
.spinner-green-only { |
||||
border-color: #0f9d58; |
||||
} |
||||
|
||||
/** |
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
||||
* |
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't |
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using |
||||
* animation-delay and instead set custom keyframes for each color (as redundant as it |
||||
* seems). |
||||
* |
||||
* We write out each animation in full (instead of separating animation-name, |
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those |
||||
* specific properties properly, treats them as -webkit-animation, and overrides the |
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53. |
||||
*/ |
||||
.active .spinner-layer.spinner-blue { |
||||
/* durations: 4 * ARCTIME */ |
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
.active .spinner-layer.spinner-red { |
||||
/* durations: 4 * ARCTIME */ |
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
.active .spinner-layer.spinner-yellow { |
||||
/* durations: 4 * ARCTIME */ |
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
.active .spinner-layer.spinner-green { |
||||
/* durations: 4 * ARCTIME */ |
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
.active .spinner-layer, |
||||
.active .spinner-layer.spinner-blue-only, |
||||
.active .spinner-layer.spinner-red-only, |
||||
.active .spinner-layer.spinner-yellow-only, |
||||
.active .spinner-layer.spinner-green-only { |
||||
/* durations: 4 * ARCTIME */ |
||||
opacity: 1; |
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
@-webkit-keyframes fill-unfill-rotate { |
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ |
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ |
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ |
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ |
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ |
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ |
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ |
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ |
||||
} |
||||
|
||||
@keyframes fill-unfill-rotate { |
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ |
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ |
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ |
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ |
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ |
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ |
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ |
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ |
||||
} |
||||
|
||||
@-webkit-keyframes blue-fade-in-out { |
||||
from { opacity: 1; } |
||||
25% { opacity: 1; } |
||||
26% { opacity: 0; } |
||||
89% { opacity: 0; } |
||||
90% { opacity: 1; } |
||||
100% { opacity: 1; } |
||||
} |
||||
|
||||
@keyframes blue-fade-in-out { |
||||
from { opacity: 1; } |
||||
25% { opacity: 1; } |
||||
26% { opacity: 0; } |
||||
89% { opacity: 0; } |
||||
90% { opacity: 1; } |
||||
100% { opacity: 1; } |
||||
} |
||||
|
||||
@-webkit-keyframes red-fade-in-out { |
||||
from { opacity: 0; } |
||||
15% { opacity: 0; } |
||||
25% { opacity: 1; } |
||||
50% { opacity: 1; } |
||||
51% { opacity: 0; } |
||||
} |
||||
|
||||
@keyframes red-fade-in-out { |
||||
from { opacity: 0; } |
||||
15% { opacity: 0; } |
||||
25% { opacity: 1; } |
||||
50% { opacity: 1; } |
||||
51% { opacity: 0; } |
||||
} |
||||
|
||||
@-webkit-keyframes yellow-fade-in-out { |
||||
from { opacity: 0; } |
||||
40% { opacity: 0; } |
||||
50% { opacity: 1; } |
||||
75% { opacity: 1; } |
||||
76% { opacity: 0; } |
||||
} |
||||
|
||||
@keyframes yellow-fade-in-out { |
||||
from { opacity: 0; } |
||||
40% { opacity: 0; } |
||||
50% { opacity: 1; } |
||||
75% { opacity: 1; } |
||||
76% { opacity: 0; } |
||||
} |
||||
|
||||
@-webkit-keyframes green-fade-in-out { |
||||
from { opacity: 0; } |
||||
65% { opacity: 0; } |
||||
75% { opacity: 1; } |
||||
90% { opacity: 1; } |
||||
100% { opacity: 0; } |
||||
} |
||||
|
||||
@keyframes green-fade-in-out { |
||||
from { opacity: 0; } |
||||
65% { opacity: 0; } |
||||
75% { opacity: 1; } |
||||
90% { opacity: 1; } |
||||
100% { opacity: 0; } |
||||
} |
||||
|
||||
/** |
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the |
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). |
||||
*/ |
||||
.gap-patch { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 45%; |
||||
width: 10%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
border-color: inherit; |
||||
} |
||||
|
||||
.gap-patch .circle { |
||||
width: 1000%; |
||||
left: -450%; |
||||
} |
||||
|
||||
.circle-clipper { |
||||
display: inline-block; |
||||
position: relative; |
||||
width: 50%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
border-color: inherit; |
||||
|
||||
.circle { |
||||
width: 200%; |
||||
height: 100%; |
||||
border-width: 3px; /* STROKEWIDTH */ |
||||
border-style: solid; |
||||
border-color: inherit; |
||||
border-bottom-color: transparent !important; |
||||
border-radius: 50%; |
||||
-webkit-animation: none; |
||||
animation: none; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
&.left .circle { |
||||
left: 0; |
||||
border-right-color: transparent !important; |
||||
-webkit-transform: rotate(129deg); |
||||
transform: rotate(129deg); |
||||
} |
||||
&.right .circle { |
||||
left: -100%; |
||||
border-left-color: transparent !important; |
||||
-webkit-transform: rotate(-129deg); |
||||
transform: rotate(-129deg); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.active .circle-clipper.left .circle { |
||||
/* duration: ARCTIME */ |
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
.active .circle-clipper.right .circle { |
||||
/* duration: ARCTIME */ |
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
||||
} |
||||
|
||||
@-webkit-keyframes left-spin { |
||||
from { -webkit-transform: rotate(130deg); } |
||||
50% { -webkit-transform: rotate(-5deg); } |
||||
to { -webkit-transform: rotate(130deg); } |
||||
} |
||||
|
||||
@keyframes left-spin { |
||||
from { transform: rotate(130deg); } |
||||
50% { transform: rotate(-5deg); } |
||||
to { transform: rotate(130deg); } |
||||
} |
||||
|
||||
@-webkit-keyframes right-spin { |
||||
from { -webkit-transform: rotate(-130deg); } |
||||
50% { -webkit-transform: rotate(5deg); } |
||||
to { -webkit-transform: rotate(-130deg); } |
||||
} |
||||
|
||||
@keyframes right-spin { |
||||
from { transform: rotate(-130deg); } |
||||
50% { transform: rotate(5deg); } |
||||
to { transform: rotate(-130deg); } |
||||
} |
||||
|
||||
#spinnerContainer.cooldown { |
||||
/* duration: SHRINK_TIME */ |
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); |
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); |
||||
} |
||||
|
||||
@-webkit-keyframes fade-out { |
||||
from { opacity: 1; } |
||||
to { opacity: 0; } |
||||
} |
||||
|
||||
@keyframes fade-out { |
||||
from { opacity: 1; } |
||||
to { opacity: 0; } |
||||
} |
||||
@ -1,34 +0,0 @@
@@ -1,34 +0,0 @@
|
||||
.pulse { |
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
background-color: inherit; |
||||
border-radius: inherit; |
||||
transition: opacity .3s, transform .3s; |
||||
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; |
||||
z-index: -1; |
||||
} |
||||
|
||||
overflow: visible; |
||||
position: relative; |
||||
} |
||||
|
||||
@keyframes pulse-animation { |
||||
0% { |
||||
opacity: 1; |
||||
transform: scale(1); |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
transform: scale(1.5); |
||||
} |
||||
100% { |
||||
opacity: 0; |
||||
transform: scale(1.5); |
||||
} |
||||
} |
||||
@ -1,216 +0,0 @@
@@ -1,216 +0,0 @@
|
||||
.sidenav { |
||||
position: fixed; |
||||
width: $sidenav-width; |
||||
left: 0; |
||||
top: 0; |
||||
margin: 0; |
||||
transform: translateX(-100%); |
||||
height: 100%; |
||||
height: calc(100% + 60px); |
||||
height: -moz-calc(100%); //Temporary Firefox Fix |
||||
padding-bottom: 60px; |
||||
background-color: $sidenav-bg-color; |
||||
z-index: 999; |
||||
overflow-y: auto; |
||||
will-change: transform; |
||||
backface-visibility: hidden; |
||||
transform: translateX(-105%); |
||||
|
||||
@extend .z-depth-1; |
||||
|
||||
// Right Align |
||||
&.right-aligned { |
||||
right: 0; |
||||
transform: translateX(105%); |
||||
left: auto; |
||||
transform: translateX(100%); |
||||
} |
||||
|
||||
.collapsible { |
||||
margin: 0; |
||||
} |
||||
|
||||
|
||||
li { |
||||
float: none; |
||||
line-height: $sidenav-line-height; |
||||
|
||||
&.active { background-color: rgba(0,0,0,.05); } |
||||
} |
||||
|
||||
li > a { |
||||
color: $sidenav-font-color; |
||||
display: block; |
||||
font-size: $sidenav-font-size; |
||||
font-weight: 500; |
||||
height: $sidenav-item-height; |
||||
line-height: $sidenav-line-height; |
||||
padding: 0 ($sidenav-padding * 2); |
||||
|
||||
&:hover { background-color: rgba(0,0,0,.05);} |
||||
|
||||
&.btn, &.btn-large, &.btn-flat, &.btn-floating { |
||||
margin: 10px 15px; |
||||
} |
||||
|
||||
&.btn, |
||||
&.btn-large, |
||||
&.btn-floating { color: $button-raised-color; } |
||||
&.btn-flat { color: $button-flat-color; } |
||||
|
||||
&.btn:hover, |
||||
&.btn-large:hover { background-color: lighten($button-raised-background, 5%); } |
||||
&.btn-floating:hover { background-color: $button-raised-background; } |
||||
|
||||
& > i, |
||||
& > [class^="mdi-"], li > a > [class*="mdi-"], |
||||
& > i.material-icons { |
||||
float: left; |
||||
height: $sidenav-item-height; |
||||
line-height: $sidenav-line-height; |
||||
margin: 0 ($sidenav-padding * 2) 0 0; |
||||
width: $sidenav-item-height / 2; |
||||
color: rgba(0,0,0,.54); |
||||
} |
||||
} |
||||
|
||||
|
||||
.divider { |
||||
margin: ($sidenav-padding / 2) 0 0 0; |
||||
} |
||||
|
||||
.subheader { |
||||
&:hover { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
cursor: initial; |
||||
pointer-events: none; |
||||
color: rgba(0,0,0,.54); |
||||
font-size: $sidenav-font-size; |
||||
font-weight: 500; |
||||
line-height: $sidenav-line-height; |
||||
} |
||||
|
||||
.user-view { |
||||
position: relative; |
||||
padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0; |
||||
margin-bottom: $sidenav-padding / 2; |
||||
|
||||
& > a { |
||||
&:hover { background-color: transparent; } |
||||
height: auto; |
||||
padding: 0; |
||||
} |
||||
|
||||
.background { |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.circle, .name, .email { |
||||
display: block; |
||||
} |
||||
|
||||
.circle { |
||||
height: 64px; |
||||
width: 64px; |
||||
} |
||||
|
||||
.name, |
||||
.email { |
||||
font-size: $sidenav-font-size; |
||||
line-height: $sidenav-line-height / 2; |
||||
} |
||||
|
||||
.name { |
||||
margin-top: 16px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.email { |
||||
padding-bottom: 16px; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
// Touch interaction |
||||
.drag-target { |
||||
// Right Align |
||||
&.right-aligned { |
||||
right: 0; |
||||
} |
||||
|
||||
height: 100%; |
||||
width: 10px; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 998; |
||||
} |
||||
|
||||
|
||||
// Fixed Sidenav shown |
||||
.sidenav.sidenav-fixed { |
||||
// Right Align |
||||
&.right-aligned { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
left: 0; |
||||
transform: translateX(0); |
||||
position: fixed; |
||||
} |
||||
|
||||
// Fixed Sidenav hide on smaller |
||||
@media #{$medium-and-down} { |
||||
.sidenav { |
||||
&.sidenav-fixed { |
||||
transform: translateX(-105%); |
||||
|
||||
&.right-aligned { |
||||
transform: translateX(105%); |
||||
} |
||||
} |
||||
|
||||
> a { |
||||
padding: 0 $sidenav-padding; |
||||
} |
||||
|
||||
.user-view { |
||||
padding: $sidenav-padding $sidenav-padding 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.sidenav .collapsible-body > ul:not(.collapsible) > li.active, |
||||
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active { |
||||
background-color: $primary-color; |
||||
a { |
||||
color: $sidenav-bg-color; |
||||
} |
||||
} |
||||
.sidenav .collapsible-body { |
||||
padding: 0; |
||||
} |
||||
|
||||
|
||||
.sidenav-overlay { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
opacity: 0; |
||||
height: 120vh; |
||||
background-color: rgba(0,0,0,.5); |
||||
z-index: 997; |
||||
display: none; |
||||
} |
||||
@ -1,92 +0,0 @@
@@ -1,92 +0,0 @@
|
||||
.slider { |
||||
position: relative; |
||||
height: 400px; |
||||
width: 100%; |
||||
|
||||
// Fullscreen slider |
||||
&.fullscreen { |
||||
height: 100%; |
||||
width: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
|
||||
ul.slides { |
||||
height: 100%; |
||||
} |
||||
|
||||
ul.indicators { |
||||
z-index: 2; |
||||
bottom: 30px; |
||||
} |
||||
} |
||||
|
||||
.slides { |
||||
background-color: $slider-bg-color; |
||||
margin: 0; |
||||
height: 400px; |
||||
|
||||
li { |
||||
opacity: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
width: 100%; |
||||
height: inherit; |
||||
overflow: hidden; |
||||
|
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
background-size: cover; |
||||
background-position: center; |
||||
} |
||||
|
||||
.caption { |
||||
color: #fff; |
||||
position: absolute; |
||||
top: 15%; |
||||
left: 15%; |
||||
width: 70%; |
||||
opacity: 0; |
||||
|
||||
p { color: $slider-bg-color-light; } |
||||
} |
||||
|
||||
&.active { |
||||
z-index: 2; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.indicators { |
||||
position: absolute; |
||||
text-align: center; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: 0; |
||||
|
||||
.indicator-item { |
||||
display: inline-block; |
||||
position: relative; |
||||
cursor: pointer; |
||||
height: 16px; |
||||
width: 16px; |
||||
margin: 0 12px; |
||||
background-color: $slider-bg-color-light; |
||||
|
||||
transition: background-color .3s; |
||||
border-radius: 50%; |
||||
|
||||
&.active { |
||||
background-color: $slider-indicator-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -1,33 +0,0 @@
@@ -1,33 +0,0 @@
|
||||
/*************** |
||||
Nav List |
||||
***************/ |
||||
.table-of-contents { |
||||
&.fixed { |
||||
position: fixed; |
||||
} |
||||
|
||||
li { |
||||
padding: 2px 0; |
||||
} |
||||
a { |
||||
display: inline-block; |
||||
font-weight: 300; |
||||
color: #757575; |
||||
padding-left: 16px; |
||||
height: 1.5rem; |
||||
line-height: 1.5rem; |
||||
letter-spacing: .4; |
||||
display: inline-block; |
||||
|
||||
&:hover { |
||||
color: lighten(#757575, 20%); |
||||
padding-left: 15px; |
||||
border-left: 1px solid $primary-color; |
||||
} |
||||
&.active { |
||||
font-weight: 500; |
||||
padding-left: 14px; |
||||
border-left: 2px solid $primary-color; |
||||
} |
||||
} |
||||
} |
||||
@ -1,99 +0,0 @@
@@ -1,99 +0,0 @@
|
||||
.tabs { |
||||
&.tabs-transparent { |
||||
background-color: transparent; |
||||
|
||||
.tab a, |
||||
.tab.disabled a, |
||||
.tab.disabled a:hover { |
||||
color: rgba(255,255,255,0.7); |
||||
} |
||||
|
||||
.tab a:hover, |
||||
.tab a.active { |
||||
color: #fff; |
||||
} |
||||
|
||||
.indicator { |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
|
||||
&.tabs-fixed-width { |
||||
display: flex; |
||||
|
||||
.tab { |
||||
flex-grow: 1; |
||||
} |
||||
} |
||||
|
||||
position: relative; |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
height: 48px; |
||||
width: 100%; |
||||
background-color: $tabs-bg-color; |
||||
margin: 0 auto; |
||||
white-space: nowrap; |
||||
|
||||
.tab { |
||||
display: inline-block; |
||||
text-align: center; |
||||
line-height: 48px; |
||||
height: 48px; |
||||
padding: 0; |
||||
margin: 0; |
||||
text-transform: uppercase; |
||||
|
||||
a { |
||||
&:focus, |
||||
&:focus.active { |
||||
background-color: transparentize($tabs-underline-color, .8); |
||||
outline: none; |
||||
} |
||||
|
||||
&:hover, |
||||
&.active { |
||||
background-color: transparent; |
||||
color: $tabs-text-color; |
||||
} |
||||
|
||||
color: rgba($tabs-text-color, .7); |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0 24px; |
||||
font-size: 14px; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
transition: color .28s ease, background-color .28s ease; |
||||
} |
||||
|
||||
&.disabled a, |
||||
&.disabled a:hover { |
||||
color: rgba($tabs-text-color, .4); |
||||
cursor: default; |
||||
} |
||||
} |
||||
.indicator { |
||||
position: absolute; |
||||
bottom: 0; |
||||
height: 2px; |
||||
background-color: $tabs-underline-color; |
||||
will-change: left, right; |
||||
} |
||||
} |
||||
|
||||
// Fixed Sidenav hide on smaller |
||||
@media #{$medium-and-down} { |
||||
.tabs { |
||||
display: flex; |
||||
|
||||
.tab { |
||||
flex-grow: 1; |
||||
|
||||
a { |
||||
padding: 0 12px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,103 +0,0 @@
@@ -1,103 +0,0 @@
|
||||
.tap-target-wrapper { |
||||
width: 800px; |
||||
height: 800px; |
||||
position: fixed; |
||||
z-index: 1000; |
||||
visibility: hidden; |
||||
transition: visibility 0s .3s; |
||||
} |
||||
|
||||
.tap-target-wrapper.open { |
||||
visibility: visible; |
||||
transition: visibility 0s; |
||||
|
||||
.tap-target { |
||||
transform: scale(1); |
||||
opacity: .95; |
||||
transition: |
||||
transform .3s cubic-bezier(.42,0,.58,1), |
||||
opacity .3s cubic-bezier(.42,0,.58,1); |
||||
} |
||||
|
||||
.tap-target-wave::before { |
||||
transform: scale(1); |
||||
} |
||||
.tap-target-wave::after { |
||||
visibility: visible; |
||||
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; |
||||
transition: |
||||
opacity .3s, |
||||
transform .3s, |
||||
visibility 0s 1s; |
||||
} |
||||
} |
||||
|
||||
.tap-target { |
||||
position: absolute; |
||||
font-size: 1rem; |
||||
border-radius: 50%; |
||||
background-color: $primary-color; |
||||
box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2); |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: 0; |
||||
transform: scale(0); |
||||
transition: |
||||
transform .3s cubic-bezier(.42,0,.58,1), |
||||
opacity .3s cubic-bezier(.42,0,.58,1); |
||||
} |
||||
|
||||
.tap-target-content { |
||||
position: relative; |
||||
display: table-cell; |
||||
} |
||||
|
||||
.tap-target-wave { |
||||
&::before, |
||||
&::after { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 50%; |
||||
background-color: #ffffff; |
||||
} |
||||
&::before { |
||||
transform: scale(0); |
||||
transition: transform .3s; |
||||
} |
||||
&::after { |
||||
visibility: hidden; |
||||
transition: |
||||
opacity .3s, |
||||
transform .3s, |
||||
visibility 0s; |
||||
z-index: -1; |
||||
} |
||||
|
||||
position: absolute; |
||||
border-radius: 50%; |
||||
z-index: 10001; |
||||
} |
||||
|
||||
.tap-target-origin { |
||||
&:not(.btn), |
||||
&:not(.btn):hover { |
||||
background: none; |
||||
} |
||||
|
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
|
||||
z-index: 10002; |
||||
position: absolute !important; |
||||
} |
||||
|
||||
@media only screen and (max-width: 600px) { |
||||
.tap-target, .tap-target-wrapper { |
||||
width: 600px; |
||||
height: 600px; |
||||
} |
||||
} |
||||
@ -1,183 +0,0 @@
@@ -1,183 +0,0 @@
|
||||
/* Timepicker Containers */ |
||||
.timepicker-modal { |
||||
max-width: 325px; |
||||
max-height: none; |
||||
} |
||||
|
||||
.timepicker-container.modal-content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0; |
||||
} |
||||
|
||||
.text-primary { |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
|
||||
|
||||
/* Clock Digital Display */ |
||||
.timepicker-digital-display { |
||||
flex: 1 auto; |
||||
background-color: $secondary-color; |
||||
padding: 10px; |
||||
font-weight: 300; |
||||
} |
||||
|
||||
.timepicker-text-container { |
||||
font-size: 4rem; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
color: rgba(255, 255, 255, 0.6); |
||||
font-weight: 400; |
||||
position: relative; |
||||
user-select: none; |
||||
} |
||||
|
||||
.timepicker-span-hours, |
||||
.timepicker-span-minutes, |
||||
.timepicker-span-am-pm div { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.timepicker-span-hours { |
||||
margin-right: 3px; |
||||
} |
||||
|
||||
.timepicker-span-minutes { |
||||
margin-left: 3px; |
||||
} |
||||
|
||||
.timepicker-display-am-pm { |
||||
font-size: 1.3rem; |
||||
position: absolute; |
||||
right: 1rem; |
||||
bottom: 1rem; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
|
||||
/* Analog Clock Display */ |
||||
.timepicker-analog-display { |
||||
flex: 2.5 auto; |
||||
} |
||||
|
||||
.timepicker-plate { |
||||
background-color: $timepicker-clock-plate-bg; |
||||
border-radius: 50%; |
||||
width: 270px; |
||||
height: 270px; |
||||
overflow: visible; |
||||
position: relative; |
||||
margin: auto; |
||||
margin-top: 25px; |
||||
margin-bottom: 5px; |
||||
user-select: none; |
||||
} |
||||
|
||||
.timepicker-canvas, |
||||
.timepicker-dial { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
.timepicker-minutes { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.timepicker-tick { |
||||
border-radius: 50%; |
||||
color: $timepicker-clock-color; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
width: 40px; |
||||
height: 40px; |
||||
position: absolute; |
||||
cursor: pointer; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.timepicker-tick.active, |
||||
.timepicker-tick:hover { |
||||
background-color: transparentize($secondary-color, .75); |
||||
} |
||||
.timepicker-dial { |
||||
transition: transform 350ms, opacity 350ms; |
||||
} |
||||
.timepicker-dial-out { |
||||
&.timepicker-hours { |
||||
transform: scale(1.1, 1.1); |
||||
} |
||||
|
||||
&.timepicker-minutes { |
||||
transform: scale(.8, .8); |
||||
} |
||||
|
||||
opacity: 0; |
||||
} |
||||
.timepicker-canvas { |
||||
transition: opacity 175ms; |
||||
|
||||
line { |
||||
stroke: $secondary-color; |
||||
stroke-width: 4; |
||||
stroke-linecap: round; |
||||
} |
||||
} |
||||
.timepicker-canvas-out { |
||||
opacity: 0.25; |
||||
} |
||||
.timepicker-canvas-bearing { |
||||
stroke: none; |
||||
fill: $secondary-color; |
||||
} |
||||
.timepicker-canvas-bg { |
||||
stroke: none; |
||||
fill: $secondary-color; |
||||
} |
||||
|
||||
|
||||
/* Footer */ |
||||
.timepicker-footer { |
||||
margin: 0 auto; |
||||
padding: 5px 1rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.timepicker-clear { |
||||
color: $error-color; |
||||
} |
||||
|
||||
.timepicker-close { |
||||
color: $secondary-color; |
||||
} |
||||
|
||||
.timepicker-clear, |
||||
.timepicker-close { |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
/* Media Queries */ |
||||
@media #{$medium-and-up} { |
||||
.timepicker-modal { |
||||
max-width: 600px; |
||||
} |
||||
|
||||
.timepicker-container.modal-content { |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.timepicker-text-container { |
||||
top: 32%; |
||||
} |
||||
|
||||
.timepicker-display-am-pm { |
||||
position: relative; |
||||
right: auto; |
||||
bottom: auto; |
||||
text-align: center; |
||||
margin-top: 1.2rem; |
||||
} |
||||
} |
||||
@ -1,58 +0,0 @@
@@ -1,58 +0,0 @@
|
||||
#toast-container { |
||||
display:block; |
||||
position: fixed; |
||||
z-index: 10000; |
||||
|
||||
@media #{$small-and-down} { |
||||
min-width: 100%; |
||||
bottom: 0%; |
||||
} |
||||
@media #{$medium-only} { |
||||
left: 5%; |
||||
bottom: 7%; |
||||
max-width: 90%; |
||||
} |
||||
@media #{$large-and-up} { |
||||
top: 10%; |
||||
right: 7%; |
||||
max-width: 86%; |
||||
} |
||||
} |
||||
|
||||
.toast { |
||||
@extend .z-depth-1; |
||||
border-radius: 2px; |
||||
top: 35px; |
||||
width: auto; |
||||
margin-top: 10px; |
||||
position: relative; |
||||
max-width:100%; |
||||
height: auto; |
||||
min-height: $toast-height; |
||||
line-height: 1.5em; |
||||
background-color: $toast-color; |
||||
padding: 10px 25px; |
||||
font-size: 1.1rem; |
||||
font-weight: 300; |
||||
color: $toast-text-color; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
cursor: default; |
||||
|
||||
.toast-action { |
||||
color: $toast-action-color; |
||||
font-weight: 500; |
||||
margin-right: -25px; |
||||
margin-left: 3rem; |
||||
} |
||||
|
||||
&.rounded{ |
||||
border-radius: 24px; |
||||
} |
||||
|
||||
@media #{$small-and-down} { |
||||
width: 100%; |
||||
border-radius: 0; |
||||
} |
||||
} |
||||
@ -1,32 +0,0 @@
@@ -1,32 +0,0 @@
|
||||
.material-tooltip { |
||||
padding: 10px 8px; |
||||
font-size: 1rem; |
||||
z-index: 2000; |
||||
background-color: transparent; |
||||
border-radius: 2px; |
||||
color: #fff; |
||||
min-height: 36px; |
||||
line-height: 120%; |
||||
opacity: 0; |
||||
position: absolute; |
||||
text-align: center; |
||||
max-width: calc(100% - 4px); |
||||
overflow: hidden; |
||||
left: 0; |
||||
top: 0; |
||||
pointer-events: none; |
||||
visibility: hidden; |
||||
background-color: #323232; |
||||
} |
||||
|
||||
.backdrop { |
||||
position: absolute; |
||||
opacity: 0; |
||||
height: 7px; |
||||
width: 14px; |
||||
border-radius: 0 0 50% 50%; |
||||
background-color: #323232; |
||||
z-index: -1; |
||||
transform-origin: 50% 0%; |
||||
visibility: hidden; |
||||
} |
||||
@ -1,13 +0,0 @@
@@ -1,13 +0,0 @@
|
||||
// Scale transition |
||||
.scale-transition { |
||||
&.scale-out { |
||||
transform: scale(0); |
||||
transition: transform .2s !important; |
||||
} |
||||
|
||||
&.scale-in { |
||||
transform: scale(1); |
||||
} |
||||
|
||||
transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; |
||||
} |
||||
@ -1,349 +0,0 @@
@@ -1,349 +0,0 @@
|
||||
// ========================================================================== |
||||
// Materialize variables |
||||
// ========================================================================== |
||||
// |
||||
// Table of Contents: |
||||
// |
||||
// 1. Colors |
||||
// 2. Badges |
||||
// 3. Buttons |
||||
// 4. Cards |
||||
// 5. Carousel |
||||
// 6. Collapsible |
||||
// 7. Chips |
||||
// 8. Date + Time Picker |
||||
// 9. Dropdown |
||||
// 10. Forms |
||||
// 11. Global |
||||
// 12. Grid |
||||
// 13. Navigation Bar |
||||
// 14. Side Navigation |
||||
// 15. Photo Slider |
||||
// 16. Spinners | Loaders |
||||
// 17. Tabs |
||||
// 18. Tables |
||||
// 19. Toasts |
||||
// 20. Typography |
||||
// 21. Footer |
||||
// 22. Flow Text |
||||
// 23. Collections |
||||
// 24. Progress Bar |
||||
|
||||
|
||||
|
||||
// 1. Colors |
||||
// ========================================================================== |
||||
|
||||
$primary-color: color("materialize-red", "lighten-2") !default; |
||||
$primary-color-light: lighten($primary-color, 15%) !default; |
||||
$primary-color-dark: darken($primary-color, 15%) !default; |
||||
|
||||
$secondary-color: color("teal", "lighten-1") !default; |
||||
$success-color: color("green", "base") !default; |
||||
$error-color: color("red", "base") !default; |
||||
$link-color: color("light-blue", "darken-1") !default; |
||||
|
||||
|
||||
// 2. Badges |
||||
// ========================================================================== |
||||
|
||||
$badge-bg-color: $secondary-color !default; |
||||
$badge-height: 22px !default; |
||||
|
||||
|
||||
// 3. Buttons |
||||
// ========================================================================== |
||||
|
||||
// Shared styles |
||||
$button-border: none !default; |
||||
$button-background-focus: lighten($secondary-color, 4%) !default; |
||||
$button-font-size: 14px !default; |
||||
$button-icon-font-size: 1.3rem !default; |
||||
$button-height: 36px !default; |
||||
$button-padding: 0 16px !default; |
||||
$button-radius: 2px !default; |
||||
|
||||
// Disabled styles |
||||
$button-disabled-background: #DFDFDF !default; |
||||
$button-disabled-color: #9F9F9F !default; |
||||
|
||||
// Raised buttons |
||||
$button-raised-background: $secondary-color !default; |
||||
$button-raised-background-hover: lighten($button-raised-background, 5%) !default; |
||||
$button-raised-color: #fff !default; |
||||
|
||||
// Large buttons |
||||
$button-large-font-size: 15px !default; |
||||
$button-large-icon-font-size: 1.6rem !default; |
||||
$button-large-height: $button-height * 1.5 !default; |
||||
$button-floating-large-size: 56px !default; |
||||
|
||||
// Small buttons |
||||
$button-small-font-size: 13px !default; |
||||
$button-small-icon-font-size: 1.2rem !default; |
||||
$button-small-height: $button-height * .9 !default; |
||||
$button-floating-small-size: $button-height * .9 !default; |
||||
|
||||
// Flat buttons |
||||
$button-flat-color: #343434 !default; |
||||
$button-flat-disabled-color: lighten(#999, 10%) !default; |
||||
|
||||
// Floating buttons |
||||
$button-floating-background: $secondary-color !default; |
||||
$button-floating-background-hover: $button-floating-background !default; |
||||
$button-floating-color: #fff !default; |
||||
$button-floating-size: 40px !default; |
||||
$button-floating-radius: 50% !default; |
||||
|
||||
|
||||
// 4. Cards |
||||
// ========================================================================== |
||||
|
||||
$card-padding: 24px !default; |
||||
$card-bg-color: #fff !default; |
||||
$card-link-color: color("orange", "accent-2") !default; |
||||
$card-link-color-light: lighten($card-link-color, 20%) !default; |
||||
|
||||
|
||||
// 5. Carousel |
||||
// ========================================================================== |
||||
|
||||
$carousel-height: 400px !default; |
||||
$carousel-item-height: $carousel-height / 2 !default; |
||||
$carousel-item-width: $carousel-item-height !default; |
||||
|
||||
|
||||
// 6. Collapsible |
||||
// ========================================================================== |
||||
|
||||
$collapsible-height: 3rem !default; |
||||
$collapsible-line-height: $collapsible-height !default; |
||||
$collapsible-header-color: #fff !default; |
||||
$collapsible-border-color: #ddd !default; |
||||
|
||||
|
||||
// 7. Chips |
||||
// ========================================================================== |
||||
|
||||
$chip-bg-color: #e4e4e4 !default; |
||||
$chip-border-color: #9e9e9e !default; |
||||
$chip-selected-color: #26a69a !default; |
||||
$chip-margin: 5px !default; |
||||
|
||||
|
||||
// 8. Date + Time Picker |
||||
// ========================================================================== |
||||
|
||||
$datepicker-display-font-size: 2.8rem; |
||||
$datepicker-calendar-header-color: #999; |
||||
$datepicker-weekday-color: rgba(0, 0, 0, .87) !default; |
||||
$datepicker-weekday-bg: darken($secondary-color, 7%) !default; |
||||
$datepicker-date-bg: $secondary-color !default; |
||||
$datepicker-year: rgba(255, 255, 255, .7) !default; |
||||
$datepicker-focus: rgba(0,0,0, .05) !default; |
||||
$datepicker-selected: $secondary-color !default; |
||||
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default; |
||||
$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default; |
||||
$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default; |
||||
|
||||
$timepicker-clock-color: rgba(0, 0, 0, .87) !default; |
||||
$timepicker-clock-plate-bg: #eee !default; |
||||
|
||||
|
||||
// 9. Dropdown |
||||
// ========================================================================== |
||||
|
||||
$dropdown-bg-color: #fff !default; |
||||
$dropdown-hover-bg-color: #eee !default; |
||||
$dropdown-color: $secondary-color !default; |
||||
$dropdown-item-height: 50px !default; |
||||
|
||||
|
||||
// 10. Forms |
||||
// ========================================================================== |
||||
|
||||
// Text Inputs + Textarea |
||||
$input-height: 3rem !default; |
||||
$input-border-color: color("grey", "base") !default; |
||||
$input-border: 1px solid $input-border-color !default; |
||||
$input-background: #fff !default; |
||||
$input-error-color: $error-color !default; |
||||
$input-success-color: $success-color !default; |
||||
$input-focus-color: $secondary-color !default; |
||||
$input-font-size: 16px !default; |
||||
$input-margin-bottom: 8px; |
||||
$input-margin: 0 0 $input-margin-bottom 0 !default; |
||||
$input-padding: 0 !default; |
||||
$label-font-size: .8rem !default; |
||||
$input-disabled-color: rgba(0,0,0, .42) !default; |
||||
$input-disabled-solid-color: #949494 !default; |
||||
$input-disabled-border: 1px dotted $input-disabled-color !default; |
||||
$input-invalid-border: 1px solid $input-error-color !default; |
||||
$input-icon-size: 2rem; |
||||
$placeholder-text-color: lighten($input-border-color, 20%) !default; |
||||
|
||||
// Radio Buttons |
||||
$radio-fill-color: $secondary-color !default; |
||||
$radio-empty-color: #5a5a5a !default; |
||||
$radio-border: 2px solid $radio-fill-color !default; |
||||
|
||||
// Range |
||||
$range-height: 14px !default; |
||||
$range-width: 14px !default; |
||||
$track-height: 3px !default; |
||||
|
||||
// Select |
||||
$select-border: 1px solid #f2f2f2 !default; |
||||
$select-background: rgba(255, 255, 255, 0.90) !default; |
||||
$select-focus: 1px solid lighten($secondary-color, 47%) !default; |
||||
$select-option-hover: rgba(0,0,0,.08) !default; |
||||
$select-option-focus: rgba(0,0,0,.08) !default; |
||||
$select-option-selected: rgba(0,0,0,.03) !default; |
||||
$select-padding: 5px !default; |
||||
$select-radius: 2px !default; |
||||
$select-disabled-color: rgba(0,0,0,.3) !default; |
||||
|
||||
// Switches |
||||
$switch-bg-color: $secondary-color !default; |
||||
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default; |
||||
$switch-unchecked-bg: #F1F1F1 !default; |
||||
$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default; |
||||
$switch-radius: 15px !default; |
||||
|
||||
|
||||
// 11. Global |
||||
// ========================================================================== |
||||
|
||||
// Media Query Ranges |
||||
$small-screen-up: 601px !default; |
||||
$medium-screen-up: 993px !default; |
||||
$large-screen-up: 1201px !default; |
||||
$small-screen: 600px !default; |
||||
$medium-screen: 992px !default; |
||||
$large-screen: 1200px !default; |
||||
|
||||
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; |
||||
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; |
||||
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default; |
||||
$small-and-down: "only screen and (max-width : #{$small-screen})" !default; |
||||
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; |
||||
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; |
||||
|
||||
|
||||
// 12. Grid |
||||
// ========================================================================== |
||||
|
||||
$num-cols: 12 !default; |
||||
$gutter-width: 1.5rem !default; |
||||
$element-top-margin: $gutter-width/3 !default; |
||||
$element-bottom-margin: ($gutter-width*2)/3 !default; |
||||
|
||||
|
||||
// 13. Navigation Bar |
||||
// ========================================================================== |
||||
|
||||
$navbar-height: 64px !default; |
||||
$navbar-line-height: $navbar-height !default; |
||||
$navbar-height-mobile: 56px !default; |
||||
$navbar-line-height-mobile: $navbar-height-mobile !default; |
||||
$navbar-font-size: 1rem !default; |
||||
$navbar-font-color: #fff !default; |
||||
$navbar-brand-font-size: 2.1rem !default; |
||||
|
||||
// 14. Side Navigation |
||||
// ========================================================================== |
||||
|
||||
$sidenav-width: 300px !default; |
||||
$sidenav-font-size: 14px !default; |
||||
$sidenav-font-color: rgba(0,0,0,.87) !default; |
||||
$sidenav-bg-color: #fff !default; |
||||
$sidenav-padding: 16px !default; |
||||
$sidenav-item-height: 48px !default; |
||||
$sidenav-line-height: $sidenav-item-height !default; |
||||
|
||||
|
||||
// 15. Photo Slider |
||||
// ========================================================================== |
||||
|
||||
$slider-bg-color: color('grey', 'base') !default; |
||||
$slider-bg-color-light: color('grey', 'lighten-2') !default; |
||||
$slider-indicator-color: color('green', 'base') !default; |
||||
|
||||
|
||||
// 16. Spinners | Loaders |
||||
// ========================================================================== |
||||
|
||||
$spinner-default-color: $secondary-color !default; |
||||
|
||||
|
||||
// 17. Tabs |
||||
// ========================================================================== |
||||
|
||||
$tabs-underline-color: $primary-color-light !default; |
||||
$tabs-text-color: $primary-color !default; |
||||
$tabs-bg-color: #fff !default; |
||||
|
||||
|
||||
// 18. Tables |
||||
// ========================================================================== |
||||
|
||||
$table-border-color: rgba(0,0,0,.12) !default; |
||||
$table-striped-color: rgba(242, 242, 242, 0.5) !default; |
||||
|
||||
|
||||
// 19. Toasts |
||||
// ========================================================================== |
||||
|
||||
$toast-height: 48px !default; |
||||
$toast-color: #323232 !default; |
||||
$toast-text-color: #fff !default; |
||||
$toast-action-color: #eeff41; |
||||
|
||||
|
||||
// 20. Typography |
||||
// ========================================================================== |
||||
|
||||
$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; |
||||
$off-black: rgba(0, 0, 0, 0.87) !default; |
||||
// Header Styles |
||||
$h1-fontsize: 4.2rem !default; |
||||
$h2-fontsize: 3.56rem !default; |
||||
$h3-fontsize: 2.92rem !default; |
||||
$h4-fontsize: 2.28rem !default; |
||||
$h5-fontsize: 1.64rem !default; |
||||
$h6-fontsize: 1.15rem !default; |
||||
|
||||
|
||||
// 21. Footer |
||||
// ========================================================================== |
||||
|
||||
$footer-font-color: #fff !default; |
||||
$footer-bg-color: $primary-color !default; |
||||
$footer-copyright-font-color: rgba(255,255,255,.8) !default; |
||||
$footer-copyright-bg-color: rgba(51,51,51,.08) !default; |
||||
|
||||
|
||||
// 22. Flow Text |
||||
// ========================================================================== |
||||
|
||||
$range : $large-screen - $small-screen !default; |
||||
$intervals: 20 !default; |
||||
$interval-size: $range / $intervals !default; |
||||
|
||||
|
||||
// 23. Collections |
||||
// ========================================================================== |
||||
|
||||
$collection-border-color: #e0e0e0 !default; |
||||
$collection-bg-color: #fff !default; |
||||
$collection-active-bg-color: $secondary-color !default; |
||||
$collection-active-color: lighten($secondary-color, 55%) !default; |
||||
$collection-hover-bg-color: #ddd !default; |
||||
$collection-link-color: $secondary-color !default; |
||||
$collection-line-height: 1.5rem !default; |
||||
|
||||
|
||||
// 24. Progress Bar |
||||
// ========================================================================== |
||||
|
||||
$progress-bar-color: $secondary-color !default; |
||||
@ -1,114 +0,0 @@
@@ -1,114 +0,0 @@
|
||||
|
||||
/*! |
||||
* Waves v0.6.0 |
||||
* http://fian.my.id/Waves |
||||
* |
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors |
||||
* Released under the MIT license |
||||
* https://github.com/fians/Waves/blob/master/LICENSE |
||||
*/ |
||||
|
||||
|
||||
.waves-effect { |
||||
position: relative; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
user-select: none; |
||||
-webkit-tap-highlight-color: transparent; |
||||
vertical-align: middle; |
||||
z-index: 1; |
||||
transition: .3s ease-out; |
||||
|
||||
.waves-ripple { |
||||
position: absolute; |
||||
border-radius: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-top:-10px; |
||||
margin-left:-10px; |
||||
opacity: 0; |
||||
|
||||
background: rgba(0,0,0,0.2); |
||||
transition: all 0.7s ease-out; |
||||
transition-property: transform, opacity; |
||||
transform: scale(0); |
||||
pointer-events: none; |
||||
} |
||||
|
||||
// Waves Colors |
||||
&.waves-light .waves-ripple { |
||||
background-color: rgba(255, 255, 255, 0.45); |
||||
} |
||||
&.waves-red .waves-ripple { |
||||
background-color: rgba(244, 67, 54, .70); |
||||
} |
||||
&.waves-yellow .waves-ripple { |
||||
background-color: rgba(255, 235, 59, .70); |
||||
} |
||||
&.waves-orange .waves-ripple { |
||||
background-color: rgba(255, 152, 0, .70); |
||||
} |
||||
&.waves-purple .waves-ripple { |
||||
background-color: rgba(156, 39, 176, 0.70); |
||||
} |
||||
&.waves-green .waves-ripple { |
||||
background-color: rgba(76, 175, 80, 0.70); |
||||
} |
||||
&.waves-teal .waves-ripple { |
||||
background-color: rgba(0, 150, 136, 0.70); |
||||
} |
||||
|
||||
// Style input button bug. |
||||
input[type="button"], input[type="reset"], input[type="submit"] { |
||||
border: 0; |
||||
font-style: normal; |
||||
font-size: inherit; |
||||
text-transform: inherit; |
||||
background: none; |
||||
} |
||||
|
||||
img { |
||||
position: relative; |
||||
z-index: -1; |
||||
} |
||||
} |
||||
|
||||
.waves-notransition { |
||||
transition: none #{"!important"}; |
||||
} |
||||
|
||||
.waves-circle { |
||||
transform: translateZ(0); |
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); |
||||
} |
||||
|
||||
.waves-input-wrapper { |
||||
border-radius: 0.2em; |
||||
vertical-align: bottom; |
||||
|
||||
.waves-button-input { |
||||
position: relative; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
|
||||
.waves-circle { |
||||
text-align: center; |
||||
width: 2.5em; |
||||
height: 2.5em; |
||||
line-height: 2.5em; |
||||
border-radius: 50%; |
||||
-webkit-mask-image: none; |
||||
} |
||||
|
||||
.waves-block { |
||||
display: block; |
||||
} |
||||
|
||||
/* Firefox Bug: link not triggered */ |
||||
.waves-effect .waves-ripple { |
||||
z-index: -1; |
||||
} |
||||
@ -1,200 +0,0 @@
@@ -1,200 +0,0 @@
|
||||
/* Checkboxes |
||||
========================================================================== */ |
||||
|
||||
/* Remove default checkbox */ |
||||
[type="checkbox"]:not(:checked), |
||||
[type="checkbox"]:checked { |
||||
position: absolute; |
||||
opacity: 0; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
// Checkbox Styles |
||||
[type="checkbox"] { |
||||
// Text Label Style |
||||
+ span:not(.lever) { |
||||
position: relative; |
||||
padding-left: 35px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
height: 25px; |
||||
line-height: 25px; |
||||
font-size: 1rem; |
||||
user-select: none; |
||||
} |
||||
|
||||
/* checkbox aspect */ |
||||
+ span:not(.lever):before, |
||||
&:not(.filled-in) + span:not(.lever):after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 18px; |
||||
height: 18px; |
||||
z-index: 0; |
||||
border: 2px solid $radio-empty-color; |
||||
border-radius: 1px; |
||||
margin-top: 3px; |
||||
transition: .2s; |
||||
} |
||||
|
||||
&:not(.filled-in) + span:not(.lever):after { |
||||
border: 0; |
||||
transform: scale(0); |
||||
} |
||||
|
||||
&:not(:checked):disabled + span:not(.lever):before { |
||||
border: none; |
||||
background-color: $input-disabled-color; |
||||
} |
||||
|
||||
// Focused styles |
||||
&.tabbed:focus + span:not(.lever):after { |
||||
transform: scale(1); |
||||
border: 0; |
||||
border-radius: 50%; |
||||
box-shadow: 0 0 0 10px rgba(0,0,0,.1); |
||||
background-color: rgba(0,0,0,.1); |
||||
} |
||||
} |
||||
|
||||
[type="checkbox"]:checked { |
||||
+ span:not(.lever):before { |
||||
top: -4px; |
||||
left: -5px; |
||||
width: 12px; |
||||
height: 22px; |
||||
border-top: 2px solid transparent; |
||||
border-left: 2px solid transparent; |
||||
border-right: $radio-border; |
||||
border-bottom: $radio-border; |
||||
transform: rotate(40deg); |
||||
backface-visibility: hidden; |
||||
transform-origin: 100% 100%; |
||||
} |
||||
|
||||
&:disabled + span:before { |
||||
border-right: 2px solid $input-disabled-color; |
||||
border-bottom: 2px solid $input-disabled-color; |
||||
} |
||||
} |
||||
|
||||
/* Indeterminate checkbox */ |
||||
[type="checkbox"]:indeterminate { |
||||
+ span:not(.lever):before { |
||||
top: -11px; |
||||
left: -12px; |
||||
width: 10px; |
||||
height: 22px; |
||||
border-top: none; |
||||
border-left: none; |
||||
border-right: $radio-border; |
||||
border-bottom: none; |
||||
transform: rotate(90deg); |
||||
backface-visibility: hidden; |
||||
transform-origin: 100% 100%; |
||||
} |
||||
|
||||
// Disabled indeterminate |
||||
&:disabled + span:not(.lever):before { |
||||
border-right: 2px solid $input-disabled-color; |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
|
||||
// Filled in Style |
||||
[type="checkbox"].filled-in { |
||||
// General |
||||
+ span:not(.lever):after { |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
+ span:not(.lever):before, |
||||
+ span:not(.lever):after { |
||||
content: ''; |
||||
left: 0; |
||||
position: absolute; |
||||
/* .1s delay is for check animation */ |
||||
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; |
||||
z-index: 1; |
||||
} |
||||
|
||||
// Unchecked style |
||||
&:not(:checked) + span:not(.lever):before { |
||||
width: 0; |
||||
height: 0; |
||||
border: 3px solid transparent; |
||||
left: 6px; |
||||
top: 10px; |
||||
transform: rotateZ(37deg); |
||||
transform-origin: 100% 100%; |
||||
} |
||||
|
||||
&:not(:checked) + span:not(.lever):after { |
||||
height: 20px; |
||||
width: 20px; |
||||
background-color: transparent; |
||||
border: 2px solid $radio-empty-color; |
||||
top: 0px; |
||||
z-index: 0; |
||||
} |
||||
|
||||
// Checked style |
||||
&:checked { |
||||
+ span:not(.lever):before { |
||||
top: 0; |
||||
left: 1px; |
||||
width: 8px; |
||||
height: 13px; |
||||
border-top: 2px solid transparent; |
||||
border-left: 2px solid transparent; |
||||
border-right: 2px solid $input-background; |
||||
border-bottom: 2px solid $input-background; |
||||
transform: rotateZ(37deg); |
||||
transform-origin: 100% 100%; |
||||
} |
||||
|
||||
+ span:not(.lever):after { |
||||
top: 0; |
||||
width: 20px; |
||||
height: 20px; |
||||
border: 2px solid $secondary-color; |
||||
background-color: $secondary-color; |
||||
z-index: 0; |
||||
} |
||||
} |
||||
|
||||
// Focused styles |
||||
&.tabbed:focus + span:not(.lever):after { |
||||
border-radius: 2px; |
||||
border-color: $radio-empty-color; |
||||
background-color: rgba(0,0,0,.1); |
||||
} |
||||
|
||||
&.tabbed:checked:focus + span:not(.lever):after { |
||||
border-radius: 2px; |
||||
background-color: $secondary-color; |
||||
border-color: $secondary-color; |
||||
} |
||||
|
||||
// Disabled style |
||||
&:disabled:not(:checked) + span:not(.lever):before { |
||||
background-color: transparent; |
||||
border: 2px solid transparent; |
||||
} |
||||
|
||||
&:disabled:not(:checked) + span:not(.lever):after { |
||||
border-color: transparent; |
||||
background-color: $input-disabled-solid-color; |
||||
} |
||||
|
||||
&:disabled:checked + span:not(.lever):before { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
&:disabled:checked + span:not(.lever):after { |
||||
background-color: $input-disabled-solid-color; |
||||
border-color: $input-disabled-solid-color; |
||||
} |
||||
} |
||||
@ -1,44 +0,0 @@
@@ -1,44 +0,0 @@
|
||||
/* File Input |
||||
========================================================================== */ |
||||
|
||||
.file-field { |
||||
position: relative; |
||||
|
||||
.file-path-wrapper { |
||||
overflow: hidden; |
||||
padding-left: 10px; |
||||
} |
||||
|
||||
input.file-path { width: 100%; } |
||||
|
||||
.btn { |
||||
float: left; |
||||
height: $input-height; |
||||
line-height: $input-height; |
||||
} |
||||
|
||||
span { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type=file] { |
||||
|
||||
// Needed to override webkit button |
||||
&::-webkit-file-upload-button { |
||||
display: none; |
||||
} |
||||
|
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: 20px; |
||||
cursor: pointer; |
||||
opacity: 0; |
||||
filter: alpha(opacity=0); |
||||
} |
||||
} |
||||
@ -1,22 +0,0 @@
@@ -1,22 +0,0 @@
|
||||
// Remove Focus Boxes |
||||
select:focus { |
||||
outline: $select-focus; |
||||
} |
||||
|
||||
button:focus { |
||||
outline: none; |
||||
background-color: $button-background-focus; |
||||
} |
||||
|
||||
label { |
||||
font-size: $label-font-size; |
||||
color: $input-border-color; |
||||
} |
||||
|
||||
@import 'input-fields'; |
||||
@import 'radio-buttons'; |
||||
@import 'checkboxes'; |
||||
@import 'switches'; |
||||
@import 'select'; |
||||
@import 'file-input'; |
||||
@import 'range'; |
||||
@ -1,354 +0,0 @@
@@ -1,354 +0,0 @@
|
||||
/* Text Inputs + Textarea |
||||
========================================================================== */ |
||||
|
||||
/* Style Placeholders */ |
||||
|
||||
::placeholder { |
||||
color: $placeholder-text-color; |
||||
} |
||||
|
||||
/* Text inputs */ |
||||
|
||||
input:not([type]), |
||||
input[type=text]:not(.browser-default), |
||||
input[type=password]:not(.browser-default), |
||||
input[type=email]:not(.browser-default), |
||||
input[type=url]:not(.browser-default), |
||||
input[type=time]:not(.browser-default), |
||||
input[type=date]:not(.browser-default), |
||||
input[type=datetime]:not(.browser-default), |
||||
input[type=datetime-local]:not(.browser-default), |
||||
input[type=tel]:not(.browser-default), |
||||
input[type=number]:not(.browser-default), |
||||
input[type=search]:not(.browser-default), |
||||
textarea.materialize-textarea { |
||||
|
||||
// General Styles |
||||
background-color: transparent; |
||||
border: none; |
||||
border-bottom: $input-border; |
||||
border-radius: 0; |
||||
outline: none; |
||||
height: $input-height; |
||||
width: 100%; |
||||
font-size: $input-font-size; |
||||
margin: $input-margin; |
||||
padding: $input-padding; |
||||
box-shadow: none; |
||||
box-sizing: content-box; |
||||
transition: box-shadow .3s, border .3s; |
||||
|
||||
// Disabled input style |
||||
&:disabled, |
||||
&[readonly="readonly"] { |
||||
color: $input-disabled-color; |
||||
border-bottom: $input-disabled-border; |
||||
} |
||||
|
||||
// Disabled label style |
||||
&:disabled+label, |
||||
&[readonly="readonly"]+label { |
||||
color: $input-disabled-color; |
||||
} |
||||
|
||||
// Focused input style |
||||
&:focus:not([readonly]) { |
||||
border-bottom: 1px solid $input-focus-color; |
||||
box-shadow: 0 1px 0 0 $input-focus-color; |
||||
} |
||||
|
||||
// Focused label style |
||||
&:focus:not([readonly])+label { |
||||
color: $input-focus-color; |
||||
} |
||||
|
||||
// Hide helper text on data message |
||||
&.valid ~ .helper-text[data-success], |
||||
&:focus.valid ~ .helper-text[data-success], |
||||
&.invalid ~ .helper-text[data-error], |
||||
&:focus.invalid ~ .helper-text[data-error] { |
||||
@extend %hidden-text; |
||||
} |
||||
|
||||
// Valid Input Style |
||||
&.valid, |
||||
&:focus.valid { |
||||
@extend %valid-input-style; |
||||
} |
||||
|
||||
// Custom Success Message |
||||
&.valid ~ .helper-text:after, |
||||
&:focus.valid ~ .helper-text:after { |
||||
@extend %custom-success-message; |
||||
} |
||||
&:focus.valid ~ label { |
||||
color: $input-success-color; |
||||
} |
||||
|
||||
// Invalid Input Style |
||||
&.invalid, |
||||
&:focus.invalid { |
||||
@extend %invalid-input-style; |
||||
} |
||||
|
||||
// Custom Error message |
||||
&.invalid ~ .helper-text:after, |
||||
&:focus.invalid ~ .helper-text:after { |
||||
@extend %custom-error-message; |
||||
} |
||||
&:focus.invalid ~ label { |
||||
color: $input-error-color; |
||||
} |
||||
|
||||
// Full width label when using validate for error messages |
||||
&.validate + label { |
||||
width: 100%; |
||||
} |
||||
|
||||
// Form Message Shared Styles |
||||
& + label:after { |
||||
@extend %input-after-style; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* Validation Sass Placeholders */ |
||||
%valid-input-style { |
||||
border-bottom: 1px solid $input-success-color; |
||||
box-shadow: 0 1px 0 0 $input-success-color; |
||||
} |
||||
%invalid-input-style { |
||||
border-bottom: $input-invalid-border; |
||||
box-shadow: 0 1px 0 0 $input-error-color; |
||||
} |
||||
%hidden-text { |
||||
color: transparent; |
||||
user-select: none; |
||||
pointer-events: none; |
||||
} |
||||
%custom-success-message { |
||||
content: attr(data-success); |
||||
color: $input-success-color; |
||||
} |
||||
%custom-error-message { |
||||
content: attr(data-error); |
||||
color: $input-error-color; |
||||
} |
||||
%input-after-style { |
||||
display: block; |
||||
content: ""; |
||||
position: absolute; |
||||
top: 100%; |
||||
left: 0; |
||||
opacity: 0; |
||||
transition: .2s opacity ease-out, .2s color ease-out; |
||||
} |
||||
|
||||
|
||||
// Styling for input field wrapper |
||||
.input-field { |
||||
// Inline styles |
||||
&.inline { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-left: 5px; |
||||
|
||||
input, |
||||
.select-dropdown { |
||||
margin-bottom: 1rem; |
||||
} |
||||
} |
||||
|
||||
// Gutter spacing |
||||
&.col { |
||||
label { |
||||
left: $gutter-width / 2; |
||||
} |
||||
|
||||
.prefix ~ label, |
||||
.prefix ~ .validate ~ label { |
||||
width: calc(100% - 3rem - #{$gutter-width}); |
||||
} |
||||
} |
||||
|
||||
position: relative; |
||||
margin-top: 1rem; |
||||
margin-bottom: 1rem; |
||||
|
||||
& > label { |
||||
color: $input-border-color; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
font-size: 1rem; |
||||
cursor: text; |
||||
transition: transform .2s ease-out, color .2s ease-out; |
||||
transform-origin: 0% 100%; |
||||
text-align: initial; |
||||
transform: translateY(12px); |
||||
|
||||
&:not(.label-icon).active { |
||||
transform: translateY(-14px) scale(.8); |
||||
transform-origin: 0 0; |
||||
} |
||||
} |
||||
|
||||
// Autofill + date + time inputs |
||||
& > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, |
||||
& > input[type=date]:not(.browser-default) + label, |
||||
& > input[type=time]:not(.browser-default) + label { |
||||
transform: translateY(-14px) scale(.8); |
||||
transform-origin: 0 0; |
||||
} |
||||
|
||||
.helper-text { |
||||
&::after { |
||||
opacity: 1; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
position: relative; |
||||
min-height: 18px; |
||||
display: block; |
||||
font-size: 12px; |
||||
color: rgba(0,0,0,.54); |
||||
} |
||||
|
||||
// Prefix Icons |
||||
.prefix { |
||||
position: absolute; |
||||
width: $input-height; |
||||
font-size: $input-icon-size; |
||||
transition: color .2s; |
||||
top: ($input-height - $input-icon-size) / 2; |
||||
|
||||
&.active { color: $input-focus-color; } |
||||
} |
||||
|
||||
.prefix ~ input, |
||||
.prefix ~ textarea, |
||||
.prefix ~ label, |
||||
.prefix ~ .validate ~ label, |
||||
.prefix ~ .helper-text, |
||||
.prefix ~ .autocomplete-content { |
||||
margin-left: 3rem; |
||||
width: 92%; |
||||
width: calc(100% - 3rem); |
||||
} |
||||
|
||||
.prefix ~ label { margin-left: 3rem; } |
||||
|
||||
@media #{$medium-and-down} { |
||||
.prefix ~ input { |
||||
width: 86%; |
||||
width: calc(100% - 3rem); |
||||
} |
||||
} |
||||
|
||||
@media #{$small-and-down} { |
||||
.prefix ~ input { |
||||
width: 80%; |
||||
width: calc(100% - 3rem); |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
/* Search Field */ |
||||
|
||||
.input-field input[type=search] { |
||||
display: block; |
||||
line-height: inherit; |
||||
transition: .3s background-color; |
||||
|
||||
.nav-wrapper & { |
||||
height: inherit; |
||||
padding-left: 4rem; |
||||
width: calc(100% - 4rem); |
||||
border: 0; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
&:focus:not(.browser-default) { |
||||
background-color: $input-background; |
||||
border: 0; |
||||
box-shadow: none; |
||||
color: #444; |
||||
|
||||
& + label i, |
||||
& ~ .mdi-navigation-close, |
||||
& ~ .material-icons { |
||||
color: #444; |
||||
} |
||||
} |
||||
|
||||
& + .label-icon { |
||||
transform: none; |
||||
left: 1rem; |
||||
} |
||||
|
||||
& ~ .mdi-navigation-close, |
||||
& ~ .material-icons { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 1rem; |
||||
color: transparent; |
||||
cursor: pointer; |
||||
font-size: $input-icon-size; |
||||
transition: .3s color; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* Textarea */ |
||||
|
||||
// Default textarea |
||||
textarea { |
||||
width: 100%; |
||||
height: $input-height; |
||||
background-color: transparent; |
||||
|
||||
&.materialize-textarea { |
||||
line-height: normal; |
||||
overflow-y: hidden; /* prevents scroll bar flash */ |
||||
padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */ |
||||
resize: none; |
||||
min-height: $input-height; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
|
||||
// For textarea autoresize |
||||
.hiddendiv { |
||||
visibility: hidden; |
||||
white-space: pre-wrap; |
||||
word-wrap: break-word; |
||||
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ |
||||
padding-top: 1.2rem; /* prevents text jump on Enter keypress */ |
||||
|
||||
// Reduces repaints |
||||
position: absolute; |
||||
top: 0; |
||||
z-index: -1; |
||||
} |
||||
|
||||
|
||||
/* Autocomplete */ |
||||
.autocomplete-content { |
||||
li { |
||||
.highlight { color: #444; } |
||||
|
||||
img { |
||||
height: $dropdown-item-height - 10; |
||||
width: $dropdown-item-height - 10; |
||||
margin: 5px 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Character Counter */ |
||||
.character-counter { |
||||
min-height: 18px; |
||||
} |
||||
@ -1,115 +0,0 @@
@@ -1,115 +0,0 @@
|
||||
/* Radio Buttons |
||||
========================================================================== */ |
||||
|
||||
// Remove default Radio Buttons |
||||
[type="radio"]:not(:checked), |
||||
[type="radio"]:checked { |
||||
position: absolute; |
||||
opacity: 0; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
[type="radio"]:not(:checked) + span, |
||||
[type="radio"]:checked + span { |
||||
position: relative; |
||||
padding-left: 35px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
height: 25px; |
||||
line-height: 25px; |
||||
font-size: 1rem; |
||||
transition: .28s ease; |
||||
user-select: none; |
||||
} |
||||
|
||||
[type="radio"] + span:before, |
||||
[type="radio"] + span:after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
margin: 4px; |
||||
width: 16px; |
||||
height: 16px; |
||||
z-index: 0; |
||||
transition: .28s ease; |
||||
} |
||||
|
||||
/* Unchecked styles */ |
||||
[type="radio"]:not(:checked) + span:before, |
||||
[type="radio"]:not(:checked) + span:after, |
||||
[type="radio"]:checked + span:before, |
||||
[type="radio"]:checked + span:after, |
||||
[type="radio"].with-gap:checked + span:before, |
||||
[type="radio"].with-gap:checked + span:after { |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
[type="radio"]:not(:checked) + span:before, |
||||
[type="radio"]:not(:checked) + span:after { |
||||
border: 2px solid $radio-empty-color; |
||||
} |
||||
|
||||
[type="radio"]:not(:checked) + span:after { |
||||
transform: scale(0); |
||||
} |
||||
|
||||
/* Checked styles */ |
||||
[type="radio"]:checked + span:before { |
||||
border: 2px solid transparent; |
||||
} |
||||
|
||||
[type="radio"]:checked + span:after, |
||||
[type="radio"].with-gap:checked + span:before, |
||||
[type="radio"].with-gap:checked + span:after { |
||||
border: $radio-border; |
||||
} |
||||
|
||||
[type="radio"]:checked + span:after, |
||||
[type="radio"].with-gap:checked + span:after { |
||||
background-color: $radio-fill-color; |
||||
} |
||||
|
||||
[type="radio"]:checked + span:after { |
||||
transform: scale(1.02); |
||||
} |
||||
|
||||
/* Radio With gap */ |
||||
[type="radio"].with-gap:checked + span:after { |
||||
transform: scale(.5); |
||||
} |
||||
|
||||
/* Focused styles */ |
||||
[type="radio"].tabbed:focus + span:before { |
||||
box-shadow: 0 0 0 10px rgba(0,0,0,.1); |
||||
} |
||||
|
||||
/* Disabled Radio With gap */ |
||||
[type="radio"].with-gap:disabled:checked + span:before { |
||||
border: 2px solid $input-disabled-color; |
||||
} |
||||
|
||||
[type="radio"].with-gap:disabled:checked + span:after { |
||||
border: none; |
||||
background-color: $input-disabled-color; |
||||
} |
||||
|
||||
/* Disabled style */ |
||||
[type="radio"]:disabled:not(:checked) + span:before, |
||||
[type="radio"]:disabled:checked + span:before { |
||||
background-color: transparent; |
||||
border-color: $input-disabled-color; |
||||
} |
||||
|
||||
[type="radio"]:disabled + span { |
||||
color: $input-disabled-color; |
||||
} |
||||
|
||||
[type="radio"]:disabled:not(:checked) + span:before { |
||||
border-color: $input-disabled-color; |
||||
} |
||||
|
||||
[type="radio"]:disabled:checked + span:after { |
||||
background-color: $input-disabled-color; |
||||
border-color: $input-disabled-solid-color; |
||||
} |
||||
@ -1,161 +0,0 @@
@@ -1,161 +0,0 @@
|
||||
/* Range |
||||
========================================================================== */ |
||||
|
||||
.range-field { |
||||
position: relative; |
||||
} |
||||
|
||||
input[type=range], |
||||
input[type=range] + .thumb { |
||||
@extend .no-select; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type=range] { |
||||
position: relative; |
||||
background-color: transparent; |
||||
border: none; |
||||
outline: none; |
||||
width: 100%; |
||||
margin: 15px 0; |
||||
padding: 0; |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
|
||||
input[type=range] + .thumb { |
||||
position: absolute; |
||||
top: 10px; |
||||
left: 0; |
||||
border: none; |
||||
height: 0; |
||||
width: 0; |
||||
border-radius: 50%; |
||||
background-color: $radio-fill-color; |
||||
margin-left: 7px; |
||||
|
||||
transform-origin: 50% 50%; |
||||
transform: rotate(-45deg); |
||||
|
||||
.value { |
||||
display: block; |
||||
width: 30px; |
||||
text-align: center; |
||||
color: $radio-fill-color; |
||||
font-size: 0; |
||||
transform: rotate(45deg); |
||||
} |
||||
|
||||
&.active { |
||||
border-radius: 50% 50% 50% 0; |
||||
|
||||
.value { |
||||
color: $input-background; |
||||
margin-left: -1px; |
||||
margin-top: 8px; |
||||
font-size: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Shared |
||||
@mixin range-track { |
||||
height: $track-height; |
||||
background: #c2c0c2; |
||||
border: none; |
||||
} |
||||
|
||||
@mixin range-thumb { |
||||
border: none; |
||||
height: $range-height; |
||||
width: $range-width; |
||||
border-radius: 50%; |
||||
background: $radio-fill-color; |
||||
transition: box-shadow .3s; |
||||
} |
||||
|
||||
// WebKit |
||||
input[type=range] { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
input[type=range]::-webkit-slider-runnable-track { |
||||
@include range-track; |
||||
} |
||||
|
||||
input[type=range]::-webkit-slider-thumb { |
||||
@include range-thumb; |
||||
-webkit-appearance: none; |
||||
background-color: $radio-fill-color; |
||||
transform-origin: 50% 50%; |
||||
margin: -5px 0 0 0; |
||||
|
||||
} |
||||
|
||||
.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb { |
||||
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); |
||||
} |
||||
|
||||
// FireFox |
||||
input[type=range] { |
||||
/* fix for FF unable to apply focus style bug */ |
||||
border: 1px solid white; |
||||
|
||||
/*required for proper track sizing in FF*/ |
||||
} |
||||
|
||||
input[type=range]::-moz-range-track { |
||||
@include range-track; |
||||
} |
||||
|
||||
input[type=range]::-moz-focus-inner { |
||||
border: 0; |
||||
} |
||||
|
||||
input[type=range]::-moz-range-thumb { |
||||
@include range-thumb; |
||||
margin-top: -5px; |
||||
} |
||||
|
||||
// hide the outline behind the border |
||||
input[type=range]:-moz-focusring { |
||||
outline: 1px solid #fff; |
||||
outline-offset: -1px; |
||||
} |
||||
|
||||
.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb { |
||||
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); |
||||
} |
||||
|
||||
// IE 10+ |
||||
input[type=range]::-ms-track { |
||||
height: $track-height; |
||||
|
||||
// remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead |
||||
background: transparent; |
||||
|
||||
// leave room for the larger thumb to overflow with a transparent border */ |
||||
border-color: transparent; |
||||
border-width: 6px 0; |
||||
|
||||
/*remove default tick marks*/ |
||||
color: transparent; |
||||
} |
||||
|
||||
input[type=range]::-ms-fill-lower { |
||||
background: #777; |
||||
} |
||||
|
||||
input[type=range]::-ms-fill-upper { |
||||
background: #ddd; |
||||
} |
||||
|
||||
input[type=range]::-ms-thumb { |
||||
@include range-thumb; |
||||
} |
||||
|
||||
.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb { |
||||
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); |
||||
} |
||||
@ -1,180 +0,0 @@
@@ -1,180 +0,0 @@
|
||||
/* Select Field |
||||
========================================================================== */ |
||||
|
||||
select { display: none; } |
||||
select.browser-default { display: block; } |
||||
|
||||
select { |
||||
background-color: $select-background; |
||||
width: 100%; |
||||
padding: $select-padding; |
||||
border: $select-border; |
||||
border-radius: $select-radius; |
||||
height: $input-height; |
||||
} |
||||
|
||||
.select-label { |
||||
position: absolute; |
||||
} |
||||
|
||||
.select-wrapper { |
||||
&.valid .helper-text[data-success], |
||||
&.invalid ~ .helper-text[data-error] { |
||||
@extend %hidden-text; |
||||
} |
||||
|
||||
&.valid { |
||||
& > input.select-dropdown { |
||||
@extend %valid-input-style; |
||||
} |
||||
|
||||
& ~ .helper-text:after { |
||||
@extend %custom-success-message; |
||||
} |
||||
} |
||||
|
||||
&.invalid { |
||||
& > input.select-dropdown, |
||||
& > input.select-dropdown:focus { |
||||
@extend %invalid-input-style; |
||||
} |
||||
|
||||
& ~ .helper-text:after { |
||||
@extend %custom-error-message; |
||||
} |
||||
} |
||||
|
||||
&.valid + label, |
||||
&.invalid + label { |
||||
width: 100%; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
& + label:after { |
||||
@extend %input-after-style; |
||||
} |
||||
|
||||
position: relative; |
||||
|
||||
input.select-dropdown { |
||||
&:focus { |
||||
border-bottom: 1px solid $input-focus-color; |
||||
} |
||||
position: relative; |
||||
cursor: pointer; |
||||
background-color: transparent; |
||||
border: none; |
||||
border-bottom: $input-border; |
||||
outline: none; |
||||
height: $input-height; |
||||
line-height: $input-height; |
||||
width: 100%; |
||||
font-size: $input-font-size; |
||||
margin: $input-margin; |
||||
padding: 0; |
||||
display: block; |
||||
user-select:none; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.caret { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
margin: auto 0; |
||||
z-index: 0; |
||||
fill: rgba(0,0,0,.87); |
||||
} |
||||
|
||||
& + label { |
||||
position: absolute; |
||||
top: -26px; |
||||
font-size: $label-font-size; |
||||
} |
||||
} |
||||
|
||||
// Disabled styles |
||||
select:disabled { |
||||
color: $input-disabled-color; |
||||
} |
||||
|
||||
.select-wrapper.disabled { |
||||
+ label { |
||||
color: $input-disabled-color; |
||||
} |
||||
.caret { |
||||
fill: $input-disabled-color; |
||||
} |
||||
} |
||||
|
||||
.select-wrapper input.select-dropdown:disabled { |
||||
color: $input-disabled-color; |
||||
cursor: default; |
||||
user-select: none; |
||||
} |
||||
|
||||
.select-wrapper i { |
||||
color: $select-disabled-color; |
||||
} |
||||
|
||||
.select-dropdown li.disabled, |
||||
.select-dropdown li.disabled > span, |
||||
.select-dropdown li.optgroup { |
||||
color: $select-disabled-color; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
body.keyboard-focused { |
||||
.select-dropdown.dropdown-content li:focus { |
||||
background-color: $select-option-focus; |
||||
} |
||||
} |
||||
|
||||
.select-dropdown.dropdown-content { |
||||
li { |
||||
&:hover { |
||||
background-color: $select-option-hover; |
||||
} |
||||
|
||||
&.selected { |
||||
background-color: $select-option-selected; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Prefix Icons |
||||
.prefix ~ .select-wrapper { |
||||
margin-left: 3rem; |
||||
width: 92%; |
||||
width: calc(100% - 3rem); |
||||
} |
||||
|
||||
.prefix ~ label { margin-left: 3rem; } |
||||
|
||||
// Icons |
||||
.select-dropdown li { |
||||
img { |
||||
height: $dropdown-item-height - 10; |
||||
width: $dropdown-item-height - 10; |
||||
margin: 5px 15px; |
||||
float: right; |
||||
} |
||||
} |
||||
|
||||
// Optgroup styles |
||||
.select-dropdown li.optgroup { |
||||
border-top: 1px solid $dropdown-hover-bg-color; |
||||
|
||||
&.selected > span { |
||||
color: rgba(0, 0, 0, .7); |
||||
} |
||||
|
||||
& > span { |
||||
color: rgba(0, 0, 0, .4); |
||||
} |
||||
|
||||
& ~ li.optgroup-option { |
||||
padding-left: 1rem; |
||||
} |
||||
} |
||||
@ -1,89 +0,0 @@
@@ -1,89 +0,0 @@
|
||||
/* Switch |
||||
========================================================================== */ |
||||
|
||||
.switch, |
||||
.switch * { |
||||
-webkit-tap-highlight-color: transparent; |
||||
user-select: none; |
||||
} |
||||
|
||||
.switch label { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.switch label input[type=checkbox] { |
||||
opacity: 0; |
||||
width: 0; |
||||
height: 0; |
||||
|
||||
&:checked + .lever { |
||||
background-color: $switch-checked-lever-bg; |
||||
|
||||
&:before, &:after { |
||||
left: 18px; |
||||
} |
||||
|
||||
&:after { |
||||
background-color: $switch-bg-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.switch label .lever { |
||||
content: ""; |
||||
display: inline-block; |
||||
position: relative; |
||||
width: 36px; |
||||
height: 14px; |
||||
background-color: $switch-unchecked-lever-bg; |
||||
border-radius: $switch-radius; |
||||
margin-right: 10px; |
||||
transition: background 0.3s ease; |
||||
vertical-align: middle; |
||||
margin: 0 16px; |
||||
|
||||
&:before, &:after { |
||||
content: ""; |
||||
position: absolute; |
||||
display: inline-block; |
||||
width: 20px; |
||||
height: 20px; |
||||
border-radius: 50%; |
||||
left: 0; |
||||
top: -3px; |
||||
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; |
||||
} |
||||
|
||||
&:before { |
||||
background-color: transparentize($switch-bg-color, .85); |
||||
} |
||||
|
||||
&:after { |
||||
background-color: $switch-unchecked-bg; |
||||
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); |
||||
} |
||||
} |
||||
|
||||
// Switch active style |
||||
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, |
||||
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { |
||||
transform: scale(2.4); |
||||
background-color: transparentize($switch-bg-color, .85); |
||||
} |
||||
|
||||
input[type=checkbox]:not(:disabled) ~ .lever:active:before, |
||||
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before { |
||||
transform: scale(2.4); |
||||
background-color: rgba(0,0,0,.08); |
||||
} |
||||
|
||||
// Disabled Styles |
||||
.switch input[type=checkbox][disabled] + .lever { |
||||
cursor: default; |
||||
background-color: rgba(0,0,0,.12); |
||||
} |
||||
|
||||
.switch label input[type=checkbox][disabled] + .lever:after, |
||||
.switch label input[type=checkbox][disabled]:checked + .lever:after { |
||||
background-color: $input-disabled-solid-color; |
||||
} |
||||
@ -0,0 +1,352 @@
@@ -0,0 +1,352 @@
|
||||
/*! |
||||
ckin v0.0.1: Custom HTML5 Video Player Skins. |
||||
(c) 2017 |
||||
MIT License |
||||
git+https://github.com/hunzaboy/ckin.git |
||||
*/ |
||||
|
||||
/* video { |
||||
width: 100%; |
||||
height: auto; |
||||
cursor: pointer; |
||||
} */ |
||||
|
||||
.ckin { |
||||
&__player { |
||||
letter-spacing: 0.02em; |
||||
} |
||||
|
||||
&__overlay { |
||||
position: relative; |
||||
|
||||
&:before { |
||||
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%); |
||||
} |
||||
|
||||
&--2:before { |
||||
background: rgba(24, 24, 24, 0.8); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ckin__player.ckin__fullscreen { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
z-index: 10000000; |
||||
background: #000; |
||||
border-radius: 0 !important; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
} |
||||
|
||||
.default { |
||||
border: 0 solid rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); |
||||
position: relative; |
||||
font-size: 0; |
||||
overflow: hidden; |
||||
//border-radius: 5px; |
||||
cursor: pointer; |
||||
|
||||
&:before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
//border-radius: 5px; |
||||
transition: opacity .2s; |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
&__title { |
||||
position: absolute; |
||||
left: 20px; |
||||
top: 20px; |
||||
z-index: 1; |
||||
font-size: 24px; |
||||
color: rgba(255, 255, 255, 0.8); |
||||
font-style: italic; |
||||
} |
||||
|
||||
&__button { |
||||
background: none; |
||||
border: 0; |
||||
color: #fff; |
||||
outline: 0; |
||||
padding: 3px 10px 6px 10px; |
||||
/* padding: 6px 10px 6px 10px; */ |
||||
cursor: pointer; |
||||
font-size: 24px; |
||||
line-height: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
i { |
||||
-ms-flex-item-align: center; |
||||
-ms-grid-row-align: center; |
||||
align-self: center; |
||||
} |
||||
|
||||
&--big { |
||||
background: none; |
||||
border: 0; |
||||
line-height: 1; |
||||
color: #fff; |
||||
text-align: center; |
||||
outline: 0; |
||||
padding: 0; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
opacity: 1; |
||||
visibility: visible; |
||||
top: 50%; |
||||
left: 50%; |
||||
-ms-transform: translate(-50%, -50%) scale(1); |
||||
transform: translate(-50%, -50%) scale(1); |
||||
font-size: 64px; |
||||
transition: all .2s; |
||||
-ms-touch-action: manipulation; |
||||
touch-action: manipulation; |
||||
} |
||||
} |
||||
|
||||
&__slider { |
||||
width: 10px; |
||||
height: 30px; |
||||
} |
||||
|
||||
&__controls { |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
left: 0; |
||||
transition: all .3s; |
||||
/* background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%); */ |
||||
/* font-size: 32px; */ |
||||
text-align: left; |
||||
direction: ltr; |
||||
/* padding-top: 7px; */ |
||||
border-radius: 0 0 5px 5px; |
||||
z-index: 3; |
||||
} |
||||
} |
||||
|
||||
.default.is-playing:before { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
-ms-transform: translate(-50%, -50%) scale(1.3); |
||||
transform: translate(-50%, -50%) scale(1.3); |
||||
} |
||||
|
||||
.default.is-playing .default__button--big { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.default.is-playing .default__controls { |
||||
-ms-transform: translateY(52px); |
||||
transform: translateY(52px); |
||||
} |
||||
|
||||
.default.is-playing:hover .default__controls { |
||||
-ms-transform: translateY(0); |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
.default .progress { |
||||
position: relative; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
margin: 0 8px; |
||||
height: 5px; |
||||
transition: height 0.3s; |
||||
background: rgba(255, 255, 255, 0.38); |
||||
cursor: pointer; |
||||
border-radius: 4px; |
||||
overflow: visible; |
||||
} |
||||
|
||||
.default .progress__filled { |
||||
width: 0%; |
||||
background: #63a2e3; |
||||
/* -ms-flex: 0; |
||||
flex: 0; |
||||
-ms-flex-preferred-size: 0%; |
||||
flex-basis: 0%; */ |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
@media (max-width: 480px) { |
||||
.ckin__player button { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
|
||||
video::-webkit-media-controls-enclosure { |
||||
display: none !important; |
||||
} |
||||
|
||||
.progress input { |
||||
-webkit-appearance: none; |
||||
-moz-appearance: none; |
||||
background: transparent; |
||||
height: 4.5px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.progress input[type=range]:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.progress input[type=range]::-webkit-slider-runnable-track { |
||||
width: 100%; |
||||
cursor: pointer; |
||||
border-radius: 1.3px; |
||||
-webkit-appearance: none; |
||||
transition: all 0.4s ease; |
||||
} |
||||
|
||||
.progress input[type=range]::-webkit-slider-thumb { |
||||
height: 15px; |
||||
width: 15px; |
||||
border-radius: 16px; |
||||
background: #63a2e3; |
||||
cursor: pointer; |
||||
-webkit-appearance: none; |
||||
margin-left: -1px; |
||||
} |
||||
|
||||
.progress input[type=range]:focus::-webkit-slider-runnable-track { |
||||
background: transparent; |
||||
} |
||||
|
||||
.progress input[type=range].volume { |
||||
height: 5px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.progress input[type=range].volume::-webkit-slider-runnable-track { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.progress input[type=range].volume::-webkit-slider-thumb { |
||||
margin-left: 0; |
||||
height: 14px; |
||||
width: 14px; |
||||
background: #fff; |
||||
} |
||||
|
||||
.progress input[type=range]::-moz-range-track { |
||||
width: 100%; |
||||
height: 8.4px; |
||||
cursor: pointer; |
||||
border: 1px solid transparent; |
||||
background: transparent; |
||||
border-radius: 1.3px; |
||||
} |
||||
|
||||
.progress input[type=range]::-moz-range-thumb { |
||||
height: 14px; |
||||
width: 14px; |
||||
border-radius: 50px; |
||||
border: 1px solid #63a2e3; |
||||
background: #63a2e3; |
||||
cursor: pointer; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.progress input[type=range]:focus::-moz-range-track { |
||||
outline: none; |
||||
} |
||||
|
||||
.progress input[type=range].volume::-moz-range-thumb { |
||||
border: 1px solid #fff; |
||||
background: #fff; |
||||
} |
||||
|
||||
.seek { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 100%; |
||||
cursor: pointer; |
||||
margin: 0; |
||||
} |
||||
|
||||
.seek:hover + .seek-tooltip { |
||||
display: block; |
||||
} |
||||
|
||||
.left-controls { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.bottom-controls { |
||||
padding: 3px 4px 5px 4px; |
||||
//padding: 5px 4px 5px 4px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.time { |
||||
float: right; |
||||
padding: 7px 0px 9px 14px; |
||||
font-size: 15px; |
||||
color: white; |
||||
} |
||||
|
||||
.circle .circle-time { |
||||
color: #fff; |
||||
font-size: 13px; |
||||
float: left; |
||||
margin-top: 1px; |
||||
} |
||||
.circle .circle-time-left { |
||||
position: absolute; |
||||
top: 3px; |
||||
left: 2px; |
||||
border-radius: 12px; |
||||
background-color: rgba(0, 0, 0, 0.23); |
||||
padding: 1px 7px 2px 7px; |
||||
z-index: 2; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
video[data-ckin="circle"] { |
||||
-webkit-clip-path: ellipse(100px 100px at center); |
||||
clip-path: ellipse(100px 100px at center); |
||||
} |
||||
.progress-ring { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
cursor: pointer; |
||||
} |
||||
.progress-ring__circle { |
||||
transform-origin: center; |
||||
transform: rotate(-90deg); |
||||
transition: stroke-dashoffset 0.15s; |
||||
} |
||||
|
||||
.ckin__player.circle { |
||||
position: relative; |
||||
width: 200px; |
||||
height: 200px; |
||||
} |
||||
|
||||
.iconVolume { |
||||
padding: 0 1px 0 3px; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 1.25rem; |
||||
color: #fff; |
||||
} |
||||
@ -1,27 +0,0 @@
@@ -1,27 +0,0 @@
|
||||
$lightblue: #e6ebee; |
||||
$blue: #4ea4f6; |
||||
$darkblue: #1da1f1; |
||||
|
||||
$lightgreen: #eeffde; |
||||
$green: #4dcd5e; |
||||
$darkgreen: #50af4f; |
||||
|
||||
$dotgreen: #0ac630; |
||||
|
||||
$lightgrey: #dadce0; |
||||
$grey: #c4c9cc; |
||||
$darkgrey: #707579; |
||||
|
||||
$light: rgba($darkgrey, 0.08); |
||||
|
||||
$text: #000000; |
||||
$bg: #ffffff; |
||||
|
||||
$text-size: 16px; |
||||
$time-size: 12px; |
||||
|
||||
@function anim($elem) { |
||||
@return 150ms ease-out $elem; |
||||
} |
||||
|
||||
@import "ico"; |
||||
@ -1,2 +1,2 @@
@@ -1,2 +1,2 @@
|
||||
@import "partials/vars"; |
||||
@import "partials/ico"; |
||||
@import "partials/fonts"; |
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue