mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
✨ Clean up unused selectors / mixins / sass vars
This commit is contained in:
Belén Albeza
parent
2d53b96a15
commit
0c3f47b0c3
15 changed files with 70 additions and 501 deletions
|
|
@ -9,8 +9,8 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: lighten($color-gray-10, 5%);
|
||||
color: $color-gray-20;
|
||||
background-color: var(--db-primary);
|
||||
color: var(--df-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-family);
|
||||
|
|
@ -79,19 +79,10 @@ p {
|
|||
font-size: $fs12;
|
||||
margin-bottom: 1rem;
|
||||
line-height: $lh-133;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs16;
|
||||
line-height: $lh-143;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: $lh-133;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
line-height: $lh-143;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -111,31 +102,16 @@ h1 {
|
|||
font-weight: $fw500;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs38;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
|
||||
&.supertitle {
|
||||
font-size: $fs44;
|
||||
font-weight: $fw300;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs44;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: $fs24;
|
||||
font-weight: $fw300;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs32;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-canvas: #e8e9ea;
|
||||
$color-dashboard: #f6f6f6;
|
||||
|
||||
// Main color
|
||||
$color-primary: #31efb8;
|
||||
|
||||
// Secondary colors
|
||||
$color-success: #49d793;
|
||||
$color-complete: #a599c6;
|
||||
$color-warning: #fc8802;
|
||||
$color-danger: #e65244;
|
||||
$color-info: #59b9e2;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-10: #e3e3e3;
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-30: #7b7d85;
|
||||
$color-gray-40: #64666a;
|
||||
$color-gray-50: #303236;
|
||||
$color-gray-60: #1f1f1f;
|
||||
|
||||
// Mixing Color variable for creating both light and dark colors
|
||||
$mix-percentage-dark: 81%;
|
||||
$mix-percentage-darker: 60%;
|
||||
$mix-percentage-lighter: 20%;
|
||||
|
||||
// Lighter colors
|
||||
|
||||
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
|
||||
|
||||
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
|
||||
|
||||
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
|
||||
|
||||
// Darker colors
|
||||
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
|
||||
|
||||
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
|
||||
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
|
||||
|
||||
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295;
|
||||
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
|
||||
|
||||
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
|
||||
|
||||
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
|
||||
|
||||
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
|
||||
|
||||
// bg transparent
|
||||
$color-dark-bg: rgba(0, 0, 0, 0.4);
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Padding & Margin sizes
|
||||
$size-1: 0.25rem;
|
||||
$size-2: 0.5rem;
|
||||
$size-3: 0.75rem;
|
||||
$size-4: 1rem;
|
||||
$size-5: 1.5rem;
|
||||
$size-6: 2rem;
|
||||
|
||||
// Border radius
|
||||
$br0: 0px;
|
||||
$br2: 2px;
|
||||
$br3: 3px;
|
||||
$br4: 4px;
|
||||
$br5: 5px;
|
||||
$br6: 6px;
|
||||
$br7: 7px;
|
||||
$br8: 8px;
|
||||
$br10: 10px;
|
||||
$br12: 12px;
|
||||
$br25: 25px;
|
||||
$br50: 50px;
|
||||
$br99: 99px;
|
||||
$br-circle: 50%; // Need to be investigated, before we can use variable
|
||||
|
||||
.row-flex {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: $size-1;
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.row-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.column-half {
|
||||
margin-right: $size-2;
|
||||
}
|
||||
|
||||
// Display
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.display {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
|
@ -4,114 +4,6 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
/// This mixin allows you to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
|
||||
/// @group Mixins
|
||||
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
|
||||
$bp-min-720: "(min-width: 720px)";
|
||||
$bp-min-1020: "(min-width: 1020px)";
|
||||
$bp-min-1366: "(min-width: 1366px)";
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
$bp-min-2556: "(min-width: 2556px)";
|
||||
|
||||
@mixin bp($point) {
|
||||
@if $point == mobile {
|
||||
@media #{$bp-min-720} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == tablet {
|
||||
@media #{$bp-min-1020} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == desktop {
|
||||
@media #{$bp-min-1366} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Advanced positioning
|
||||
// ----------------
|
||||
@mixin position(
|
||||
$type,
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
position: $type;
|
||||
$allowed_types: absolute relative fixed;
|
||||
@if not index($allowed_types, $type) {
|
||||
@warn "Unknown position: #{$type}.";
|
||||
}
|
||||
@each $data in top $top, right $right, bottom $bottom, left $left {
|
||||
#{nth($data, 1)}: nth($data, 2);
|
||||
}
|
||||
}
|
||||
@mixin absolute(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(absolute, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin relative(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(relative, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin fixed(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(fixed, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
/// Center an element vertically and horizontally with an absolute position.
|
||||
/// @group Mixins
|
||||
|
||||
@mixin centerer {
|
||||
@include absolute(50%, null, null, 50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/// This mixing allow you to add placeholder colors in all available browsers
|
||||
/// @group Mixins
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Allows you to visually
|
||||
/// @group Mixins
|
||||
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
@font-face {
|
||||
|
|
@ -146,18 +38,3 @@ $bp-min-2556: "(min-width: 2556px)";
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin paragraph-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background-color: $color-gray-50;
|
||||
bottom: -3px;
|
||||
content: "...";
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,54 +4,17 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Buttons
|
||||
// TODO: These are legacy Sass vars that are now only used in this file.
|
||||
// We should switch them for the new DS tokens.
|
||||
$color-gray-40: #64666a;
|
||||
$color-gray-60: #1f1f1f;
|
||||
$size-4: 1rem;
|
||||
$br7: 7px;
|
||||
$br25: 25px;
|
||||
$br50: 50px;
|
||||
|
||||
%btn {
|
||||
appearance: none;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: $br3;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs12;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
min-width: 25px;
|
||||
padding: 0 1rem;
|
||||
transition: all 0.4s;
|
||||
text-decoration: none !important;
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
&.btn-large {
|
||||
font-size: $fs14;
|
||||
height: 40px;
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
&.btn-small {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@extend %btn;
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-black;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="button"][disabled],
|
||||
.btn-disabled {
|
||||
background-color: $color-gray-10;
|
||||
input[type="button"][disabled] {
|
||||
background-color: var(--color-canvas); // TODO: see if we can remove this whole selector
|
||||
color: $color-gray-40;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -75,7 +38,7 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
.form-errors {
|
||||
color: $color-danger;
|
||||
color: var(--status-color-warning-500);
|
||||
}
|
||||
|
||||
// Input slidebar
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@
|
|||
|
||||
@use "sass:color";
|
||||
|
||||
// TODO: legacy Sass colors, we should eventually try to remove them in
|
||||
// favor of DS colors.
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-50: #303236;
|
||||
|
||||
:root {
|
||||
// DARK
|
||||
// Dark background
|
||||
|
|
@ -13,6 +18,7 @@
|
|||
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
|
||||
--db-secondary: #000000;
|
||||
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--db-secondary-40: #{color.change(#000000, $alpha: 0.4)};
|
||||
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
|
||||
--db-tertiary: #212426;
|
||||
--db-quaternary: #2e3434;
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
// MAIN STYLES
|
||||
//#################################################
|
||||
|
||||
@import "common/dependencies/colors";
|
||||
@import "common/dependencies/helpers";
|
||||
@import "common/refactor/color-defs.scss";
|
||||
@import "common/dependencies/mixin";
|
||||
@import "common/dependencies/fonts";
|
||||
@import "common/dependencies/reset";
|
||||
|
|
@ -23,7 +22,6 @@
|
|||
@import "common/dependencies/z-index";
|
||||
@import "common/dependencies/highlightjs-theme";
|
||||
|
||||
@import "common/refactor/color-defs.scss";
|
||||
@import "common/refactor/themes.scss";
|
||||
@import "common/refactor/design-tokens.scss";
|
||||
|
||||
|
|
@ -33,7 +31,6 @@
|
|||
|
||||
@import "common/base";
|
||||
@import "main/layouts/main-layout";
|
||||
@import "main/layouts/not-found";
|
||||
|
||||
//#################################################
|
||||
// Commons
|
||||
|
|
|
|||
|
|
@ -10,25 +10,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-layout {
|
||||
background-color: $color-white;
|
||||
display: grid;
|
||||
grid-template-rows: 50px 1fr;
|
||||
grid-template-columns: 40px 256px 1fr;
|
||||
height: 100vh;
|
||||
|
||||
.dashboard-sidebar {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
grid-row: 1 / span 2;
|
||||
padding: 1rem 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
.not-found-layout {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 120px auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.not-found-header {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
|
||||
svg {
|
||||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.image {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
svg {
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-message {
|
||||
color: $color-black;
|
||||
font-size: $fs80;
|
||||
line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded)
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc-message {
|
||||
color: $color-black;
|
||||
font-size: $fs26;
|
||||
font-weight: $fw300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-info {
|
||||
margin-top: 20px;
|
||||
color: $color-black;
|
||||
font-size: $fs16;
|
||||
font-weight: $fw200;
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
b {
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ svg#loader-icon {
|
|||
|
||||
// btn pencil loader
|
||||
svg#loader-pencil {
|
||||
fill: $color-primary-darker;
|
||||
fill: var(--color-accent-tertiary);
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.text-editor,
|
||||
.rich-text {
|
||||
color: $color-black;
|
||||
color: var(--app-black);
|
||||
height: 100%;
|
||||
font-family: sourcesanspro;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// TODO: legacy sass vars. To be removed in favor of DS tokens
|
||||
$br3: 3px;
|
||||
$br4: 4px;
|
||||
|
||||
$width-left-toolbar: 48px;
|
||||
|
||||
$width-settings-bar: 256px;
|
||||
|
|
@ -18,7 +22,7 @@ $height-palette-max: 80px;
|
|||
width: 100vw;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
background-color: $color-canvas;
|
||||
background-color: var(--color-canvas);
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
|
|
@ -69,7 +73,7 @@ $height-palette-max: 80px;
|
|||
}
|
||||
|
||||
.workspace-content {
|
||||
background-color: $color-canvas;
|
||||
background-color: var(--color-canvas);
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -96,7 +100,7 @@ $height-palette-max: 80px;
|
|||
}
|
||||
|
||||
.coordinates {
|
||||
background-color: $color-dark-bg;
|
||||
background-color: var(--db-primary);
|
||||
border-radius: $br3;
|
||||
bottom: 0px;
|
||||
padding-left: 5px;
|
||||
|
|
@ -114,16 +118,16 @@ $height-palette-max: 80px;
|
|||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
color: var(--df-primary);
|
||||
font-size: $fs12;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
background-color: $color-dark-bg;
|
||||
background-color: var(--db-secondary-40);
|
||||
border-radius: $br3;
|
||||
color: $color-white;
|
||||
color: var(--df-primary);
|
||||
font-size: $fs12;
|
||||
padding: 3px 8px;
|
||||
transition: none;
|
||||
|
|
@ -208,7 +212,7 @@ $height-palette-max: 80px;
|
|||
z-index: 13;
|
||||
|
||||
rect {
|
||||
fill: $color-canvas;
|
||||
fill: var(--color-canvas);
|
||||
}
|
||||
path {
|
||||
stroke: $color-gray-20;
|
||||
|
|
@ -223,7 +227,7 @@ $height-palette-max: 80px;
|
|||
z-index: 13;
|
||||
|
||||
rect {
|
||||
fill: $color-canvas;
|
||||
fill: var(--color-canvas);
|
||||
}
|
||||
path {
|
||||
stroke: $color-gray-20;
|
||||
|
|
@ -264,12 +268,11 @@ $height-palette-max: 80px;
|
|||
z-index: 12;
|
||||
pointer-events: none;
|
||||
|
||||
.path-actions,
|
||||
.viewport-actions-container {
|
||||
pointer-events: initial;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
background: var(--app-white);
|
||||
border-radius: $br3;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $color-gray-20;
|
||||
|
|
@ -302,62 +305,4 @@ $height-palette-max: 80px;
|
|||
flex-direction: row;
|
||||
border-right: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
.viewport-actions-entry {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 0.25rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $br3;
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: initial;
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-toggled {
|
||||
background: $color-black;
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-actions-entry-wide {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
|
||||
svg {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.path-actions > :first-child .viewport-actions-entry {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.path-actions > :last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-actions > :last-child .viewport-actions-entry {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.button-link
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.util.keyboard :as kbd]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -18,8 +20,8 @@
|
|||
(when (kbd/enter? event)
|
||||
(when (fn? on-click)
|
||||
(on-click event)))))]
|
||||
[:a.btn-primary.btn-large.button-link
|
||||
{:class class
|
||||
[:a
|
||||
{:class (dm/str class " " (stl/css :button))
|
||||
:tab-index "0"
|
||||
:on-click on-click
|
||||
:on-key-down on-key-down}
|
||||
|
|
|
|||
28
frontend/src/app/main/ui/components/button_link.scss
Normal file
28
frontend/src/app/main/ui/components/button_link.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.button {
|
||||
appearance: none;
|
||||
align-items: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: "worksans", sans-serif;
|
||||
justify-content: center;
|
||||
min-width: 25px;
|
||||
padding: 0 1rem;
|
||||
transition: all 0.4s;
|
||||
text-decoration: none !important;
|
||||
|
||||
height: 40px;
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,9 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
|
||||
$thumbnail-default-width: $s-252; // Default width
|
||||
$thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue