platform/packages/theme/styles/_layouts.scss
Andrey Platov 9562eefd8e
editbox border 2px
Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>
2021-08-26 23:34:18 +02:00

214 lines
6.1 KiB
SCSS

//
// Copyright © 2021 Anticrm Platform Contributors.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
//
/* CLEAR */
button {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
font-size: inherit;
background-color: transparent;
border: 1px solid transparent;
outline: none;
cursor: pointer;
}
input {
font: inherit;
background-color: transparent;
outline: none;
color: var(--theme-caption-color);
}
audio, canvas, embed, iframe, img, object, svg, video {
display: block;
vertical-align: middle;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--theme-caption-color);
transition: background-color 5000s ease-in-out 0s;
background: transparent;
}
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
// input:-webkit-autofill,
// input:-webkit-autofill:hover,
// input:-webkit-autofill:focus,
// input:-webkit-autofill:active {
// -webkit-animation: autofill 0s forwards;
// }
// @-webkit-keyframes autofill {
// 100% {
// background: transparent;
// color: inherit;
// }
// }
/* Common */
.flex { display: flex; }
.flex-nowrap {
display: flex;
flex-wrap: nowrap;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-stretch {
display: flex;
align-items: stretch;
}
.flex-row-center {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.flex-row-reverse {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-col-center {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-col-stretch {
display: flex;
flex-direction: column;
align-items: stretch;
}
.h-full { height: 100%; }
.square-36 { width: 2.25rem; height: 2.25rem; }
/* --------- */
.svg-small {
width: 1.143em;
height: 1.143em;
}
.svg-medium {
width: 1.429em;
height: 1.429em;
}
.svg-large {
width: 1.715em;
height: 1.715em;
}
.hidden-text {
position: absolute;
visibility: hidden;
overflow: hidden;
white-space: pre-wrap;
}
.focused-button {
background-color: var(--theme-button-bg-focused);
border: 1px solid transparent;
& > .icon { opacity: .3; }
&.selected {
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-bg-accent-color);
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
& > .icon { opacity: 1; }
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
& > .icon { opacity: 1; }
}
}
/* Backgrounds & Colors */
.background-theme-bg-color { background-color: var(--theme-bg-color); }
.background-highlight-red { background-color: var(--highlight-red); }
.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
.background-menu-divider { background-color: var(--theme-menu-divider); }
.background-primary-button-enabled { background-color: var(--primary-button-enabled); }
.content-color { color: var(--theme-content-color); }
.content-trans-color { color: var(--theme-content-trans-color); }
.caption-color { color: var(--theme-caption-color); }
.border-primary-button { border-color: var(--primary-button-border); }
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
.bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); }
/* Popups */
// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before, .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before {
// content: '';
// position: absolute;
// width: .625rem;
// height: 1.75rem;
// clip-path: path('M0.6,8.3l2.7,2.4C4.4,11.8,5,12.8,5,14C5,13.1,5,0.9,5,0c0,1.2-0.6,2.2-1.7,3.2L0.6,5.7 c-0.7,0.6-0.8,1.7-0.2,2.5C0.5,8.2,0.5,8.3,0.6,8.3z');
// }
// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before
// { transform: rotate(-90deg); }
// .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before
// { transform: rotate(90deg); }
// .popup-top-right::after, .popup-top-left::after, .popup-bottom-right::after, .popup-bottom-left::after
// { background-color: var(--theme-button-bg-hovered); }
// .popup-top-right::before, .popup-top-left::before, .popup-bottom-right::before, .popup-bottom-left::before
// { background-color: var(--theme-button-bg-hovered); box-shadow: inset 0 0 0 2rem var(--theme-button-border-enabled); }
// .popup-top-right::after, .popup-top-left::after
// { bottom: -.875rem; }
// .popup-top-right::before, .popup-top-left::before
// { bottom: -.9375rem; }
// .popup-bottom-right::after, .popup-bottom-left::after
// { top: -.875rem; }
// .popup-bottom-right::before, .popup-bottom-left::before
// { top: -.9375rem; }
// .popup-top-left::after, .popup-top-left::before, .popup-bottom-left::after, .popup-bottom-left::before
// { right: 1.5rem; }
// .popup-top-right::after, .popup-top-right::before, .popup-bottom-right::after, .popup-bottom-right::before
// { left: 1.5rem; }