Compare commits
3 Commits
main
...
feature/mo
Author | SHA1 | Date |
---|---|---|
|
0fc39e81d7 | 7 months ago |
|
cdea98e7a0 | 7 months ago |
|
142feb1576 | 7 months ago |
@ -1,77 +0,0 @@ |
|||||
function clearFromLocalStorage() { |
|
||||
localStorage.removeItem(LOCAL_STORAGE_CANVAS_NAME); |
|
||||
localStorage.removeItem(LOCAL_STORAGE_DIMENSIONS_NAME); |
|
||||
} |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// history {{{
|
|
||||
|
|
||||
function saveState(undoStack, redoStack, maxHistory) { |
|
||||
if (undoStack.length >= maxHistory) { |
|
||||
undoStack.shift(); |
|
||||
} |
|
||||
undoStack.push({ |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}); |
|
||||
redoStack = []; |
|
||||
} |
|
||||
|
|
||||
function undo(canvas, ctx, undoStack, redoStack) { |
|
||||
if (undoStack.length > 0) { |
|
||||
const currentState = { |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}; |
|
||||
|
|
||||
redoStack.push(currentState); // Save current state to the redo stack
|
|
||||
const lastState = undoStack.pop(); // Get the last state from the undo stack
|
|
||||
|
|
||||
canvas.width = lastState.width; |
|
||||
canvas.height = lastState.height; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
|
|
||||
const img = new Image(); |
|
||||
img.src = lastState.imageData; |
|
||||
img.onload = function() { |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
}; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function redo() { |
|
||||
if (redoStack.length > 0) { |
|
||||
const currentState = { |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}; |
|
||||
|
|
||||
undoStack.push(currentState); // Save current state to the undo stack
|
|
||||
const nextState = redoStack.pop(); // Get the last state from the redo stack
|
|
||||
|
|
||||
canvas.width = nextState.width; |
|
||||
canvas.height = nextState.height; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
|
|
||||
const img = new Image(); |
|
||||
img.src = nextState.imageData; |
|
||||
img.onload = function() { |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
}; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
@ -1,724 +0,0 @@ |
|||||
const colorPreview = document.createElement('div'); |
|
||||
colorPreview.id = 'color-preview'; |
|
||||
colorPreview.className = 'puck'; |
|
||||
colorPreview.style.backgroundColor = color; |
|
||||
|
|
||||
menuBar.appendChild(colorPreview); |
|
||||
|
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// helpers {{{
|
|
||||
|
|
||||
|
|
||||
function saveCanvas() { |
|
||||
const dataURL = canvas.toDataURL(); |
|
||||
const dimensions = `${canvas.width}x${canvas.height}`; |
|
||||
localStorage.setItem('mixxCanvas', dataURL); |
|
||||
localStorage.setItem('mixxDimensions', dimensions); |
|
||||
console.log('Canvas saved'); |
|
||||
} |
|
||||
|
|
||||
function loadCanvas() { |
|
||||
const dataURL = localStorage.getItem('mixxCanvas'); |
|
||||
const dimensions = localStorage.getItem('mixxDimensions'); |
|
||||
if (dataURL && dimensions) { |
|
||||
const img = new Image(); |
|
||||
img.src = dataURL; |
|
||||
img.onload = function() { |
|
||||
canvas.width = dimensions.split('x')[0]; |
|
||||
canvas.height = dimensions.split('x')[1]; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
} |
|
||||
} else { |
|
||||
console.log('No saved canvas found'); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function clearCanvasFromLocalStorage() { |
|
||||
localStorage.removeItem('savedCanvas'); |
|
||||
localStorage.removeItem('canvasDimensions'); |
|
||||
} |
|
||||
|
|
||||
function saveState() { |
|
||||
if (undoStack.length >= maxHistory) { |
|
||||
undoStack.shift(); // Remove the oldest state if the stack exceeds the limit
|
|
||||
} |
|
||||
|
|
||||
undoStack.push({ |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}); |
|
||||
|
|
||||
redoStack = []; // Clear the redo stack whenever a new action is performed
|
|
||||
} |
|
||||
|
|
||||
function undo() { |
|
||||
if (undoStack.length > 0) { |
|
||||
const currentState = { |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}; |
|
||||
|
|
||||
redoStack.push(currentState); // Save current state to the redo stack
|
|
||||
const lastState = undoStack.pop(); // Get the last state from the undo stack
|
|
||||
|
|
||||
canvas.width = lastState.width; |
|
||||
canvas.height = lastState.height; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
|
|
||||
const img = new Image(); |
|
||||
img.src = lastState.imageData; |
|
||||
img.onload = function() { |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
}; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function redo() { |
|
||||
if (redoStack.length > 0) { |
|
||||
const currentState = { |
|
||||
imageData: canvas.toDataURL(), |
|
||||
width: canvas.width, |
|
||||
height: canvas.height |
|
||||
}; |
|
||||
|
|
||||
undoStack.push(currentState); // Save current state to the undo stack
|
|
||||
const nextState = redoStack.pop(); // Get the last state from the redo stack
|
|
||||
|
|
||||
canvas.width = nextState.width; |
|
||||
canvas.height = nextState.height; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
|
|
||||
const img = new Image(); |
|
||||
img.src = nextState.imageData; |
|
||||
img.onload = function() { |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
}; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function getPositionOnCanvas(e) { |
|
||||
const rect = canvas.getBoundingClientRect(); |
|
||||
return { |
|
||||
x: Math.round((e.clientX - rect.left) / zoom), |
|
||||
y: Math.round((e.clientY - rect.top) / zoom), |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
function drawCircle(x, y) { |
|
||||
ctx.beginPath(); |
|
||||
ctx.arc(x, y, brushSize / 2, 0, 2 * Math.PI, false); |
|
||||
ctx.fillStyle = color; |
|
||||
ctx.fill(); |
|
||||
} |
|
||||
|
|
||||
function drawLineWithCircles(x1, y1, x2, y2) { |
|
||||
const dx = x2 - x1; |
|
||||
const dy = y2 - y1; |
|
||||
const distance = Math.sqrt(dx * dx + dy * dy); |
|
||||
const steps = Math.ceil(distance / (brushSize / 5)); |
|
||||
|
|
||||
for (let i = 0; i <= steps; i++) { |
|
||||
const x = x1 + (dx * i) / steps; |
|
||||
const y = y1 + (dy * i) / steps; |
|
||||
drawCircle(x, y); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function saveCanvasContents() { |
|
||||
tempCanvas = document.createElement('canvas'); |
|
||||
tempCanvas.width = canvas.width; |
|
||||
tempCanvas.height = canvas.height; |
|
||||
const tempCtx = tempCanvas.getContext('2d'); |
|
||||
tempCtx.drawImage(canvas, 0, 0); |
|
||||
} |
|
||||
|
|
||||
function updateColorPreview() { |
|
||||
colorPreview.style.backgroundColor = color; |
|
||||
} |
|
||||
|
|
||||
function hexToRgbArray(hex) { |
|
||||
if (hex.startsWith('#')) { |
|
||||
hex = hex.slice(1); |
|
||||
} |
|
||||
|
|
||||
if (hex.length === 3) { |
|
||||
hex = hex.split('').map(char => char + char).join(''); |
|
||||
} |
|
||||
|
|
||||
const bigint = parseInt(hex, 16); |
|
||||
return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255]; |
|
||||
} |
|
||||
|
|
||||
function floodFill(x, y, fillColor) { |
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
|
||||
const data = imageData.data; |
|
||||
|
|
||||
const targetColor = getColorAtPixel(data, x, y); |
|
||||
const fillColorArray = hexToRgbArray(fillColor); |
|
||||
|
|
||||
if (colorsMatch(targetColor, fillColorArray)) { |
|
||||
return; // The clicked point is already the fill color
|
|
||||
} |
|
||||
|
|
||||
const stack = [{x, y}]; |
|
||||
|
|
||||
while (stack.length > 0) { |
|
||||
const {x, y} = stack.pop(); |
|
||||
const currentColor = getColorAtPixel(data, x, y); |
|
||||
|
|
||||
if (colorsMatch(currentColor, targetColor)) { |
|
||||
setColorAtPixel(data, x, y, fillColorArray); |
|
||||
|
|
||||
if (x > 0) stack.push({x: x - 1, y}); |
|
||||
if (x < canvas.width - 1) stack.push({x: x + 1, y}); |
|
||||
if (y > 0) stack.push({x, y: y - 1}); |
|
||||
if (y < canvas.height - 1) stack.push({x, y: y + 1}); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
ctx.putImageData(imageData, 0, 0); |
|
||||
} |
|
||||
|
|
||||
function getColorAtPixel(data, x, y) { |
|
||||
const index = (y * canvas.width + x) * 4; |
|
||||
return [data[index], data[index + 1], data[index + 2], data[index + 3]]; |
|
||||
} |
|
||||
|
|
||||
function setColorAtPixel(data, x, y, color) { |
|
||||
const index = (y * canvas.width + x) * 4; |
|
||||
data[index] = color[0]; |
|
||||
data[index + 1] = color[1]; |
|
||||
data[index + 2] = color[2]; |
|
||||
data[index + 3] = 255; // Set alpha to fully opaque
|
|
||||
} |
|
||||
|
|
||||
function colorsMatch(a, b) { |
|
||||
return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3]; |
|
||||
} |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// mousedown {{{
|
|
||||
|
|
||||
canvasArea.addEventListener('mousedown', (e) => { |
|
||||
if (e.target.closest('.puck')) return; |
|
||||
|
|
||||
startX = e.clientX; |
|
||||
startY = e.clientY; |
|
||||
canvasStartX = getPositionOnCanvas(e).x; |
|
||||
canvasStartY = getPositionOnCanvas(e).y; |
|
||||
saveCanvasContents(); |
|
||||
isMouseDown = true; |
|
||||
|
|
||||
if ( |
|
||||
tool === 'brush' || |
|
||||
tool === 'content-move' || |
|
||||
tool === 'resize' || |
|
||||
tool === 'zoom' || |
|
||||
tool === 'bucket-fill' |
|
||||
) { |
|
||||
saveState(); |
|
||||
} |
|
||||
|
|
||||
if (tool === 'brush') { |
|
||||
console.log('brush'); |
|
||||
drawCircle(canvasStartX, canvasStartY); |
|
||||
} else if (tool === 'bucket-fill') { |
|
||||
floodFill(canvasStartX, canvasStartY, color); |
|
||||
return; |
|
||||
} else if (tool === 'move') { |
|
||||
startX = e.clientX - canvasContainer.offsetLeft; |
|
||||
startY = e.clientY - canvasContainer.offsetTop; |
|
||||
} else if (tool === 'color-picker') { |
|
||||
const imageData = ctx.getImageData(canvasStartX, canvasStartY, 1, 1).data; |
|
||||
const pickedColor = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`; |
|
||||
color = pickedColor; |
|
||||
console.log('Picked Color:', pickedColor); |
|
||||
updateColorPreview(); |
|
||||
return; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// mousemove {{{
|
|
||||
|
|
||||
canvasArea.addEventListener('mousemove', (e) => { |
|
||||
|
|
||||
endX = e.clientX; |
|
||||
endY = e.clientY; |
|
||||
dX = endX - startX; |
|
||||
dY = endY - startY; |
|
||||
|
|
||||
canvasEndX = getPositionOnCanvas(e).x; |
|
||||
canvasEndY = getPositionOnCanvas(e).y; |
|
||||
canvasDX = canvasEndX - canvasStartX; |
|
||||
canvasDY = canvasEndY - canvasStartY; |
|
||||
|
|
||||
if (tool == 'brush-size') { |
|
||||
brushPreview.style.display = 'block'; |
|
||||
brushPreview.style.width = brushSize + 'px'; |
|
||||
brushPreview.style.height = brushSize + 'px'; |
|
||||
brushPreview.style.left = e.clientX - brushSize / 2 + 'px'; |
|
||||
brushPreview.style.top = e.clientY - brushSize / 2 + 'px'; |
|
||||
} |
|
||||
|
|
||||
if (isMouseDown) { |
|
||||
|
|
||||
if (tool === 'brush-size') { |
|
||||
brushSize += dX * dBrushSize; |
|
||||
if (brushSize < 1) brushSize = 1; |
|
||||
if (brushSize > maxBrushSize) brushSize = maxBrushSize; |
|
||||
startX = endX; |
|
||||
} else if (tool === 'brush') { |
|
||||
drawLineWithCircles(canvasStartX, canvasStartY, canvasEndX, canvasEndY); |
|
||||
|
|
||||
canvasStartX = canvasEndX; |
|
||||
canvasStartY = canvasEndY; |
|
||||
|
|
||||
} else if (tool === 'content-move') { |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.fillStyle = backgroundColor; |
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(tempCanvas, dX, dY); |
|
||||
} else if (tool === 'move') { |
|
||||
canvasContainer.style.left = dX + 'px'; |
|
||||
canvasContainer.style.top = dY + 'px'; |
|
||||
} else if (tool === 'zoom') { |
|
||||
zoom += dX * dZoom; |
|
||||
if (zoom < 0.1) zoom = 0.1; |
|
||||
canvas.style.height = canvasHeight * zoom + 'px'; |
|
||||
canvas.style.width = canvasWidth * zoom + 'px'; |
|
||||
startX = endX; |
|
||||
} else if (tool === 'resize') { |
|
||||
let newWidth = canvasWidth + dX / zoom; |
|
||||
let newHeight = canvasHeight + dY / zoom; |
|
||||
if (newWidth > 0 && newHeight > 0) { |
|
||||
canvas.width = newWidth; |
|
||||
canvas.height = newHeight; |
|
||||
canvas.style.width = newWidth * zoom + 'px'; |
|
||||
canvas.style.height = newHeight * zoom + 'px'; |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.fillStyle = backgroundColor; |
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.drawImage(tempCanvas, 0, 0); |
|
||||
} |
|
||||
} else if (tool === 'color-mix') { |
|
||||
|
|
||||
const imageData = ctx.getImageData(canvasEndX, canvasEndY, 1, 1).data; |
|
||||
const canvasColor = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`; |
|
||||
|
|
||||
const distance = Math.sqrt(Math.pow(e.clientX - startX, 2) + Math.pow(e.clientY - startY, 2)); |
|
||||
const t = Math.min(1, distance / 300); |
|
||||
|
|
||||
const mixedColor = mixbox.lerp(color, canvasColor, t); |
|
||||
|
|
||||
color = mixedColor; |
|
||||
|
|
||||
startX = e.clientX; |
|
||||
startY = e.clientY; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
updateInfos(); |
|
||||
updateColorPreview(); |
|
||||
}); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// mouseup {{{
|
|
||||
|
|
||||
canvasArea.addEventListener('mouseup', (e) => { |
|
||||
isMouseDown = false; |
|
||||
if (tool === 'brush') { |
|
||||
ctx.closePath(); |
|
||||
} else if (tool === 'resize') { |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
} |
|
||||
|
|
||||
updateColorPreview(); |
|
||||
}); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// mouseleave {{{
|
|
||||
|
|
||||
canvasArea.addEventListener('mouseleave', (e) => { |
|
||||
isMouseDown = false; |
|
||||
brushPreview.style.display = 'none'; |
|
||||
}); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// keybindings {{{
|
|
||||
|
|
||||
const toolKeyBindings = {} |
|
||||
|
|
||||
const functionKeyBindings = { |
|
||||
} |
|
||||
|
|
||||
document.addEventListener('keydown', (e) => { |
|
||||
if (keyDown) return; |
|
||||
|
|
||||
const newTool = toolKeyBindings[e.key.toLowerCase()] |
|
||||
if (newTool) { |
|
||||
prevTool = tool; |
|
||||
keyDown = true; |
|
||||
changeTool(newTool); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
const func = functionKeyBindings[e.key]; |
|
||||
if (func) { |
|
||||
func(); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
document.addEventListener('keyup', (e) => { |
|
||||
const currentTool = toolKeyBindings[e.key.toLowerCase()] |
|
||||
if (currentTool) { |
|
||||
keyDown = false; |
|
||||
if (e.key == e.key.toLowerCase()) { |
|
||||
changeTool(prevTool); |
|
||||
return; |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// tools {{{
|
|
||||
|
|
||||
var toolButtons = []; |
|
||||
|
|
||||
function changeTool(toolName) { |
|
||||
toolButtons.forEach(button => button.button.classList.remove('active')); |
|
||||
toolButtons.find(button => button.name === toolName).button.classList.add('active'); |
|
||||
tool = toolName; |
|
||||
brushPreview.style.display = 'none'; |
|
||||
updateInfos(); |
|
||||
} |
|
||||
|
|
||||
function createToolButton(toolName, displayName, icon, key=undefined) { |
|
||||
const button = document.createElement('div'); |
|
||||
button.classList.add('button'); |
|
||||
button.classList.add('tool'); |
|
||||
button.innerHTML = icon; |
|
||||
button.title = displayName; |
|
||||
button.addEventListener('click', () => { |
|
||||
changeTool(toolName); |
|
||||
}); |
|
||||
|
|
||||
if (key) { |
|
||||
const keyHint = document.createElement('span'); |
|
||||
keyHint.className = 'key-hint'; |
|
||||
keyHint.innerHTML = key; |
|
||||
button.appendChild(keyHint); |
|
||||
toolKeyBindings[key] = toolName; |
|
||||
} |
|
||||
|
|
||||
toolBar.appendChild(button); |
|
||||
toolButtons.push({'name': toolName, 'button': button}); |
|
||||
return button; |
|
||||
} |
|
||||
|
|
||||
createToolButton('brush', 'Brush', '<i class="fa-solid fa-paintbrush"></i>', 'b'); |
|
||||
createToolButton('content-move', 'Move Content', '<i class="fa-regular fa-hand"></i>', 'h'); |
|
||||
createToolButton('move', 'Move Canvas', '<i class="fa-solid fa-arrows-up-down-left-right"></i>', 'm'); |
|
||||
createToolButton('zoom', 'Zoom', '<i class="fa-solid fa-magnifying-glass"></i>', 'z'); |
|
||||
createToolButton('resize', 'Resize', '<i class="fa-solid fa-ruler-combined"></i>', 'r'); |
|
||||
createToolButton('color-picker', 'Color Picker', '<i class="fa-solid fa-eye-dropper"></i>', 'a'); |
|
||||
createToolButton('color-mix', 'Color Mix', '<i class="fa-solid fa-mortar-pestle"></i>', 'x'); |
|
||||
createToolButton('brush-size', 'Brush Size', '<i class="fa-regular fa-circle-dot"></i>', 'd'); |
|
||||
createToolButton('bucket-fill', 'Bucket Fill', '<i class="fa-solid fa-fill"></i>', 'k'); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// menu functons {{{
|
|
||||
|
|
||||
function flipCanvasHorizontally(e) { |
|
||||
saveState(); |
|
||||
ctx.save(); |
|
||||
saveCanvasContents(); |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.scale(-1, 1); |
|
||||
ctx.translate(-canvas.width, 0); |
|
||||
ctx.drawImage(tempCanvas, 0, 0); |
|
||||
ctx.restore(); |
|
||||
} |
|
||||
|
|
||||
function flipCanvasVertically(e) { |
|
||||
saveState(); |
|
||||
ctx.save(); |
|
||||
saveCanvasContents(); |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.scale(1, -1); |
|
||||
ctx.translate(0, -canvas.height); |
|
||||
ctx.drawImage(tempCanvas, 0, 0); |
|
||||
ctx.restore(); |
|
||||
} |
|
||||
|
|
||||
function exportCanvas(e) { |
|
||||
const link = document.createElement('a'); |
|
||||
link.download = 'canvas.png'; |
|
||||
link.href = canvas.toDataURL(); |
|
||||
link.click(); |
|
||||
} |
|
||||
|
|
||||
function importCanvas(e) { |
|
||||
const input = document.createElement('input'); |
|
||||
input.type = 'file'; |
|
||||
input.accept = 'image/*'; |
|
||||
input.onchange = (e) => { |
|
||||
const file = e.target.files[0]; |
|
||||
const reader = new FileReader(); |
|
||||
reader.onload = (e) => { |
|
||||
const img = new Image(); |
|
||||
img.onload = () => { |
|
||||
canvas.width = img.width; |
|
||||
canvas.height = img.height; |
|
||||
ctx.drawImage(img, 0, 0); |
|
||||
} |
|
||||
img.src = e.target.result; |
|
||||
} |
|
||||
reader.readAsDataURL(file); |
|
||||
} |
|
||||
input.click(); |
|
||||
} |
|
||||
|
|
||||
function clearCanvas(e) { |
|
||||
saveState(); |
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
||||
ctx.fillStyle = backgroundColor; |
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
||||
} |
|
||||
|
|
||||
function resetZoom(e) { |
|
||||
zoom = 1; |
|
||||
canvas.style.width = canvas.width * zoom + 'px'; |
|
||||
canvas.style.height = canvas.height * zoom + 'px'; |
|
||||
canvasWidth = canvas.width; |
|
||||
canvasHeight = canvas.height; |
|
||||
|
|
||||
canvasAreaRect = canvasArea.getBoundingClientRect(); |
|
||||
|
|
||||
canvasContainer.style.left = `${canvasAreaRect.left}px`; |
|
||||
canvasContainer.style.top = `${canvasAreaRect.top}px`; |
|
||||
} |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// menu {{{
|
|
||||
|
|
||||
var menuButtons = []; |
|
||||
|
|
||||
function createMenuButton(icon, name, clickFunction, key=undefined) { |
|
||||
const button = document.createElement('div'); |
|
||||
button.className = 'button'; |
|
||||
button.innerHTML = icon; |
|
||||
button.title = name; |
|
||||
if (clickFunction) { |
|
||||
button.addEventListener('click', () => { |
|
||||
clickFunction() |
|
||||
updateInfos(); |
|
||||
}); |
|
||||
} |
|
||||
menuBar.appendChild(button); |
|
||||
if (key) { |
|
||||
const keyHint = document.createElement('span'); |
|
||||
keyHint.className = 'key-hint'; |
|
||||
keyHint.innerHTML = key; |
|
||||
button.appendChild(keyHint); |
|
||||
functionKeyBindings[key] = clickFunction; |
|
||||
} |
|
||||
return button; |
|
||||
} |
|
||||
|
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-download"></i>', 'Save', saveCanvas, 's')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-upload"></i>', 'Load', loadCanvas)); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-trash-can"></i>', 'Clear', clearCanvas)); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-floppy-disk"></i>', 'Export', exportCanvas)); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-regular fa-folder-open"></i>', 'Import', importCanvas)); |
|
||||
|
|
||||
|
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-left-right"></i>', 'Flip Horizontally', flipCanvasHorizontally, 'f')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-up-down"></i>', 'Flip Vertically', flipCanvasVertically, 'v')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-undo"></i>', 'Undo', undo, 'u')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-redo"></i>', 'Redo', redo, 'y')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-pump-soap"></i>', 'Clear', clearCanvas, 'c')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-house"></i>', 'Reset', resetZoom, 't')); |
|
||||
menuButtons.push(createMenuButton('<i class="fa-solid fa-plus"></i>', 'Add Color', createPuck)); |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// pucks {{{
|
|
||||
|
|
||||
function createPuck(c, editable=true, key=undefined) { |
|
||||
if (c === undefined) { |
|
||||
c = color; |
|
||||
} |
|
||||
|
|
||||
const puck = document.createElement('div'); |
|
||||
puck.className = 'puck'; |
|
||||
puck.style.backgroundColor = c; |
|
||||
|
|
||||
// const selectHandle = document.createElement('div');
|
|
||||
// selectHandle.className = 'select-handle';
|
|
||||
// selectHandle.innerHTML = '<i class="fa-solid fa-droplet"></i>';
|
|
||||
// puck.appendChild(selectHandle);
|
|
||||
|
|
||||
// selectHandle.addEventListener('click', () => {
|
|
||||
// color = puck.style.backgroundColor;
|
|
||||
// updateColorPreview();
|
|
||||
// updateInfos();
|
|
||||
// });
|
|
||||
|
|
||||
if (editable) { |
|
||||
// const updateHandle = document.createElement('div');
|
|
||||
// updateHandle.className = 'update-handle';
|
|
||||
// updateHandle.innerHTML = '<i class="fa-solid fa-fill"></i>';
|
|
||||
// puck.appendChild(updateHandle);
|
|
||||
|
|
||||
// updateHandle.addEventListener('click', () => {
|
|
||||
// puck.style.backgroundColor = color;
|
|
||||
// });
|
|
||||
|
|
||||
const deleteHandle = document.createElement('div'); |
|
||||
deleteHandle.className = 'delete-handle'; |
|
||||
deleteHandle.innerHTML = '<i class="fa-solid fa-trash-can"></i>'; |
|
||||
puck.appendChild(deleteHandle); |
|
||||
|
|
||||
deleteHandle.addEventListener('click', () => { |
|
||||
console.log("test"); |
|
||||
puck.remove(); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
if (key) { |
|
||||
const keyHint = document.createElement('div'); |
|
||||
keyHint.className = 'key-hint'; |
|
||||
keyHint.innerHTML = key; |
|
||||
puck.appendChild(keyHint); |
|
||||
} |
|
||||
|
|
||||
function mixx(startTime) { |
|
||||
var interval = setInterval(() => { |
|
||||
const elapsedTime = Date.now() - startTime; |
|
||||
const t = Math.min(1, elapsedTime / 10000); |
|
||||
const mixedColor = mixbox.lerp(color, puck.style.backgroundColor, t); |
|
||||
color = mixedColor; |
|
||||
updateColorPreview(); |
|
||||
updateInfos(); |
|
||||
}, 50); |
|
||||
return interval; |
|
||||
} |
|
||||
|
|
||||
puck.addEventListener('mousedown', (e) => { |
|
||||
const startTime = Date.now(); |
|
||||
var interval = mixx(startTime); |
|
||||
function onMouseUp() { |
|
||||
clearInterval(interval); |
|
||||
document.removeEventListener('mouseup', onMouseUp); |
|
||||
} |
|
||||
document.addEventListener('mouseup', onMouseUp); |
|
||||
}); |
|
||||
|
|
||||
document.addEventListener('keydown', (e) => { |
|
||||
if (e.key == key) { |
|
||||
console.log(e.key); |
|
||||
const startTime = Date.now(); |
|
||||
var interval = mixx(startTime); |
|
||||
function onKeyUp() { |
|
||||
clearInterval(interval); |
|
||||
document.removeEventListener('keyup', onKeyUp); |
|
||||
} |
|
||||
document.addEventListener('keyup', onKeyUp); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
menuBar.appendChild(puck); |
|
||||
} |
|
||||
|
|
||||
createPuck(c='rgb(0, 0, 0)', editable=false, key='1'); |
|
||||
createPuck(c='rgb(255, 0, 0)', editale=false, key='2'); |
|
||||
createPuck(c='rgb(0, 0, 255)', editale=false, key='3'); |
|
||||
createPuck(c='rgb(255, 255, 0)', editale=false, key='4'); |
|
||||
createPuck(c='rgb(99, 60, 22)', editale=false, key='5'); |
|
||||
createPuck(c='rgb(0, 255, 0)', editale=false, key='6'); |
|
||||
createPuck(c='rgb(255, 0, 255)', editale=false, key='7'); |
|
||||
createPuck(c='rgb(0, 255, 255)', editale=false, key='8'); |
|
||||
createPuck(c='rgb(255, 255, 255)', editale=false, key='9'); |
|
||||
|
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// info {{{
|
|
||||
|
|
||||
var infos = []; |
|
||||
|
|
||||
function createInfo(name, updateFunction) { |
|
||||
const info = document.createElement('span'); |
|
||||
info.className = 'info'; |
|
||||
const key = document.createElement('span'); |
|
||||
key.className = 'key'; |
|
||||
key.innerHTML = name + ':'; |
|
||||
const value = document.createElement('span'); |
|
||||
value.className = 'value'; |
|
||||
value.innerHTML = '0'; |
|
||||
info.appendChild(key); |
|
||||
info.appendChild(value); |
|
||||
infoBar.appendChild(info); |
|
||||
function update() { |
|
||||
let v = updateFunction(); |
|
||||
if (v === undefined) v = '?'; |
|
||||
value.innerHTML = v; |
|
||||
} |
|
||||
return update; |
|
||||
} |
|
||||
|
|
||||
infos.push(createInfo('zoom', function() { |
|
||||
var percent = zoom * 100; |
|
||||
return percent.toFixed(0) + '%'; |
|
||||
})); |
|
||||
infos.push(createInfo('brush', function() { return brushSize; })); |
|
||||
infos.push(createInfo('x', function() { return canvasEndX; })); |
|
||||
infos.push(createInfo('y', function() { return canvasEndY; })); |
|
||||
infos.push(createInfo('color', function() { return color; })); |
|
||||
infos.push(createInfo('width', function() { return canvas.width; })); |
|
||||
infos.push(createInfo('height', function() { return canvas.height; })); |
|
||||
|
|
||||
function updateInfos() { |
|
||||
infos.forEach(info => info()); |
|
||||
} |
|
||||
|
|
||||
// }}}
|
|
||||
|
|
||||
// start {{{
|
|
||||
|
|
||||
ctx.fillStyle = backgroundColor; |
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
||||
updateInfos(); |
|
||||
toolButtons[0]['button'].click(); |
|
||||
|
|
||||
// }}}
|
|
@ -1,9 +0,0 @@ |
|||||
import globals from "globals"; |
|
||||
import pluginJs from "@eslint/js"; |
|
||||
|
|
||||
|
|
||||
export default [ |
|
||||
{files: ["**/*.js"], languageOptions: {sourceType: "script"}}, |
|
||||
{languageOptions: { globals: globals.browser }}, |
|
||||
pluginJs.configs.recommended, |
|
||||
]; |
|
After Width: | Height: | Size: 804 B |
@ -1,165 +0,0 @@ |
|||||
Fonticons, Inc. (https://fontawesome.com) |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
Font Awesome Free License |
|
||||
|
|
||||
Font Awesome Free is free, open source, and GPL friendly. You can use it for |
|
||||
commercial projects, open source projects, or really almost whatever you want. |
|
||||
Full Font Awesome Free license: https://fontawesome.com/license/free. |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/) |
|
||||
|
|
||||
The Font Awesome Free download is licensed under a Creative Commons |
|
||||
Attribution 4.0 International License and applies to all icons packaged |
|
||||
as SVG and JS file types. |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
# Fonts: SIL OFL 1.1 License |
|
||||
|
|
||||
In the Font Awesome Free download, the SIL OFL license applies to all icons |
|
||||
packaged as web and desktop font files. |
|
||||
|
|
||||
Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com) |
|
||||
with Reserved Font Name: "Font Awesome". |
|
||||
|
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1. |
|
||||
This license is copied below, and is also available with a FAQ at: |
|
||||
http://scripts.sil.org/OFL |
|
||||
|
|
||||
SIL OPEN FONT LICENSE |
|
||||
Version 1.1 - 26 February 2007 |
|
||||
|
|
||||
PREAMBLE |
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide |
|
||||
development of collaborative font projects, to support the font creation |
|
||||
efforts of academic and linguistic communities, and to provide a free and |
|
||||
open framework in which fonts may be shared and improved in partnership |
|
||||
with others. |
|
||||
|
|
||||
The OFL allows the licensed fonts to be used, studied, modified and |
|
||||
redistributed freely as long as they are not sold by themselves. The |
|
||||
fonts, including any derivative works, can be bundled, embedded, |
|
||||
redistributed and/or sold with any software provided that any reserved |
|
||||
names are not used by derivative works. The fonts and derivatives, |
|
||||
however, cannot be released under any other type of license. The |
|
||||
requirement for fonts to remain under this license does not apply |
|
||||
to any document created using the fonts or their derivatives. |
|
||||
|
|
||||
DEFINITIONS |
|
||||
"Font Software" refers to the set of files released by the Copyright |
|
||||
Holder(s) under this license and clearly marked as such. This may |
|
||||
include source files, build scripts and documentation. |
|
||||
|
|
||||
"Reserved Font Name" refers to any names specified as such after the |
|
||||
copyright statement(s). |
|
||||
|
|
||||
"Original Version" refers to the collection of Font Software components as |
|
||||
distributed by the Copyright Holder(s). |
|
||||
|
|
||||
"Modified Version" refers to any derivative made by adding to, deleting, |
|
||||
or substituting — in part or in whole — any of the components of the |
|
||||
Original Version, by changing formats or by porting the Font Software to a |
|
||||
new environment. |
|
||||
|
|
||||
"Author" refers to any designer, engineer, programmer, technical |
|
||||
writer or other person who contributed to the Font Software. |
|
||||
|
|
||||
PERMISSION & CONDITIONS |
|
||||
Permission is hereby granted, free of charge, to any person obtaining |
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify, |
|
||||
redistribute, and sell modified and unmodified copies of the Font |
|
||||
Software, subject to the following conditions: |
|
||||
|
|
||||
1) Neither the Font Software nor any of its individual components, |
|
||||
in Original or Modified Versions, may be sold by itself. |
|
||||
|
|
||||
2) Original or Modified Versions of the Font Software may be bundled, |
|
||||
redistributed and/or sold with any software, provided that each copy |
|
||||
contains the above copyright notice and this license. These can be |
|
||||
included either as stand-alone text files, human-readable headers or |
|
||||
in the appropriate machine-readable metadata fields within text or |
|
||||
binary files as long as those fields can be easily viewed by the user. |
|
||||
|
|
||||
3) No Modified Version of the Font Software may use the Reserved Font |
|
||||
Name(s) unless explicit written permission is granted by the corresponding |
|
||||
Copyright Holder. This restriction only applies to the primary font name as |
|
||||
presented to the users. |
|
||||
|
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font |
|
||||
Software shall not be used to promote, endorse or advertise any |
|
||||
Modified Version, except to acknowledge the contribution(s) of the |
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written |
|
||||
permission. |
|
||||
|
|
||||
5) The Font Software, modified or unmodified, in part or in whole, |
|
||||
must be distributed entirely under this license, and must not be |
|
||||
distributed under any other license. The requirement for fonts to |
|
||||
remain under this license does not apply to any document created |
|
||||
using the Font Software. |
|
||||
|
|
||||
TERMINATION |
|
||||
This license becomes null and void if any of the above conditions are |
|
||||
not met. |
|
||||
|
|
||||
DISCLAIMER |
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF |
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT |
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE |
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL |
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM |
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE. |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
# Code: MIT License (https://opensource.org/licenses/MIT) |
|
||||
|
|
||||
In the Font Awesome Free download, the MIT license applies to all non-font and |
|
||||
non-icon files. |
|
||||
|
|
||||
Copyright 2024 Fonticons, Inc. |
|
||||
|
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of |
|
||||
this software and associated documentation files (the "Software"), to deal in the |
|
||||
Software without restriction, including without limitation the rights to use, copy, |
|
||||
modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, |
|
||||
and to permit persons to whom the Software is furnished to do so, subject to the |
|
||||
following conditions: |
|
||||
|
|
||||
The above copyright notice and this permission notice shall be included in all |
|
||||
copies or substantial portions of the Software. |
|
||||
|
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, |
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A |
|
||||
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE |
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
# Attribution |
|
||||
|
|
||||
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font |
|
||||
Awesome Free files already contain embedded comments with sufficient |
|
||||
attribution, so you shouldn't need to do anything additional when using these |
|
||||
files normally. |
|
||||
|
|
||||
We've kept attribution comments terse, so we ask that you do not actively work |
|
||||
to remove them from files, especially code. They're a great way for folks to |
|
||||
learn about Font Awesome. |
|
||||
|
|
||||
-------------------------------------------------------------------------------- |
|
||||
|
|
||||
# Brand Icons |
|
||||
|
|
||||
All brand icons are trademarks of their respective owners. The use of these |
|
||||
trademarks does not indicate endorsement of the trademark holder by Font |
|
||||
Awesome, nor vice versa. **Please do not use brand logos for any purpose except |
|
||||
to represent the company, product, or service to which they refer.** |
|
@ -1,19 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
:root, :host { |
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free'; |
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 400; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } |
|
||||
|
|
||||
.far, |
|
||||
.fa-regular { |
|
||||
font-weight: 400; } |
|
@ -1,6 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400} |
|
@ -1,19 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
:root, :host { |
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free'; |
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 900; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } |
|
||||
|
|
||||
.fas, |
|
||||
.fa-solid { |
|
||||
font-weight: 900; } |
|
@ -1,6 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900} |
|
@ -1,459 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
:root, :host { |
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; |
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; |
|
||||
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro'; |
|
||||
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro'; |
|
||||
--fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone'; |
|
||||
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; |
|
||||
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp'; |
|
||||
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp'; |
|
||||
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp'; |
|
||||
--fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp'; |
|
||||
--fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 6 Sharp Duotone'; } |
|
||||
|
|
||||
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa { |
|
||||
overflow: visible; |
|
||||
box-sizing: content-box; } |
|
||||
|
|
||||
.svg-inline--fa { |
|
||||
display: var(--fa-display, inline-block); |
|
||||
height: 1em; |
|
||||
overflow: visible; |
|
||||
vertical-align: -.125em; } |
|
||||
.svg-inline--fa.fa-2xs { |
|
||||
vertical-align: 0.1em; } |
|
||||
.svg-inline--fa.fa-xs { |
|
||||
vertical-align: 0em; } |
|
||||
.svg-inline--fa.fa-sm { |
|
||||
vertical-align: -0.07143em; } |
|
||||
.svg-inline--fa.fa-lg { |
|
||||
vertical-align: -0.2em; } |
|
||||
.svg-inline--fa.fa-xl { |
|
||||
vertical-align: -0.25em; } |
|
||||
.svg-inline--fa.fa-2xl { |
|
||||
vertical-align: -0.3125em; } |
|
||||
.svg-inline--fa.fa-pull-left { |
|
||||
margin-right: var(--fa-pull-margin, 0.3em); |
|
||||
width: auto; } |
|
||||
.svg-inline--fa.fa-pull-right { |
|
||||
margin-left: var(--fa-pull-margin, 0.3em); |
|
||||
width: auto; } |
|
||||
.svg-inline--fa.fa-li { |
|
||||
width: var(--fa-li-width, 2em); |
|
||||
top: 0.25em; } |
|
||||
.svg-inline--fa.fa-fw { |
|
||||
width: var(--fa-fw-width, 1.25em); } |
|
||||
|
|
||||
.fa-layers svg.svg-inline--fa { |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
margin: auto; |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: 0; } |
|
||||
|
|
||||
.fa-layers-text, .fa-layers-counter { |
|
||||
display: inline-block; |
|
||||
position: absolute; |
|
||||
text-align: center; } |
|
||||
|
|
||||
.fa-layers { |
|
||||
display: inline-block; |
|
||||
height: 1em; |
|
||||
position: relative; |
|
||||
text-align: center; |
|
||||
vertical-align: -.125em; |
|
||||
width: 1em; } |
|
||||
.fa-layers svg.svg-inline--fa { |
|
||||
transform-origin: center center; } |
|
||||
|
|
||||
.fa-layers-text { |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
transform-origin: center center; } |
|
||||
|
|
||||
.fa-layers-counter { |
|
||||
background-color: var(--fa-counter-background-color, #ff253a); |
|
||||
border-radius: var(--fa-counter-border-radius, 1em); |
|
||||
box-sizing: border-box; |
|
||||
color: var(--fa-inverse, #fff); |
|
||||
line-height: var(--fa-counter-line-height, 1); |
|
||||
max-width: var(--fa-counter-max-width, 5em); |
|
||||
min-width: var(--fa-counter-min-width, 1.5em); |
|
||||
overflow: hidden; |
|
||||
padding: var(--fa-counter-padding, 0.25em 0.5em); |
|
||||
right: var(--fa-right, 0); |
|
||||
text-overflow: ellipsis; |
|
||||
top: var(--fa-top, 0); |
|
||||
transform: scale(var(--fa-counter-scale, 0.25)); |
|
||||
transform-origin: top right; } |
|
||||
|
|
||||
.fa-layers-bottom-right { |
|
||||
bottom: var(--fa-bottom, 0); |
|
||||
right: var(--fa-right, 0); |
|
||||
top: auto; |
|
||||
transform: scale(var(--fa-layers-scale, 0.25)); |
|
||||
transform-origin: bottom right; } |
|
||||
|
|
||||
.fa-layers-bottom-left { |
|
||||
bottom: var(--fa-bottom, 0); |
|
||||
left: var(--fa-left, 0); |
|
||||
right: auto; |
|
||||
top: auto; |
|
||||
transform: scale(var(--fa-layers-scale, 0.25)); |
|
||||
transform-origin: bottom left; } |
|
||||
|
|
||||
.fa-layers-top-right { |
|
||||
top: var(--fa-top, 0); |
|
||||
right: var(--fa-right, 0); |
|
||||
transform: scale(var(--fa-layers-scale, 0.25)); |
|
||||
transform-origin: top right; } |
|
||||
|
|
||||
.fa-layers-top-left { |
|
||||
left: var(--fa-left, 0); |
|
||||
right: auto; |
|
||||
top: var(--fa-top, 0); |
|
||||
transform: scale(var(--fa-layers-scale, 0.25)); |
|
||||
transform-origin: top left; } |
|
||||
|
|
||||
.fa-1x { |
|
||||
font-size: 1em; } |
|
||||
|
|
||||
.fa-2x { |
|
||||
font-size: 2em; } |
|
||||
|
|
||||
.fa-3x { |
|
||||
font-size: 3em; } |
|
||||
|
|
||||
.fa-4x { |
|
||||
font-size: 4em; } |
|
||||
|
|
||||
.fa-5x { |
|
||||
font-size: 5em; } |
|
||||
|
|
||||
.fa-6x { |
|
||||
font-size: 6em; } |
|
||||
|
|
||||
.fa-7x { |
|
||||
font-size: 7em; } |
|
||||
|
|
||||
.fa-8x { |
|
||||
font-size: 8em; } |
|
||||
|
|
||||
.fa-9x { |
|
||||
font-size: 9em; } |
|
||||
|
|
||||
.fa-10x { |
|
||||
font-size: 10em; } |
|
||||
|
|
||||
.fa-2xs { |
|
||||
font-size: 0.625em; |
|
||||
line-height: 0.1em; |
|
||||
vertical-align: 0.225em; } |
|
||||
|
|
||||
.fa-xs { |
|
||||
font-size: 0.75em; |
|
||||
line-height: 0.08333em; |
|
||||
vertical-align: 0.125em; } |
|
||||
|
|
||||
.fa-sm { |
|
||||
font-size: 0.875em; |
|
||||
line-height: 0.07143em; |
|
||||
vertical-align: 0.05357em; } |
|
||||
|
|
||||
.fa-lg { |
|
||||
font-size: 1.25em; |
|
||||
line-height: 0.05em; |
|
||||
vertical-align: -0.075em; } |
|
||||
|
|
||||
.fa-xl { |
|
||||
font-size: 1.5em; |
|
||||
line-height: 0.04167em; |
|
||||
vertical-align: -0.125em; } |
|
||||
|
|
||||
.fa-2xl { |
|
||||
font-size: 2em; |
|
||||
line-height: 0.03125em; |
|
||||
vertical-align: -0.1875em; } |
|
||||
|
|
||||
.fa-fw { |
|
||||
text-align: center; |
|
||||
width: 1.25em; } |
|
||||
|
|
||||
.fa-ul { |
|
||||
list-style-type: none; |
|
||||
margin-left: var(--fa-li-margin, 2.5em); |
|
||||
padding-left: 0; } |
|
||||
.fa-ul > li { |
|
||||
position: relative; } |
|
||||
|
|
||||
.fa-li { |
|
||||
left: calc(-1 * var(--fa-li-width, 2em)); |
|
||||
position: absolute; |
|
||||
text-align: center; |
|
||||
width: var(--fa-li-width, 2em); |
|
||||
line-height: inherit; } |
|
||||
|
|
||||
.fa-border { |
|
||||
border-color: var(--fa-border-color, #eee); |
|
||||
border-radius: var(--fa-border-radius, 0.1em); |
|
||||
border-style: var(--fa-border-style, solid); |
|
||||
border-width: var(--fa-border-width, 0.08em); |
|
||||
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); } |
|
||||
|
|
||||
.fa-pull-left { |
|
||||
float: left; |
|
||||
margin-right: var(--fa-pull-margin, 0.3em); } |
|
||||
|
|
||||
.fa-pull-right { |
|
||||
float: right; |
|
||||
margin-left: var(--fa-pull-margin, 0.3em); } |
|
||||
|
|
||||
.fa-beat { |
|
||||
animation-name: fa-beat; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); } |
|
||||
|
|
||||
.fa-bounce { |
|
||||
animation-name: fa-bounce; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); } |
|
||||
|
|
||||
.fa-fade { |
|
||||
animation-name: fa-fade; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } |
|
||||
|
|
||||
.fa-beat-fade { |
|
||||
animation-name: fa-beat-fade; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } |
|
||||
|
|
||||
.fa-flip { |
|
||||
animation-name: fa-flip; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); } |
|
||||
|
|
||||
.fa-shake { |
|
||||
animation-name: fa-shake; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, linear); } |
|
||||
|
|
||||
.fa-spin { |
|
||||
animation-name: fa-spin; |
|
||||
animation-delay: var(--fa-animation-delay, 0s); |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 2s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, linear); } |
|
||||
|
|
||||
.fa-spin-reverse { |
|
||||
--fa-animation-direction: reverse; } |
|
||||
|
|
||||
.fa-pulse, |
|
||||
.fa-spin-pulse { |
|
||||
animation-name: fa-spin; |
|
||||
animation-direction: var(--fa-animation-direction, normal); |
|
||||
animation-duration: var(--fa-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--fa-animation-timing, steps(8)); } |
|
||||
|
|
||||
@media (prefers-reduced-motion: reduce) { |
|
||||
.fa-beat, |
|
||||
.fa-bounce, |
|
||||
.fa-fade, |
|
||||
.fa-beat-fade, |
|
||||
.fa-flip, |
|
||||
.fa-pulse, |
|
||||
.fa-shake, |
|
||||
.fa-spin, |
|
||||
.fa-spin-pulse { |
|
||||
animation-delay: -1ms; |
|
||||
animation-duration: 1ms; |
|
||||
animation-iteration-count: 1; |
|
||||
transition-delay: 0s; |
|
||||
transition-duration: 0s; } } |
|
||||
|
|
||||
@keyframes fa-beat { |
|
||||
0%, 90% { |
|
||||
transform: scale(1); } |
|
||||
45% { |
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } } |
|
||||
|
|
||||
@keyframes fa-bounce { |
|
||||
0% { |
|
||||
transform: scale(1, 1) translateY(0); } |
|
||||
10% { |
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); } |
|
||||
30% { |
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); } |
|
||||
50% { |
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); } |
|
||||
57% { |
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); } |
|
||||
64% { |
|
||||
transform: scale(1, 1) translateY(0); } |
|
||||
100% { |
|
||||
transform: scale(1, 1) translateY(0); } } |
|
||||
|
|
||||
@keyframes fa-fade { |
|
||||
50% { |
|
||||
opacity: var(--fa-fade-opacity, 0.4); } } |
|
||||
|
|
||||
@keyframes fa-beat-fade { |
|
||||
0%, 100% { |
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4); |
|
||||
transform: scale(1); } |
|
||||
50% { |
|
||||
opacity: 1; |
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } } |
|
||||
|
|
||||
@keyframes fa-flip { |
|
||||
50% { |
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } |
|
||||
|
|
||||
@keyframes fa-shake { |
|
||||
0% { |
|
||||
transform: rotate(-15deg); } |
|
||||
4% { |
|
||||
transform: rotate(15deg); } |
|
||||
8%, 24% { |
|
||||
transform: rotate(-18deg); } |
|
||||
12%, 28% { |
|
||||
transform: rotate(18deg); } |
|
||||
16% { |
|
||||
transform: rotate(-22deg); } |
|
||||
20% { |
|
||||
transform: rotate(22deg); } |
|
||||
32% { |
|
||||
transform: rotate(-12deg); } |
|
||||
36% { |
|
||||
transform: rotate(12deg); } |
|
||||
40%, 100% { |
|
||||
transform: rotate(0deg); } } |
|
||||
|
|
||||
@keyframes fa-spin { |
|
||||
0% { |
|
||||
transform: rotate(0deg); } |
|
||||
100% { |
|
||||
transform: rotate(360deg); } } |
|
||||
|
|
||||
.fa-rotate-90 { |
|
||||
transform: rotate(90deg); } |
|
||||
|
|
||||
.fa-rotate-180 { |
|
||||
transform: rotate(180deg); } |
|
||||
|
|
||||
.fa-rotate-270 { |
|
||||
transform: rotate(270deg); } |
|
||||
|
|
||||
.fa-flip-horizontal { |
|
||||
transform: scale(-1, 1); } |
|
||||
|
|
||||
.fa-flip-vertical { |
|
||||
transform: scale(1, -1); } |
|
||||
|
|
||||
.fa-flip-both, |
|
||||
.fa-flip-horizontal.fa-flip-vertical { |
|
||||
transform: scale(-1, -1); } |
|
||||
|
|
||||
.fa-rotate-by { |
|
||||
transform: rotate(var(--fa-rotate-angle, 0)); } |
|
||||
|
|
||||
.fa-stack { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
height: 2em; |
|
||||
position: relative; |
|
||||
width: 2.5em; } |
|
||||
|
|
||||
.fa-stack-1x, |
|
||||
.fa-stack-2x { |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
margin: auto; |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
z-index: var(--fa-stack-z-index, auto); } |
|
||||
|
|
||||
.svg-inline--fa.fa-stack-1x { |
|
||||
height: 1em; |
|
||||
width: 1.25em; } |
|
||||
|
|
||||
.svg-inline--fa.fa-stack-2x { |
|
||||
height: 2em; |
|
||||
width: 2.5em; } |
|
||||
|
|
||||
.fa-inverse { |
|
||||
color: var(--fa-inverse, #fff); } |
|
||||
|
|
||||
.sr-only, |
|
||||
.fa-sr-only { |
|
||||
position: absolute; |
|
||||
width: 1px; |
|
||||
height: 1px; |
|
||||
padding: 0; |
|
||||
margin: -1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(0, 0, 0, 0); |
|
||||
white-space: nowrap; |
|
||||
border-width: 0; } |
|
||||
|
|
||||
.sr-only-focusable:not(:focus), |
|
||||
.fa-sr-only-focusable:not(:focus) { |
|
||||
position: absolute; |
|
||||
width: 1px; |
|
||||
height: 1px; |
|
||||
padding: 0; |
|
||||
margin: -1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(0, 0, 0, 0); |
|
||||
white-space: nowrap; |
|
||||
border-width: 0; } |
|
||||
|
|
||||
.svg-inline--fa .fa-primary { |
|
||||
fill: var(--fa-primary-color, currentColor); |
|
||||
opacity: var(--fa-primary-opacity, 1); } |
|
||||
|
|
||||
.svg-inline--fa .fa-secondary { |
|
||||
fill: var(--fa-secondary-color, currentColor); |
|
||||
opacity: var(--fa-secondary-opacity, 0.4); } |
|
||||
|
|
||||
.svg-inline--fa.fa-swap-opacity .fa-primary { |
|
||||
opacity: var(--fa-secondary-opacity, 0.4); } |
|
||||
|
|
||||
.svg-inline--fa.fa-swap-opacity .fa-secondary { |
|
||||
opacity: var(--fa-primary-opacity, 1); } |
|
||||
|
|
||||
.svg-inline--fa mask .fa-primary, |
|
||||
.svg-inline--fa mask .fa-secondary { |
|
||||
fill: black; } |
|
||||
|
|
||||
.fad.fa-inverse, |
|
||||
.fa-duotone.fa-inverse { |
|
||||
color: var(--fa-inverse, #fff); } |
|
@ -1,26 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@font-face { |
|
||||
font-family: 'FontAwesome'; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'FontAwesome'; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'FontAwesome'; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); |
|
||||
unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'FontAwesome'; |
|
||||
font-display: block; |
|
||||
src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype"); |
|
||||
unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; } |
|
@ -1,6 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} |
|
@ -1,22 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 5 Brands'; |
|
||||
font-display: block; |
|
||||
font-weight: 400; |
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 5 Free'; |
|
||||
font-display: block; |
|
||||
font-weight: 900; |
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 5 Free'; |
|
||||
font-display: block; |
|
||||
font-weight: 400; |
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } |
|
@ -1,6 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")} |
|
@ -1,152 +0,0 @@ |
|||||
// animating icons |
|
||||
// -------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-beat { |
|
||||
animation-name: ~'@{fa-css-prefix}-beat'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-bounce { |
|
||||
animation-name: ~'@{fa-css-prefix}-bounce'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1))'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-fade { |
|
||||
animation-name: ~'@{fa-css-prefix}-fade'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-beat-fade { |
|
||||
animation-name: ~'@{fa-css-prefix}-beat-fade'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-flip { |
|
||||
animation-name: ~'@{fa-css-prefix}-flip'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-shake { |
|
||||
animation-name: ~'@{fa-css-prefix}-shake'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, linear)'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-spin { |
|
||||
animation-name: ~'@{fa-css-prefix}-spin'; |
|
||||
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 2s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, linear)'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-spin-reverse { |
|
||||
--@{fa-css-prefix}-animation-direction: reverse; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-pulse, |
|
||||
.@{fa-css-prefix}-spin-pulse { |
|
||||
animation-name: ~'@{fa-css-prefix}-spin'; |
|
||||
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)'; |
|
||||
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)'; |
|
||||
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)'; |
|
||||
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, steps(8));'; |
|
||||
} |
|
||||
|
|
||||
// if agent or operating system prefers reduced motion, disable animations |
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ |
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion |
|
||||
@media (prefers-reduced-motion: reduce) { |
|
||||
.@{fa-css-prefix}-beat, |
|
||||
.@{fa-css-prefix}-bounce, |
|
||||
.@{fa-css-prefix}-fade, |
|
||||
.@{fa-css-prefix}-beat-fade, |
|
||||
.@{fa-css-prefix}-flip, |
|
||||
.@{fa-css-prefix}-pulse, |
|
||||
.@{fa-css-prefix}-shake, |
|
||||
.@{fa-css-prefix}-spin, |
|
||||
.@{fa-css-prefix}-spin-pulse { |
|
||||
animation-delay: -1ms; |
|
||||
animation-duration: 1ms; |
|
||||
animation-iteration-count: 1; |
|
||||
transition-delay: 0s; |
|
||||
transition-duration: 0s; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-beat' { |
|
||||
0%, 90% { transform: scale(1); } |
|
||||
45% { transform: ~'scale(var(--@{fa-css-prefix}-beat-scale, 1.25))'; } |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-bounce' { |
|
||||
0% { transform: scale(1,1) translateY(0); } |
|
||||
10% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-start-scale-x, 1.1),var(--@{fa-css-prefix}-bounce-start-scale-y, 0.9))' translateY(0); } |
|
||||
30% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--@{fa-css-prefix}-bounce-jump-scale-y, 1.1))' ~'translateY(var(--@{fa-css-prefix}-bounce-height, -0.5em))'; } |
|
||||
50% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-land-scale-x, 1.05),var(--@{fa-css-prefix}-bounce-land-scale-y, 0.95))' translateY(0); } |
|
||||
57% { transform: ~'scale(1,1) translateY(var(--@{fa-css-prefix}-bounce-rebound, -0.125em))'; } |
|
||||
64% { transform: scale(1,1) translateY(0); } |
|
||||
100% { transform: scale(1,1) translateY(0); } |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-fade' { |
|
||||
50% { opacity: ~'var(--@{fa-css-prefix}-fade-opacity, 0.4)'; } |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-beat-fade' { |
|
||||
0%, 100% { |
|
||||
opacity: ~'var(--@{fa-css-prefix}-beat-fade-opacity, 0.4)'; |
|
||||
transform: scale(1); |
|
||||
} |
|
||||
50% { |
|
||||
opacity: 1; |
|
||||
transform: ~'scale(var(--@{fa-css-prefix}-beat-fade-scale, 1.125))'; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-flip' { |
|
||||
50% { |
|
||||
transform: ~'rotate3d(var(--@{fa-css-prefix}-flip-x, 0), var(--@{fa-css-prefix}-flip-y, 1), var(--@{fa-css-prefix}-flip-z, 0), var(--@{fa-css-prefix}-flip-angle, -180deg))'; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-shake' { |
|
||||
0% { transform: rotate(-15deg); } |
|
||||
4% { transform: rotate(15deg); } |
|
||||
8%, 24% { transform: rotate(-18deg); } |
|
||||
12%, 28% { transform: rotate(18deg); } |
|
||||
16% { transform: rotate(-22deg); } |
|
||||
20% { transform: rotate(22deg); } |
|
||||
32% { transform: rotate(-12deg); } |
|
||||
36% { transform: rotate(12deg); } |
|
||||
40%, 100% { transform: rotate(0deg); } |
|
||||
} |
|
||||
|
|
||||
@keyframes ~'@{fa-css-prefix}-spin' { |
|
||||
0% { transform: rotate(0deg); } |
|
||||
100% { transform: rotate(360deg); } |
|
||||
} |
|
@ -1,20 +0,0 @@ |
|||||
// bordered + pulled icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-border { |
|
||||
border-color: ~'var(--@{fa-css-prefix}-border-color, @{fa-border-color})'; |
|
||||
border-radius: ~'var(--@{fa-css-prefix}-border-radius, @{fa-border-radius})'; |
|
||||
border-style: ~'var(--@{fa-css-prefix}-border-style, @{fa-border-style})'; |
|
||||
border-width: ~'var(--@{fa-css-prefix}-border-width, @{fa-border-width})'; |
|
||||
padding: ~'var(--@{fa-css-prefix}-border-padding, @{fa-border-padding})'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-pull-left { |
|
||||
float: left; |
|
||||
margin-right: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-pull-right { |
|
||||
float: right; |
|
||||
margin-left: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})'; |
|
||||
} |
|
@ -1,36 +0,0 @@ |
|||||
// base icon class definition |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix} { |
|
||||
font-family: ~"var(--@{fa-css-prefix}-style-family, '@{fa-style-family}')"; |
|
||||
font-weight: ~'var(--@{fa-css-prefix}-style, @{fa-style})'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-solid, |
|
||||
.@{fa-css-prefix}-regular, |
|
||||
.@{fa-css-prefix}-brands, |
|
||||
.fas, |
|
||||
.far, |
|
||||
.fab, |
|
||||
.@{fa-css-prefix} { |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
display: ~'var(--@{fa-css-prefix}-display, @{fa-display})'; |
|
||||
font-style: normal; |
|
||||
font-variant: normal; |
|
||||
text-rendering: auto; |
|
||||
} |
|
||||
|
|
||||
.fas, |
|
||||
.@{fa-css-prefix}-classic, |
|
||||
.@{fa-css-prefix}-solid, |
|
||||
.far, |
|
||||
.@{fa-css-prefix}-regular { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
} |
|
||||
|
|
||||
.fab, |
|
||||
.@{fa-css-prefix}-brands { |
|
||||
font-family: 'Font Awesome 6 Brands'; |
|
||||
} |
|
||||
|
|
@ -1,7 +0,0 @@ |
|||||
// fixed-width icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-fw { |
|
||||
text-align: center; |
|
||||
width: @fa-fw-width; |
|
||||
} |
|
@ -1,9 +0,0 @@ |
|||||
// specific icon class definition |
|
||||
// ------------------------- |
|
||||
|
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen |
|
||||
readers do not read off random characters that represent icons */ |
|
||||
|
|
||||
each(.fa-icons(), { |
|
||||
.@{fa-css-prefix}-@{key}::before { content: @value; } |
|
||||
}); |
|
@ -1,18 +0,0 @@ |
|||||
// icons in a list |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-ul { |
|
||||
list-style-type: none; |
|
||||
margin-left: ~'var(--@{fa-css-prefix}-li-margin, @{fa-li-margin})'; |
|
||||
padding-left: 0; |
|
||||
|
|
||||
> li { position: relative; } |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-li { |
|
||||
left: calc(~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})' * -1); |
|
||||
position: absolute; |
|
||||
text-align: center; |
|
||||
width: ~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})'; |
|
||||
line-height: inherit; |
|
||||
} |
|
@ -1,78 +0,0 @@ |
|||||
// mixins |
|
||||
// -------------------------- |
|
||||
|
|
||||
// base rendering for an icon |
|
||||
.fa-icon() { |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
display: inline-block; |
|
||||
font-style: normal; |
|
||||
font-variant: normal; |
|
||||
font-weight: normal; |
|
||||
line-height: 1; |
|
||||
} |
|
||||
|
|
||||
// sets relative font-sizing and alignment (in _sizing) |
|
||||
.fa-size(@font-size) { |
|
||||
font-size: (@font-size / @fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base |
|
||||
line-height: (1 / @font-size) * 1em; // sets the line-height of the icon back to that of it's parent |
|
||||
vertical-align: ((6 / @font-size) - (3 / 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender |
|
||||
} |
|
||||
|
|
||||
// only display content to screen readers |
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ |
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ |
|
||||
.fa-sr-only() { |
|
||||
position: absolute; |
|
||||
width: 1px; |
|
||||
height: 1px; |
|
||||
padding: 0; |
|
||||
margin: -1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(0, 0, 0, 0); |
|
||||
white-space: nowrap; |
|
||||
border-width: 0; |
|
||||
} |
|
||||
|
|
||||
// use in conjunction with .sr-only to only display content when it's focused |
|
||||
.fa-sr-only-focusable() { |
|
||||
&:not(:focus) { |
|
||||
.fa-sr-only(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// sets a specific icon family to use alongside style + icon mixins |
|
||||
.fa-family-classic() { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
} |
|
||||
|
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable, |
|
||||
// including all style-specific font properties, and both the ::before |
|
||||
// and ::after elements in the duotone case. |
|
||||
.fa-icon-solid(@fa-var) { |
|
||||
.fa-icon; |
|
||||
.fa-solid; |
|
||||
|
|
||||
&::before { |
|
||||
content: @fa-var; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fa-icon-regular(@fa-var) { |
|
||||
.fa-icon; |
|
||||
.fa-regular; |
|
||||
|
|
||||
&::before { |
|
||||
content: @fa-var; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fa-icon-brands(@fa-var) { |
|
||||
.fa-icon; |
|
||||
.fa-brands; |
|
||||
|
|
||||
&::before { |
|
||||
content: @fa-var; |
|
||||
} |
|
||||
} |
|
||||
|
|
@ -1,31 +0,0 @@ |
|||||
// rotating + flipping icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-rotate-90 { |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-rotate-180 { |
|
||||
transform: rotate(180deg); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-rotate-270 { |
|
||||
transform: rotate(270deg); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-flip-horizontal { |
|
||||
transform: scale(-1, 1); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-flip-vertical { |
|
||||
transform: scale(1, -1); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-flip-both, |
|
||||
.@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical { |
|
||||
transform: scale(-1, -1); |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-rotate-by { |
|
||||
transform: rotate(~'var(--@{fa-css-prefix}-rotate-angle, 0)'); |
|
||||
} |
|
@ -1,14 +0,0 @@ |
|||||
// screen-reader utilities |
|
||||
// ------------------------- |
|
||||
|
|
||||
// only display content to screen readers |
|
||||
.sr-only, |
|
||||
.@{fa-css-prefix}-sr-only { |
|
||||
.fa-sr-only(); |
|
||||
} |
|
||||
|
|
||||
// use in conjunction with .sr-only to only display content when it's focused |
|
||||
.sr-only-focusable, |
|
||||
.@{fa-css-prefix}-sr-only-focusable { |
|
||||
.fa-sr-only-focusable(); |
|
||||
} |
|
@ -1,19 +0,0 @@ |
|||||
// sizing icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
// literal magnification scale |
|
||||
.sizes-literal(@factor) when (@factor > 0) { |
|
||||
.sizes-literal((@factor - 1)); |
|
||||
|
|
||||
.@{fa-css-prefix}-@{factor}x { |
|
||||
font-size: (@factor * 1em); |
|
||||
} |
|
||||
} |
|
||||
.sizes-literal(10); |
|
||||
|
|
||||
// step-based scale (with alignment) |
|
||||
each(.fa-sizes(), { |
|
||||
.@{fa-css-prefix}-@{key} { |
|
||||
.fa-size(@value); |
|
||||
} |
|
||||
}); |
|
@ -1,31 +0,0 @@ |
|||||
// stacking icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.@{fa-css-prefix}-stack { |
|
||||
display: inline-block; |
|
||||
height: 2em; |
|
||||
line-height: 2em; |
|
||||
position: relative; |
|
||||
vertical-align: @fa-stack-vertical-align; |
|
||||
width: @fa-stack-width; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { |
|
||||
left: 0; |
|
||||
position: absolute; |
|
||||
text-align: center; |
|
||||
width: 100%; |
|
||||
z-index: ~'var(--@{fa-css-prefix}-stack-z-index, @{fa-stack-z-index})'; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-stack-1x { |
|
||||
line-height: inherit; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-stack-2x { |
|
||||
font-size: 2em; |
|
||||
} |
|
||||
|
|
||||
.@{fa-css-prefix}-inverse { |
|
||||
color: ~'var(--@{fa-css-prefix}-inverse, @{fa-inverse})'; |
|
||||
} |
|
@ -1,29 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import "_variables.less"; |
|
||||
|
|
||||
:root, :host { |
|
||||
--@{fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands'; |
|
||||
--@{fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Brands'; |
|
||||
font-style: normal; |
|
||||
font-weight: 400; |
|
||||
font-display: @fa-font-display; |
|
||||
src: url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'), |
|
||||
url('@{fa-font-path}/fa-brands-400.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.fab, |
|
||||
.@{fa-css-prefix}-brands { |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
|
|
||||
each(.fa-brand-icons(), { |
|
||||
.@{fa-css-prefix}-@{key}:before { content: @value; } |
|
||||
}); |
|
@ -1,20 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
// Font Awesome core compile (Web Fonts-based) |
|
||||
// ------------------------- |
|
||||
|
|
||||
@import "_variables.less"; |
|
||||
@import "_mixins.less"; |
|
||||
@import "_core.less"; |
|
||||
@import "_sizing.less"; |
|
||||
@import "_fixed-width.less"; |
|
||||
@import "_list.less"; |
|
||||
@import "_bordered-pulled.less"; |
|
||||
@import "_animated.less"; |
|
||||
@import "_rotated-flipped.less"; |
|
||||
@import "_stacked.less"; |
|
||||
@import "_icons.less"; |
|
||||
@import "_screen-reader.less"; |
|
@ -1,25 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import "_variables.less"; |
|
||||
|
|
||||
:root, :host { |
|
||||
--@{fa-css-prefix}-style-family-classic: '@{fa-style-family}'; |
|
||||
--@{fa-css-prefix}-font-regular: normal 400 1em/1 '@{fa-style-family}'; |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 400; |
|
||||
font-display: @fa-font-display; |
|
||||
src: url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'), |
|
||||
url('@{fa-font-path}/fa-regular-400.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.far, |
|
||||
.@{fa-css-prefix}-regular { |
|
||||
font-weight: 400; |
|
||||
} |
|
@ -1,25 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import "_variables.less"; |
|
||||
|
|
||||
:root, :host { |
|
||||
--@{fa-css-prefix}-style-family-classic: '@{fa-style-family}'; |
|
||||
--@{fa-css-prefix}-font-solid: normal 900 1em/1 '@{fa-style-family}'; |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 900; |
|
||||
font-display: @fa-font-display; |
|
||||
src: url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'), |
|
||||
url('@{fa-font-path}/fa-solid-900.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.fas, |
|
||||
.@{fa-css-prefix}-solid { |
|
||||
font-weight: 900; |
|
||||
} |
|
@ -1,10 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
// V4 shims compile (Web Fonts-based) |
|
||||
// ------------------------- |
|
||||
|
|
||||
@import '_variables.less'; |
|
||||
@import '_shims.less'; |
|
@ -1,646 +0,0 @@ |
|||||
area-chart: |
|
||||
name: chart-area |
|
||||
arrow-circle-o-down: |
|
||||
prefix: far |
|
||||
name: circle-down |
|
||||
arrow-circle-o-left: |
|
||||
prefix: far |
|
||||
name: circle-left |
|
||||
arrow-circle-o-right: |
|
||||
prefix: far |
|
||||
name: circle-right |
|
||||
arrow-circle-o-up: |
|
||||
prefix: far |
|
||||
name: circle-up |
|
||||
arrows: |
|
||||
name: up-down-left-right |
|
||||
arrows-alt: |
|
||||
name: maximize |
|
||||
arrows-h: |
|
||||
name: left-right |
|
||||
arrows-v: |
|
||||
name: up-down |
|
||||
asl-interpreting: |
|
||||
name: hands-asl-interpreting |
|
||||
automobile: |
|
||||
name: car |
|
||||
bank: |
|
||||
name: building-columns |
|
||||
bar-chart: |
|
||||
name: chart-column |
|
||||
bar-chart-o: |
|
||||
name: chart-column |
|
||||
bathtub: |
|
||||
name: bath |
|
||||
battery: |
|
||||
name: battery-full |
|
||||
battery-0: |
|
||||
name: battery-empty |
|
||||
battery-1: |
|
||||
name: battery-quarter |
|
||||
battery-2: |
|
||||
name: battery-half |
|
||||
battery-3: |
|
||||
name: battery-three-quarters |
|
||||
battery-4: |
|
||||
name: battery-full |
|
||||
behance-square: |
|
||||
prefix: fab |
|
||||
name: square-behance |
|
||||
bitbucket-square: |
|
||||
prefix: fab |
|
||||
name: bitbucket |
|
||||
bitcoin: |
|
||||
prefix: fab |
|
||||
name: btc |
|
||||
cab: |
|
||||
name: taxi |
|
||||
calendar: |
|
||||
name: calendar-days |
|
||||
calendar-times-o: |
|
||||
prefix: far |
|
||||
name: calendar-xmark |
|
||||
caret-square-o-down: |
|
||||
prefix: far |
|
||||
name: square-caret-down |
|
||||
caret-square-o-left: |
|
||||
prefix: far |
|
||||
name: square-caret-left |
|
||||
caret-square-o-right: |
|
||||
prefix: far |
|
||||
name: square-caret-right |
|
||||
caret-square-o-up: |
|
||||
prefix: far |
|
||||
name: square-caret-up |
|
||||
cc: |
|
||||
prefix: far |
|
||||
name: closed-captioning |
|
||||
chain: |
|
||||
name: link |
|
||||
chain-broken: |
|
||||
name: link-slash |
|
||||
check-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-check |
|
||||
check-square-o: |
|
||||
prefix: far |
|
||||
name: square-check |
|
||||
circle-o-notch: |
|
||||
name: circle-notch |
|
||||
circle-thin: |
|
||||
prefix: far |
|
||||
name: circle |
|
||||
clipboard: |
|
||||
name: paste |
|
||||
clone: |
|
||||
prefix: far |
|
||||
close: |
|
||||
name: xmark |
|
||||
cloud-download: |
|
||||
name: cloud-arrow-down |
|
||||
cloud-upload: |
|
||||
name: cloud-arrow-up |
|
||||
cny: |
|
||||
name: yen-sign |
|
||||
code-fork: |
|
||||
name: code-branch |
|
||||
commenting: |
|
||||
name: comment-dots |
|
||||
commenting-o: |
|
||||
prefix: far |
|
||||
name: comment-dots |
|
||||
compass: |
|
||||
prefix: far |
|
||||
compress: |
|
||||
name: down-left-and-up-right-to-center |
|
||||
copyright: |
|
||||
prefix: far |
|
||||
credit-card: |
|
||||
prefix: far |
|
||||
credit-card-alt: |
|
||||
name: credit-card |
|
||||
cut: |
|
||||
name: scissors |
|
||||
cutlery: |
|
||||
name: utensils |
|
||||
dashboard: |
|
||||
name: gauge-high |
|
||||
deafness: |
|
||||
name: ear-deaf |
|
||||
dedent: |
|
||||
name: outdent |
|
||||
diamond: |
|
||||
prefix: far |
|
||||
name: gem |
|
||||
dollar: |
|
||||
name: dollar-sign |
|
||||
dot-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-dot |
|
||||
drivers-license: |
|
||||
name: id-card |
|
||||
drivers-license-o: |
|
||||
prefix: far |
|
||||
name: id-card |
|
||||
edit: |
|
||||
prefix: far |
|
||||
name: pen-to-square |
|
||||
eercast: |
|
||||
prefix: fab |
|
||||
name: sellcast |
|
||||
eur: |
|
||||
name: euro-sign |
|
||||
euro: |
|
||||
name: euro-sign |
|
||||
exchange: |
|
||||
name: right-left |
|
||||
expand: |
|
||||
name: up-right-and-down-left-from-center |
|
||||
external-link: |
|
||||
name: up-right-from-square |
|
||||
external-link-square: |
|
||||
name: square-up-right |
|
||||
eye: |
|
||||
prefix: far |
|
||||
eye-slash: |
|
||||
prefix: far |
|
||||
eyedropper: |
|
||||
name: eye-dropper |
|
||||
fa: |
|
||||
prefix: fab |
|
||||
name: font-awesome |
|
||||
facebook: |
|
||||
prefix: fab |
|
||||
name: facebook-f |
|
||||
facebook-f: |
|
||||
prefix: fab |
|
||||
name: facebook-f |
|
||||
facebook-official: |
|
||||
prefix: fab |
|
||||
name: facebook |
|
||||
facebook-square: |
|
||||
prefix: fab |
|
||||
name: square-facebook |
|
||||
feed: |
|
||||
name: rss |
|
||||
file-archive-o: |
|
||||
prefix: far |
|
||||
name: file-zipper |
|
||||
file-movie-o: |
|
||||
prefix: far |
|
||||
name: file-video |
|
||||
file-photo-o: |
|
||||
prefix: far |
|
||||
name: file-image |
|
||||
file-picture-o: |
|
||||
prefix: far |
|
||||
name: file-image |
|
||||
file-sound-o: |
|
||||
prefix: far |
|
||||
name: file-audio |
|
||||
file-text: |
|
||||
name: file-lines |
|
||||
file-text-o: |
|
||||
prefix: far |
|
||||
name: file-lines |
|
||||
file-zip-o: |
|
||||
prefix: far |
|
||||
name: file-zipper |
|
||||
files-o: |
|
||||
prefix: far |
|
||||
name: copy |
|
||||
flash: |
|
||||
name: bolt |
|
||||
floppy-o: |
|
||||
prefix: far |
|
||||
name: floppy-disk |
|
||||
frown-o: |
|
||||
prefix: far |
|
||||
name: face-frown |
|
||||
gbp: |
|
||||
name: sterling-sign |
|
||||
ge: |
|
||||
prefix: fab |
|
||||
name: empire |
|
||||
gear: |
|
||||
name: gear |
|
||||
gears: |
|
||||
name: gears |
|
||||
git-square: |
|
||||
prefix: fab |
|
||||
name: square-git |
|
||||
github-square: |
|
||||
prefix: fab |
|
||||
name: square-github |
|
||||
gittip: |
|
||||
prefix: fab |
|
||||
name: gratipay |
|
||||
glass: |
|
||||
name: martini-glass-empty |
|
||||
globe: |
|
||||
name: earth-americas |
|
||||
google-plus: |
|
||||
prefix: fab |
|
||||
name: google-plus-g |
|
||||
google-plus-circle: |
|
||||
prefix: fab |
|
||||
name: google-plus |
|
||||
google-plus-official: |
|
||||
prefix: fab |
|
||||
name: google-plus |
|
||||
google-plus-square: |
|
||||
prefix: fab |
|
||||
name: square-google-plus |
|
||||
group: |
|
||||
name: users |
|
||||
hand-grab-o: |
|
||||
prefix: far |
|
||||
name: hand-back-fist |
|
||||
hand-o-down: |
|
||||
prefix: far |
|
||||
name: hand-point-down |
|
||||
hand-o-left: |
|
||||
prefix: far |
|
||||
name: hand-point-left |
|
||||
hand-o-right: |
|
||||
prefix: far |
|
||||
name: hand-point-right |
|
||||
hand-o-up: |
|
||||
prefix: far |
|
||||
name: hand-point-up |
|
||||
hand-paper-o: |
|
||||
prefix: far |
|
||||
name: hand |
|
||||
hand-rock-o: |
|
||||
prefix: far |
|
||||
name: hand-back-fist |
|
||||
hand-stop-o: |
|
||||
prefix: far |
|
||||
name: hand |
|
||||
hard-of-hearing: |
|
||||
name: ear-deaf |
|
||||
hdd-o: |
|
||||
prefix: far |
|
||||
name: hard-drive |
|
||||
header: |
|
||||
name: heading |
|
||||
home: |
|
||||
name: house |
|
||||
hotel: |
|
||||
name: bed |
|
||||
hourglass-1: |
|
||||
name: hourglass-start |
|
||||
hourglass-2: |
|
||||
name: hourglass-half |
|
||||
hourglass-3: |
|
||||
name: hourglass-end |
|
||||
hourglass-o: |
|
||||
name: hourglass |
|
||||
id-badge: |
|
||||
prefix: far |
|
||||
ils: |
|
||||
name: shekel-sign |
|
||||
image: |
|
||||
prefix: far |
|
||||
name: image |
|
||||
inr: |
|
||||
name: indian-rupee-sign |
|
||||
institution: |
|
||||
name: building-columns |
|
||||
intersex: |
|
||||
name: mars-and-venus |
|
||||
jpy: |
|
||||
name: yen-sign |
|
||||
krw: |
|
||||
name: won-sign |
|
||||
lastfm-square: |
|
||||
prefix: fab |
|
||||
name: square-lastfm |
|
||||
legal: |
|
||||
name: gavel |
|
||||
level-down: |
|
||||
name: turn-down |
|
||||
level-up: |
|
||||
name: turn-up |
|
||||
life-bouy: |
|
||||
name: life-ring |
|
||||
life-buoy: |
|
||||
name: life-ring |
|
||||
life-saver: |
|
||||
name: life-ring |
|
||||
line-chart: |
|
||||
name: chart-line |
|
||||
linkedin: |
|
||||
prefix: fab |
|
||||
name: linkedin-in |
|
||||
linkedin-square: |
|
||||
prefix: fab |
|
||||
name: linkedin |
|
||||
list-alt: |
|
||||
prefix: far |
|
||||
name: rectangle-list |
|
||||
long-arrow-down: |
|
||||
name: down-long |
|
||||
long-arrow-left: |
|
||||
name: left-long |
|
||||
long-arrow-right: |
|
||||
name: right-long |
|
||||
long-arrow-up: |
|
||||
name: up-long |
|
||||
magic: |
|
||||
name: wand-magic-sparkles |
|
||||
mail-forward: |
|
||||
name: share |
|
||||
mail-reply: |
|
||||
name: reply |
|
||||
mail-reply-all: |
|
||||
name: reply-all |
|
||||
map-marker: |
|
||||
name: location-dot |
|
||||
meh-o: |
|
||||
prefix: far |
|
||||
name: face-meh |
|
||||
minus-square-o: |
|
||||
prefix: far |
|
||||
name: square-minus |
|
||||
mobile: |
|
||||
name: mobile-screen-button |
|
||||
mobile-phone: |
|
||||
name: mobile-screen-button |
|
||||
money: |
|
||||
name: money-bill-1 |
|
||||
mortar-board: |
|
||||
name: graduation-cap |
|
||||
navicon: |
|
||||
name: bars |
|
||||
object-group: |
|
||||
prefix: far |
|
||||
object-ungroup: |
|
||||
prefix: far |
|
||||
odnoklassniki-square: |
|
||||
prefix: fab |
|
||||
name: square-odnoklassniki |
|
||||
pause-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-pause |
|
||||
pencil-square: |
|
||||
name: square-pen |
|
||||
pencil-square-o: |
|
||||
prefix: far |
|
||||
name: pen-to-square |
|
||||
photo: |
|
||||
prefix: far |
|
||||
name: image |
|
||||
picture-o: |
|
||||
prefix: far |
|
||||
name: image |
|
||||
pie-chart: |
|
||||
name: chart-pie |
|
||||
pinterest-square: |
|
||||
prefix: fab |
|
||||
name: square-pinterest |
|
||||
play-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-play |
|
||||
plus-square-o: |
|
||||
prefix: far |
|
||||
name: square-plus |
|
||||
question-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-question |
|
||||
ra: |
|
||||
prefix: fab |
|
||||
name: rebel |
|
||||
reddit-square: |
|
||||
prefix: fab |
|
||||
name: square-reddit |
|
||||
refresh: |
|
||||
name: arrows-rotate |
|
||||
registered: |
|
||||
prefix: far |
|
||||
remove: |
|
||||
name: xmark |
|
||||
reorder: |
|
||||
name: bars |
|
||||
repeat: |
|
||||
name: arrow-rotate-right |
|
||||
resistance: |
|
||||
prefix: fab |
|
||||
name: rebel |
|
||||
rmb: |
|
||||
name: yen-sign |
|
||||
rotate-left: |
|
||||
name: arrow-rotate-left |
|
||||
rotate-right: |
|
||||
name: arrow-rotate-right |
|
||||
rouble: |
|
||||
name: ruble-sign |
|
||||
rub: |
|
||||
name: ruble-sign |
|
||||
ruble: |
|
||||
name: ruble-sign |
|
||||
rupee: |
|
||||
name: indian-rupee-sign |
|
||||
s15: |
|
||||
name: bath |
|
||||
save: |
|
||||
prefix: far |
|
||||
name: floppy-disk |
|
||||
send: |
|
||||
name: paper-plane |
|
||||
send-o: |
|
||||
prefix: far |
|
||||
name: paper-plane |
|
||||
share-square-o: |
|
||||
name: share-from-square |
|
||||
shekel: |
|
||||
name: shekel-sign |
|
||||
sheqel: |
|
||||
name: shekel-sign |
|
||||
sign-in: |
|
||||
name: right-to-bracket |
|
||||
sign-out: |
|
||||
name: right-from-bracket |
|
||||
signing: |
|
||||
name: hands |
|
||||
smile-o: |
|
||||
prefix: far |
|
||||
name: face-smile |
|
||||
snapchat-ghost: |
|
||||
prefix: fab |
|
||||
name: snapchat |
|
||||
snapchat-square: |
|
||||
prefix: fab |
|
||||
name: square-snapchat |
|
||||
soccer-ball-o: |
|
||||
prefix: far |
|
||||
name: futbol |
|
||||
sort-alpha-asc: |
|
||||
name: arrow-down-a-z |
|
||||
sort-alpha-desc: |
|
||||
name: arrow-down-z-a |
|
||||
sort-amount-asc: |
|
||||
name: arrow-down-short-wide |
|
||||
sort-amount-desc: |
|
||||
name: arrow-down-wide-short |
|
||||
sort-asc: |
|
||||
name: sort-up |
|
||||
sort-desc: |
|
||||
name: sort-down |
|
||||
sort-numeric-asc: |
|
||||
name: arrow-down-1-9 |
|
||||
sort-numeric-desc: |
|
||||
name: arrow-down-9-1 |
|
||||
star-half-empty: |
|
||||
prefix: far |
|
||||
name: star-half-stroke |
|
||||
star-half-full: |
|
||||
prefix: far |
|
||||
name: star-half-stroke |
|
||||
star-half-o: |
|
||||
prefix: far |
|
||||
name: star-half-stroke |
|
||||
steam-square: |
|
||||
prefix: fab |
|
||||
name: square-steam |
|
||||
sticky-note-o: |
|
||||
prefix: far |
|
||||
name: note-sticky |
|
||||
stop-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-stop |
|
||||
support: |
|
||||
name: life-ring |
|
||||
tablet: |
|
||||
name: tablet-screen-button |
|
||||
tachometer: |
|
||||
name: gauge-high |
|
||||
tasks: |
|
||||
name: bars-progress |
|
||||
television: |
|
||||
name: tv |
|
||||
thermometer: |
|
||||
name: temperature-full |
|
||||
thermometer-0: |
|
||||
name: temperature-empty |
|
||||
thermometer-1: |
|
||||
name: temperature-quarter |
|
||||
thermometer-2: |
|
||||
name: temperature-half |
|
||||
thermometer-3: |
|
||||
name: temperature-three-quarters |
|
||||
thermometer-4: |
|
||||
name: temperature-full |
|
||||
thumb-tack: |
|
||||
name: thumbtack |
|
||||
thumbs-o-down: |
|
||||
prefix: far |
|
||||
name: thumbs-down |
|
||||
thumbs-o-up: |
|
||||
prefix: far |
|
||||
name: thumbs-up |
|
||||
times-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-xmark |
|
||||
times-rectangle: |
|
||||
name: rectangle-xmark |
|
||||
times-rectangle-o: |
|
||||
prefix: far |
|
||||
name: rectangle-xmark |
|
||||
toggle-down: |
|
||||
prefix: far |
|
||||
name: square-caret-down |
|
||||
toggle-left: |
|
||||
prefix: far |
|
||||
name: square-caret-left |
|
||||
toggle-right: |
|
||||
prefix: far |
|
||||
name: square-caret-right |
|
||||
toggle-up: |
|
||||
prefix: far |
|
||||
name: square-caret-up |
|
||||
transgender: |
|
||||
name: mars-and-venus |
|
||||
transgender-alt: |
|
||||
name: transgender |
|
||||
trash: |
|
||||
name: trash-can |
|
||||
trash-o: |
|
||||
prefix: far |
|
||||
name: trash-can |
|
||||
try: |
|
||||
name: turkish-lira-sign |
|
||||
tumblr-square: |
|
||||
prefix: fab |
|
||||
name: square-tumblr |
|
||||
turkish-lira: |
|
||||
name: turkish-lira-sign |
|
||||
twitter-square: |
|
||||
prefix: fab |
|
||||
name: square-twitter |
|
||||
unlink: |
|
||||
name: link-slash |
|
||||
unlock-alt: |
|
||||
name: unlock |
|
||||
unsorted: |
|
||||
name: sort |
|
||||
usd: |
|
||||
name: dollar-sign |
|
||||
user-circle-o: |
|
||||
prefix: far |
|
||||
name: circle-user |
|
||||
vcard: |
|
||||
name: address-card |
|
||||
vcard-o: |
|
||||
prefix: far |
|
||||
name: address-card |
|
||||
viadeo-square: |
|
||||
prefix: fab |
|
||||
name: square-viadeo |
|
||||
video-camera: |
|
||||
name: video |
|
||||
vimeo: |
|
||||
prefix: fab |
|
||||
name: vimeo-v |
|
||||
vimeo-square: |
|
||||
prefix: fab |
|
||||
name: square-vimeo |
|
||||
volume-control-phone: |
|
||||
name: phone-volume |
|
||||
warning: |
|
||||
name: triangle-exclamation |
|
||||
wechat: |
|
||||
prefix: fab |
|
||||
name: weixin |
|
||||
wheelchair-alt: |
|
||||
prefix: fab |
|
||||
name: accessible-icon |
|
||||
window-close-o: |
|
||||
prefix: far |
|
||||
name: rectangle-xmark |
|
||||
window-maximize: |
|
||||
prefix: far |
|
||||
window-restore: |
|
||||
prefix: far |
|
||||
won: |
|
||||
name: won-sign |
|
||||
xing-square: |
|
||||
prefix: fab |
|
||||
name: square-xing |
|
||||
y-combinator-square: |
|
||||
prefix: fab |
|
||||
name: hacker-news |
|
||||
yc: |
|
||||
prefix: fab |
|
||||
name: y-combinator |
|
||||
yc-square: |
|
||||
prefix: fab |
|
||||
name: hacker-news |
|
||||
yen: |
|
||||
name: yen-sign |
|
||||
youtube-play: |
|
||||
prefix: fab |
|
||||
name: youtube |
|
||||
youtube-square: |
|
||||
prefix: fab |
|
||||
name: square-youtube |
|
Before Width: | Height: | Size: 408 B |
Before Width: | Height: | Size: 286 B |
Before Width: | Height: | Size: 396 B |
@ -1,152 +0,0 @@ |
|||||
// animating icons |
|
||||
// -------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-beat { |
|
||||
animation-name: #{$fa-css-prefix}-beat; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-bounce { |
|
||||
animation-name: #{$fa-css-prefix}-bounce; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1)); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-fade { |
|
||||
animation-name: #{$fa-css-prefix}-fade; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-beat-fade { |
|
||||
animation-name: #{$fa-css-prefix}-beat-fade; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-flip { |
|
||||
animation-name: #{$fa-css-prefix}-flip; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-shake { |
|
||||
animation-name: #{$fa-css-prefix}-shake; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-spin { |
|
||||
animation-name: #{$fa-css-prefix}-spin; |
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-spin-reverse { |
|
||||
--#{$fa-css-prefix}-animation-direction: reverse; |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-pulse, |
|
||||
.#{$fa-css-prefix}-spin-pulse { |
|
||||
animation-name: #{$fa-css-prefix}-spin; |
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8)); |
|
||||
} |
|
||||
|
|
||||
// if agent or operating system prefers reduced motion, disable animations |
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ |
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion |
|
||||
@media (prefers-reduced-motion: reduce) { |
|
||||
.#{$fa-css-prefix}-beat, |
|
||||
.#{$fa-css-prefix}-bounce, |
|
||||
.#{$fa-css-prefix}-fade, |
|
||||
.#{$fa-css-prefix}-beat-fade, |
|
||||
.#{$fa-css-prefix}-flip, |
|
||||
.#{$fa-css-prefix}-pulse, |
|
||||
.#{$fa-css-prefix}-shake, |
|
||||
.#{$fa-css-prefix}-spin, |
|
||||
.#{$fa-css-prefix}-spin-pulse { |
|
||||
animation-delay: -1ms; |
|
||||
animation-duration: 1ms; |
|
||||
animation-iteration-count: 1; |
|
||||
transition-delay: 0s; |
|
||||
transition-duration: 0s; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-beat { |
|
||||
0%, 90% { transform: scale(1); } |
|
||||
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); } |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-bounce { |
|
||||
0% { transform: scale(1,1) translateY(0); } |
|
||||
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); } |
|
||||
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); } |
|
||||
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); } |
|
||||
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); } |
|
||||
64% { transform: scale(1,1) translateY(0); } |
|
||||
100% { transform: scale(1,1) translateY(0); } |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-fade { |
|
||||
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); } |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-beat-fade { |
|
||||
0%, 100% { |
|
||||
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4); |
|
||||
transform: scale(1); |
|
||||
} |
|
||||
50% { |
|
||||
opacity: 1; |
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125)); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-flip { |
|
||||
50% { |
|
||||
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg)); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-shake { |
|
||||
0% { transform: rotate(-15deg); } |
|
||||
4% { transform: rotate(15deg); } |
|
||||
8%, 24% { transform: rotate(-18deg); } |
|
||||
12%, 28% { transform: rotate(18deg); } |
|
||||
16% { transform: rotate(-22deg); } |
|
||||
20% { transform: rotate(22deg); } |
|
||||
32% { transform: rotate(-12deg); } |
|
||||
36% { transform: rotate(12deg); } |
|
||||
40%, 100% { transform: rotate(0deg); } |
|
||||
} |
|
||||
|
|
||||
@keyframes #{$fa-css-prefix}-spin { |
|
||||
0% { transform: rotate(0deg); } |
|
||||
100% { transform: rotate(360deg); } |
|
||||
} |
|
@ -1,20 +0,0 @@ |
|||||
// bordered + pulled icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-border { |
|
||||
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color}); |
|
||||
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius}); |
|
||||
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style}); |
|
||||
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width}); |
|
||||
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding}); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-pull-left { |
|
||||
float: left; |
|
||||
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-pull-right { |
|
||||
float: right; |
|
||||
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); |
|
||||
} |
|
@ -1,43 +0,0 @@ |
|||||
// base icon class definition |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix} { |
|
||||
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}'); |
|
||||
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style}); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-solid, |
|
||||
.#{$fa-css-prefix}-regular, |
|
||||
.#{$fa-css-prefix}-brands, |
|
||||
.fas, |
|
||||
.far, |
|
||||
.fab, |
|
||||
.#{$fa-css-prefix}-sharp-solid, |
|
||||
.#{$fa-css-prefix}-classic, |
|
||||
.#{$fa-css-prefix} { |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
display: var(--#{$fa-css-prefix}-display, #{$fa-display}); |
|
||||
font-style: normal; |
|
||||
font-variant: normal; |
|
||||
line-height: 1; |
|
||||
text-rendering: auto; |
|
||||
} |
|
||||
|
|
||||
.fas, |
|
||||
.#{$fa-css-prefix}-classic, |
|
||||
.#{$fa-css-prefix}-solid, |
|
||||
.far, |
|
||||
.#{$fa-css-prefix}-regular { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
} |
|
||||
|
|
||||
.fab, |
|
||||
.#{$fa-css-prefix}-brands { |
|
||||
font-family: 'Font Awesome 6 Brands'; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
%fa-icon { |
|
||||
@include fa-icon; |
|
||||
} |
|
@ -1,7 +0,0 @@ |
|||||
// fixed-width icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-fw { |
|
||||
text-align: center; |
|
||||
width: $fa-fw-width; |
|
||||
} |
|
@ -1,57 +0,0 @@ |
|||||
// functions |
|
||||
// -------------------------- |
|
||||
|
|
||||
// fa-content: convenience function used to set content property |
|
||||
@function fa-content($fa-var) { |
|
||||
@return unquote("\"#{ $fa-var }\""); |
|
||||
} |
|
||||
|
|
||||
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap |
|
||||
// |
|
||||
// Licensed under: The MIT License (MIT) |
|
||||
// |
|
||||
// Copyright (c) 2011-2021 Twitter, Inc. |
|
||||
// Copyright (c) 2011-2021 The Bootstrap Authors |
|
||||
// |
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy |
|
||||
// of this software and associated documentation files (the "Software"), to deal |
|
||||
// in the Software without restriction, including without limitation the rights |
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
||||
// copies of the Software, and to permit persons to whom the Software is |
|
||||
// furnished to do so, subject to the following conditions: |
|
||||
// |
|
||||
// The above copyright notice and this permission notice shall be included in |
|
||||
// all copies or substantial portions of the Software. |
|
||||
// |
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|
||||
// THE SOFTWARE. |
|
||||
|
|
||||
@function fa-divide($dividend, $divisor, $precision: 10) { |
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1); |
|
||||
$dividend: abs($dividend); |
|
||||
$divisor: abs($divisor); |
|
||||
$quotient: 0; |
|
||||
$remainder: $dividend; |
|
||||
@if $dividend == 0 { |
|
||||
@return 0; |
|
||||
} |
|
||||
@if $divisor == 0 { |
|
||||
@error "Cannot divide by 0"; |
|
||||
} |
|
||||
@if $divisor == 1 { |
|
||||
@return $dividend; |
|
||||
} |
|
||||
@while $remainder >= $divisor { |
|
||||
$quotient: $quotient + 1; |
|
||||
$remainder: $remainder - $divisor; |
|
||||
} |
|
||||
@if $remainder > 0 and $precision > 0 { |
|
||||
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1; |
|
||||
} |
|
||||
@return ($quotient + $remainder) * $sign; |
|
||||
} |
|
@ -1,10 +0,0 @@ |
|||||
// specific icon class definition |
|
||||
// ------------------------- |
|
||||
|
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen |
|
||||
readers do not read off random characters that represent icons */ |
|
||||
|
|
||||
@each $name, $icon in $fa-icons { |
|
||||
.#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); } |
|
||||
} |
|
||||
|
|
@ -1,18 +0,0 @@ |
|||||
// icons in a list |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-ul { |
|
||||
list-style-type: none; |
|
||||
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin}); |
|
||||
padding-left: 0; |
|
||||
|
|
||||
> li { position: relative; } |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-li { |
|
||||
left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width})); |
|
||||
position: absolute; |
|
||||
text-align: center; |
|
||||
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}); |
|
||||
line-height: inherit; |
|
||||
} |
|
@ -1,72 +0,0 @@ |
|||||
// mixins |
|
||||
// -------------------------- |
|
||||
|
|
||||
// base rendering for an icon |
|
||||
@mixin fa-icon { |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
display: inline-block; |
|
||||
font-style: normal; |
|
||||
font-variant: normal; |
|
||||
font-weight: normal; |
|
||||
line-height: 1; |
|
||||
} |
|
||||
|
|
||||
// sets relative font-sizing and alignment (in _sizing) |
|
||||
@mixin fa-size ($font-size) { |
|
||||
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base |
|
||||
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent |
|
||||
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender |
|
||||
} |
|
||||
|
|
||||
// only display content to screen readers |
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ |
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ |
|
||||
@mixin fa-sr-only() { |
|
||||
position: absolute; |
|
||||
width: 1px; |
|
||||
height: 1px; |
|
||||
padding: 0; |
|
||||
margin: -1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(0, 0, 0, 0); |
|
||||
white-space: nowrap; |
|
||||
border-width: 0; |
|
||||
} |
|
||||
|
|
||||
// use in conjunction with .sr-only to only display content when it's focused |
|
||||
@mixin fa-sr-only-focusable() { |
|
||||
&:not(:focus) { |
|
||||
@include fa-sr-only(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// sets a specific icon family to use alongside style + icon mixins |
|
||||
|
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable, |
|
||||
// including all style-specific font properties, and both the ::before |
|
||||
// and ::after elements in the duotone case. |
|
||||
@mixin fa-icon-solid($fa-var) { |
|
||||
@extend %fa-icon; |
|
||||
@extend .fa-solid; |
|
||||
|
|
||||
&::before { |
|
||||
content: unquote("\"#{ $fa-var }\""); |
|
||||
} |
|
||||
} |
|
||||
@mixin fa-icon-regular($fa-var) { |
|
||||
@extend %fa-icon; |
|
||||
@extend .fa-regular; |
|
||||
|
|
||||
&::before { |
|
||||
content: unquote("\"#{ $fa-var }\""); |
|
||||
} |
|
||||
} |
|
||||
@mixin fa-icon-brands($fa-var) { |
|
||||
@extend %fa-icon; |
|
||||
@extend .fa-brands; |
|
||||
|
|
||||
&::before { |
|
||||
content: unquote("\"#{ $fa-var }\""); |
|
||||
} |
|
||||
} |
|
@ -1,31 +0,0 @@ |
|||||
// rotating + flipping icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-rotate-90 { |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-rotate-180 { |
|
||||
transform: rotate(180deg); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-rotate-270 { |
|
||||
transform: rotate(270deg); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-flip-horizontal { |
|
||||
transform: scale(-1, 1); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-flip-vertical { |
|
||||
transform: scale(1, -1); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-flip-both, |
|
||||
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { |
|
||||
transform: scale(-1, -1); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-rotate-by { |
|
||||
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0)); |
|
||||
} |
|
@ -1,14 +0,0 @@ |
|||||
// screen-reader utilities |
|
||||
// ------------------------- |
|
||||
|
|
||||
// only display content to screen readers |
|
||||
.sr-only, |
|
||||
.#{$fa-css-prefix}-sr-only { |
|
||||
@include fa-sr-only; |
|
||||
} |
|
||||
|
|
||||
// use in conjunction with .sr-only to only display content when it's focused |
|
||||
.sr-only-focusable, |
|
||||
.#{$fa-css-prefix}-sr-only-focusable { |
|
||||
@include fa-sr-only-focusable; |
|
||||
} |
|
@ -1,16 +0,0 @@ |
|||||
// sizing icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
// literal magnification scale |
|
||||
@for $i from 1 through 10 { |
|
||||
.#{$fa-css-prefix}-#{$i}x { |
|
||||
font-size: $i * 1em; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// step-based scale (with alignment) |
|
||||
@each $size, $value in $fa-sizes { |
|
||||
.#{$fa-css-prefix}-#{$size} { |
|
||||
@include fa-size($value); |
|
||||
} |
|
||||
} |
|
@ -1,32 +0,0 @@ |
|||||
// stacking icons |
|
||||
// ------------------------- |
|
||||
|
|
||||
.#{$fa-css-prefix}-stack { |
|
||||
display: inline-block; |
|
||||
height: 2em; |
|
||||
line-height: 2em; |
|
||||
position: relative; |
|
||||
vertical-align: $fa-stack-vertical-align; |
|
||||
width: $fa-stack-width; |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-stack-1x, |
|
||||
.#{$fa-css-prefix}-stack-2x { |
|
||||
left: 0; |
|
||||
position: absolute; |
|
||||
text-align: center; |
|
||||
width: 100%; |
|
||||
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index}); |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-stack-1x { |
|
||||
line-height: inherit; |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-stack-2x { |
|
||||
font-size: 2em; |
|
||||
} |
|
||||
|
|
||||
.#{$fa-css-prefix}-inverse { |
|
||||
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse}); |
|
||||
} |
|
@ -1,30 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import 'functions'; |
|
||||
@import 'variables'; |
|
||||
|
|
||||
:root, :host { |
|
||||
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands'; |
|
||||
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Brands'; |
|
||||
font-style: normal; |
|
||||
font-weight: 400; |
|
||||
font-display: $fa-font-display; |
|
||||
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), |
|
||||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.fab, |
|
||||
.#{$fa-css-prefix}-brands { |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
|
|
||||
@each $name, $icon in $fa-brand-icons { |
|
||||
.#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); } |
|
||||
} |
|
@ -1,21 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
// Font Awesome core compile (Web Fonts-based) |
|
||||
// ------------------------- |
|
||||
|
|
||||
@import 'functions'; |
|
||||
@import 'variables'; |
|
||||
@import 'mixins'; |
|
||||
@import 'core'; |
|
||||
@import 'sizing'; |
|
||||
@import 'fixed-width'; |
|
||||
@import 'list'; |
|
||||
@import 'bordered-pulled'; |
|
||||
@import 'animated'; |
|
||||
@import 'rotated-flipped'; |
|
||||
@import 'stacked'; |
|
||||
@import 'icons'; |
|
||||
@import 'screen-reader'; |
|
@ -1,27 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import 'functions'; |
|
||||
@import 'variables'; |
|
||||
|
|
||||
:root, :host { |
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }'; |
|
||||
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }'; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 400; |
|
||||
font-display: $fa-font-display; |
|
||||
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), |
|
||||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.far, |
|
||||
.#{$fa-css-prefix}-regular { |
|
||||
font-weight: 400; |
|
||||
} |
|
@ -1,27 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
@import 'functions'; |
|
||||
@import 'variables'; |
|
||||
|
|
||||
:root, :host { |
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }'; |
|
||||
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }'; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
@font-face { |
|
||||
font-family: 'Font Awesome 6 Free'; |
|
||||
font-style: normal; |
|
||||
font-weight: 900; |
|
||||
font-display: $fa-font-display; |
|
||||
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), |
|
||||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.fas, |
|
||||
.#{$fa-css-prefix}-solid { |
|
||||
font-weight: 900; |
|
||||
} |
|
@ -1,11 +0,0 @@ |
|||||
/*! |
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com |
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) |
|
||||
* Copyright 2024 Fonticons, Inc. |
|
||||
*/ |
|
||||
// V4 shims compile (Web Fonts-based) |
|
||||
// ------------------------- |
|
||||
|
|
||||
@import 'functions'; |
|
||||
@import 'variables'; |
|
||||
@import 'shims'; |
|
Before Width: | Height: | Size: 496 KiB |
Before Width: | Height: | Size: 115 KiB |
Before Width: | Height: | Size: 870 KiB |
Before Width: | Height: | Size: 953 B After Width: | Height: | Size: 953 B |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |