mirror of
https://github.com/penpot/penpot.git
synced 2025-01-22 06:32:38 -05:00
161 lines
3.7 KiB
SCSS
161 lines
3.7 KiB
SCSS
// 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
|
|
|
|
// 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;
|
|
$fs14: 0.875rem;
|
|
$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
|
|
|
|
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;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
box-sizing: border-box;
|
|
font-family: "worksans", sans-serif;
|
|
font-size: $fs14;
|
|
margin-bottom: $size-4;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
line-height: $lh-normal;
|
|
margin-top: 1px 0 0;
|
|
}
|
|
|
|
.form-errors {
|
|
color: var(--status-color-warning-500);
|
|
}
|
|
|
|
// Input slidebar
|
|
|
|
input[type="range"] {
|
|
background-color: transparent;
|
|
-webkit-appearance: none;
|
|
margin: 10px 0 10px 3px;
|
|
max-width: 70px;
|
|
width: 100%;
|
|
}
|
|
input[type="range"]:focus {
|
|
outline: none;
|
|
}
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 6px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
background: $color-gray-60;
|
|
border-radius: $br25;
|
|
border: 0px solid #000101;
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
border: 0px solid #000000;
|
|
height: 18px;
|
|
width: 6px;
|
|
border-radius: $br7;
|
|
background: $color-gray-20;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
margin-top: -6px;
|
|
}
|
|
input[type="range"]:focus::-webkit-slider-runnable-track {
|
|
background: $color-gray-60;
|
|
}
|
|
input[type="range"]::-moz-range-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
background: $color-gray-60;
|
|
border-radius: $br25;
|
|
border: 0px solid #000101;
|
|
}
|
|
input[type="range"]::-moz-range-thumb {
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
border: 0px solid #000000;
|
|
height: 24px;
|
|
width: 8px;
|
|
border-radius: $br7;
|
|
background: $color-gray-20;
|
|
cursor: pointer;
|
|
}
|
|
input[type="range"]::-ms-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-width: 39px 0;
|
|
color: transparent;
|
|
}
|
|
input[type="range"]::-ms-fill-lower {
|
|
background: $color-gray-60;
|
|
border: 0px solid #000101;
|
|
border-radius: $br50;
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
}
|
|
input[type="range"]::-ms-fill-upper {
|
|
background: $color-gray-60;
|
|
border: 0px solid #000101;
|
|
border-radius: $br50;
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
}
|
|
input[type="range"]::-ms-thumb {
|
|
box-shadow:
|
|
0px 0px 0px #000000,
|
|
0px 0px 0px #0d0d0d;
|
|
border: 0px solid #000000;
|
|
height: 24px;
|
|
width: 8px;
|
|
border-radius: $br7;
|
|
background: $color-gray-20;
|
|
cursor: pointer;
|
|
}
|
|
input[type="range"]:focus::-ms-fill-lower {
|
|
background: $color-gray-60;
|
|
}
|
|
input[type="range"]:focus::-ms-fill-upper {
|
|
background: $color-gray-60;
|
|
}
|
|
|
|
[draggable] {
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
/* Required to make elements draggable in old WebKit */
|
|
-khtml-user-drag: element;
|
|
-webkit-user-drag: element;
|
|
}
|