platform/packages/theme/styles/_tailwind.scss
Alexander Platov 1c0ccbeef2
Starting px to em. (#18)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2021-08-14 13:42:31 +02:00

113 lines
3.4 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.
//
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.top-3 { top: .75rem }
.right-3 { right: .75rem }
/* Width & Height */
.w-0 { width: 0; }
.w-2 { width: .5rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-13 { width: 3.25rem; } // our
.w-20 { width: 5rem; }
.w-72 { width: 18rem; }
.w-full { width: 100%; }
.h-0 { height: 0; }
.h-2 { height: .5rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-13 { height: 3.25rem; } // our
.h-18 { height: 4.5rem; } // our
.h-auto { height: auto; }
.h-px { height: 1px; }
.h-screen { height: 100vh; }
/* Spacing */
.mr-2 { margin-right: .5rem; }
.mb-2 { margin-bottom: .5rem; }
.mx-3 { margin-left: .75rem; margin-right: .75rem; }
.mr-3 { margin-right: .75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mr-4 { margin-right: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.ml-11 { margin-left: 2.75rem; }
.p-0 { padding: 0; }
.pb-5 { padding-bottom: 1.25rem; }
.pr-8 { padding-right: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.pl-10 { padding-left: 2.5rem; }
/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.flex-grow { flex-grow: 1; }
/* Grid */
.grid { display: grid; }
.grid-flow-col { grid-auto-flow: column; }
.auto-cols-min { grid-auto-columns: min-content; }
.gap-3 { gap: .75rem; }
/* Typography */
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-ellipsis { text-overflow: ellipsis; }
/* Borders */
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 100%; }
.border { border-width: 1px; }
.border-solid { border-style: solid; }
.border-transparent { border-color: transparent; }
.outline-none { outline: none; }
/* Backgrounds & Colors */
.bg-transparent { background-color: transparent; }
.opacity-30 { opacity: .3; }
.opacity-60 { opacity: .6; }
/* Others */
.border-box { box-sizing: border-box; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.overflow-hidden { overflow: hidden; }
.select-none { user-select: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }