yindo/posthog
1
0
Fork 0
mirror of https://github.com/BillyOutlast/posthog.git synced 2026-02-04 03:01:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

test(frontend): Add stylelint (#18627)

Browse Source 
* test(frontend): Add stylelint

* Remove ordering from the first step

* Further specify a few rules

* Fix a bunch of simple issues

* Add stylelint to pre-commit hooks and CI

* Remove orphaned package-lock.json

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `webkit` (2)

* Retain `currentColor`

* Revert media queries change, and enforce modern colors

* Add TODOs to the config

* Fix a few more colors

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Michael Matloka
2023-11-15 15:11:27 +01:00
committed by GitHub
parent 390f6c70c2
commit 74c0309735
151 changed files with 1538 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.github/workflows/ci-frontend.yml vendored
View File

@@ -50,7 +50,10 @@ jobs:
run: pnpm prettier:check
- name: Lint with ESLint
run: pnpm eslint
run: pnpm lint:js
- name: Lint with Stylelint
run: pnpm lint:css
- name: Generate logic types and run typescript with strict
run: pnpm typegen:write && pnpm typescript:check

1
.stylelintignore Normal file
View File

@@ -0,0 +1 @@
frontend/dist/

48
.stylelintrc.js Normal file
View File

@@ -0,0 +1,48 @@
module.exports = {
extends: 'stylelint-config-standard-scss', // TODO: Enable separately, as the diff will be significant
// TODO: Enable separately, as the diff will be significant "plugins": ["stylelint-order"],
rules: {
'no-descending-specificity': null,
'number-max-precision': 5,
'value-keyword-case': [
'lower',
{
// CSS Color Module Level 3 says currentColor, Level 4 candidate says currentcolor
// Sticking to Level 3 for now
camelCaseSvgKeywords: true,
},
],
// Sadly Safari only started supporting the range syntax of media queries in 2023, so let's switch to that
// ('context' value) in 2024, once support is better https://caniuse.com/?search=range%20context
'media-feature-range-notation': 'prefix',
'selector-class-pattern': [
'^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9-]+)?$',
{
message: 'Expected class selector to match Block__Element--Modifier or plain snake-case',
},
],
'selector-id-pattern': [
'^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9_-]+)?$',
{
message: 'Expected id selector to match Block__Element--Modifier or plain kebak-case',
},
],
'keyframes-name-pattern': [
'^[A-Za-z0-9_-]+__[A-Za-z0-9_-]+$',
{
message: 'Expected keyframe name to match Block__Animation',
},
],
'scss/dollar-variable-pattern': [
'^[A-Za-z_]+[A-Za-z0-9_-]+$',
{
message: 'Expected variable to match kebab-case or snake_case',
},
],
'scss/operator-no-newline-after': null, // Doesn't always play well with prettier
'scss/at-extend-no-missing-placeholder': null,
'scss/comment-no-empty': null,
// "order/order": ["dollar-variables", "custom-properties", "declarations", "rules", "at-rules"],
// "order/properties-order": ["width", "height"],
},
}

2
frontend/src/exporter/ExportedInsight/ExportedInsight.scss
View File

@@ -25,6 +25,7 @@
flex: 1;
position: relative;
z-index: 1;
.FunnelBarChart {
min-height: 50vw;
}
@@ -49,6 +50,7 @@
right: 0;
top: 0;
z-index: 2;
svg {
font-size: 0.75rem;
margin: 0.25rem;

56
frontend/src/exporter/Exporter.scss
View File

@@ -1,33 +1,5 @@
@import '../styles/mixins';
html.export-type-image {
// We don't want scrollbars to show in image captures
::-webkit-scrollbar {
display: none;
}
body {
// We put Inter first so that rendered images are the same no matter which platform it is rendered on.
font-family: 'Inter', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
}
html.export-type-embed {
overflow: hidden;
overflow-y: auto;
.Exporter {
padding: 0;
// Insights can resize to fit any height, whereas dashboards cannot
&--insight {
height: 100vh;
max-height: 100vh;
}
}
}
.Exporter {
padding: 1rem;
@@ -58,3 +30,31 @@ html.export-type-embed {
}
}
}
html.export-type-image {
// We don't want scrollbars to show in image captures
::-webkit-scrollbar {
display: none;
}
body {
// We put Inter first so that rendered images are the same no matter which platform it is rendered on.
font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
}
html.export-type-embed {
overflow: hidden;
overflow-y: auto;
.Exporter {
padding: 0;
// Insights can resize to fit any height, whereas dashboards cannot
&--insight {
height: 100vh;
max-height: 100vh;
}
}
}

4
frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
View File

@@ -5,20 +5,24 @@
padding: 0.75rem 1rem 1rem;
min-width: 0;
height: fit-content;
.main-app-content > & {
margin: 1.5rem 0;
}
h2 {
margin-bottom: 0.75rem;
color: var(--danger);
font-weight: 600;
}
pre {
margin-bottom: 0.75rem;
background: var(--border-light);
border-radius: var(--radius);
padding: 0.75rem 1rem;
}
.help-button {
margin-top: 0.75rem;
}

60
frontend/src/layout/navigation-3000/Navigation.scss
View File

@@ -22,9 +22,11 @@
position: relative;
margin: var(--scene-padding-y) var(--scene-padding-x);
min-height: calc(100vh - var(--breadcrumbs-height-full) - var(--scene-padding-y) * 2);
&.Navigation3000__scene--raw {
--scene-padding-y: 0px;
--scene-padding-x: 0px;
display: flex;
flex-direction: column;
}
@@ -69,9 +71,11 @@
.NavbarButton {
position: relative;
.LemonButton__icon {
transition: color 100ms ease, transform 100ms ease;
}
&.NavbarButton--here {
&::after {
content: '•';
@@ -84,6 +88,7 @@
line-height: 0.5625rem;
color: var(--default);
}
.LemonButton__icon {
color: var(--default);
transform: translateY(-0.25rem);
@@ -98,7 +103,9 @@
--sidebar-horizontal-padding: 0.5rem;
--sidebar-row-height: 2rem;
--sidebar-background: var(--bg-3000);
position: relative;
// This border is just for sizing, the visible border is on the content and slider
// Hidden when the sidebar is closed
border-right: min(1px, var(--sidebar-width)) solid transparent;
@@ -122,23 +129,27 @@
margin: 0;
line-height: inherit;
}
h3 {
font-weight: 600;
line-height: 2rem;
font-size: 0.75rem;
}
h4 {
font-weight: 600;
line-height: 1.75rem;
font-size: 0.6875rem;
flex-grow: 1;
}
h5 {
font-weight: 400;
font-size: 0.75rem;
text-transform: none;
letter-spacing: normal;
}
b {
font-weight: 700;
}
@@ -164,6 +175,7 @@
white-space: nowrap;
overflow: hidden;
background: var(--sidebar-background);
// Extend the border into viewport overscroll
border-right: min(1px, var(--sidebar-width)) solid var(--border);
@@ -182,8 +194,7 @@
flex-direction: column;
align-items: stretch;
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden auto;
}
.Sidebar3000__hint {
@@ -206,6 +217,7 @@
right: calc(
-1 * var(--sidebar-slider-padding) - min(1px, var(--sidebar-width))
); // Center around the original sidebar border
width: calc(2 * var(--sidebar-slider-padding) + 1px); // The interactive area is enlarged for easier interaction
cursor: col-resize;
user-select: none; // Fixes inadvertent selection of scene text when resizing
@@ -222,23 +234,28 @@
width: 1px;
pointer-events: none;
}
&::before {
transition: 100ms ease transform;
background: var(--border);
}
&::after {
transition: 100ms ease transform;
background: var(--text-3000);
opacity: 0;
}
&:hover::after,
.Sidebar3000--resizing &::after {
opacity: 0.25;
}
.Sidebar3000--resizing &::before,
.Sidebar3000--resizing &::after {
transform: scaleX(3);
}
.Sidebar3000[aria-hidden='true'] & {
cursor: e-resize;
}
@@ -260,20 +277,25 @@
--accordion-inset-expandable: 1.25rem;
--accordion-header-background: var(--accent-3000);
--accordion-inset: 0rem;
min-height: var(--accordion-row-height);
flex-shrink: 0;
flex-basis: 0;
display: flex;
flex-direction: column;
[theme='dark'] & {
--accordion-header-background: var(--bg-3000);
}
&[aria-expanded] {
// This means: if accordion is expandable
--accordion-inset: var(--accordion-inset-expandable);
}
&:not([aria-expanded='false']) {
flex-grow: 1;
&:not(:last-child) {
border-bottom-width: 1px;
}
@@ -283,10 +305,12 @@
.Accordion[aria-disabled='true'] {
.Accordion__header {
cursor: default;
&:hover {
background: var(--accordion-header-background);
}
}
&:not([aria-busy='true']) .Accordion__header .LemonIcon {
visibility: hidden;
}
@@ -302,14 +326,17 @@
border-bottom-width: 1px;
cursor: pointer;
user-select: none;
&:hover {
background: var(--border-3000);
}
> .LemonIcon {
transition: 50ms ease transform;
font-size: var(--accordion-arrow-size);
flex-shrink: 0;
margin-right: calc(var(--accordion-inset-expandable) - var(--accordion-arrow-size));
.Accordion[aria-expanded='true'] & {
transform: rotate(90deg);
}
@@ -321,6 +348,7 @@
--sidebar-list-item-fold-size: 0.5rem;
--sidebar-list-item-ribbon-width: 0.1875rem;
--sidebar-list-item-background: var(--sidebar-background);
position: relative;
color: var(--muted);
line-height: 1.125rem;
@@ -333,8 +361,10 @@
&[aria-current='page'],
&.SidebarListItem--is-renaming {
opacity: 1;
--sidebar-list-item-background: var(--border-3000);
}
&:hover,
&:focus-within,
&[aria-current='page'],
@@ -343,14 +373,17 @@
.SidebarListItem__actions {
display: flex;
}
// Accommodate menu button by moving stuff out of the way
&.SidebarListItem--has-menu:not(.SidebarListItem--extended) .SidebarListItem__link {
padding-right: calc(var(--sidebar-horizontal-padding) + 1.25rem);
}
&.SidebarListItem--has-menu.SidebarListItem--extended {
&::after {
content: '';
position: absolute;
// Position 1px away so that the :focus-visible border isn't overlaid
top: 1px;
right: 1px;
@@ -377,6 +410,7 @@
z-index: 1;
}
}
&.SidebarListItem--marker-fold {
&::before {
width: 0;
@@ -385,23 +419,29 @@
border-bottom: var(--sidebar-list-item-fold-size) solid transparent;
}
}
&.SidebarListItem--marker-ribbon {
--sidebar-list-item-marker-offset: var(--sidebar-list-item-ribbon-width);
&::before {
width: var(--sidebar-list-item-ribbon-width);
height: 100%;
background: var(--sidebar-list-item-status-color);
}
}
&.SidebarListItem--marker-status-success {
--sidebar-list-item-status-color: var(--success);
}
&.SidebarListItem--marker-status-warning {
--sidebar-list-item-status-color: var(--warning);
}
&.SidebarListItem--marker-status-danger {
--sidebar-list-item-status-color: var(--danger);
}
&.SidebarListItem--marker-status-completion {
--sidebar-list-item-status-color: var(--purple);
}
@@ -412,6 +452,7 @@
--sidebar-list-item-inset: calc(
var(--accordion-inset, 0px) + var(--sidebar-horizontal-padding) + var(--sidebar-list-item-marker-offset, 0px)
);
position: relative;
display: flex;
flex-direction: column;
@@ -419,13 +460,11 @@
width: 100%;
height: 100%;
color: inherit;
&:focus-visible::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: -1px;
right: 0;
inset: 0 0 -1px;
border: 1px solid var(--default);
pointer-events: none;
}
@@ -443,6 +482,7 @@
.SidebarListItem__rename {
// Pseudo-elements don't work on inputs, so we use a wrapper div
background: var(--bg-light);
input {
outline: none;
height: 100%;
@@ -452,15 +492,14 @@
padding: 0 calc(var(--sidebar-horizontal-padding) + 2.5rem) 0 var(--sidebar-list-item-inset);
background: none;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: -1px;
right: 0;
inset: 0 0 -1px;
border: 1px solid var(--default);
pointer-events: none;
.SidebarListItem[aria-invalid='true'] & {
border-color: var(--danger);
}
@@ -477,6 +516,7 @@
background: var(--danger);
color: #fff;
white-space: normal;
&::before {
display: block;
content: '';

5
frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
View File

@@ -1,5 +1,6 @@
.Breadcrumbs3000 {
--breadcrumbs-compaction-rate: 0;
z-index: var(--z-main-nav);
position: sticky;
top: 0;
@@ -48,6 +49,7 @@
font-weight: 700;
overflow: hidden;
height: calc(1em * 1.2 * (1 - var(--breadcrumbs-compaction-rate)));
> span {
position: absolute;
bottom: 0;
@@ -69,6 +71,7 @@
&.Breadcrumbs3000__breadcrumb--here {
cursor: default;
> span {
opacity: 1;
transform: translateY(calc(100% * (1 - var(--breadcrumbs-compaction-rate))));
@@ -77,6 +80,7 @@
&.Breadcrumbs3000__breadcrumb--actionable {
cursor: pointer;
&:hover > span,
&.Breadcrumbs3000__breadcrumb--open > span {
opacity: 1;
@@ -103,6 +107,7 @@
flex-shrink: 0;
margin: 0 0.5rem;
opacity: 0.5;
&::after {
content: '/';
}

3
frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
View File

@@ -14,15 +14,18 @@
background: var(--accent-3000);
color: var(--default);
text-transform: capitalize;
.KeyboardShortcut--muted > & {
background: none;
color: var(--muted);
}
.ant-tooltip & {
color: #fff;
background: rgba(#000, 0.333);
border-color: rgba(#fff, 0.333);
}
& + .KeyboardShortcut__key {
margin-left: 0.25rem;
}

2
frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
View File

@@ -17,7 +17,7 @@
top: 0;
right: 0;
max-width: calc(100vw - 3rem);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 30px rgb(0 0 0 / 20%);
[theme='dark'] & {
box-shadow: none;

8
frontend/src/layout/navigation/SideBar/SideBar.scss
View File

@@ -31,9 +31,11 @@
// because the sidebar does not affect the rest of the layout on mobile
transform: translateX(-15.5rem);
}
@include screen($lg) {
height: initial;
position: relative;
.SideBar--hidden & {
margin-left: -15.5rem;
}
@@ -49,6 +51,7 @@
> ul {
overflow: auto;
padding: 1rem 0.5rem;
li {
margin-top: 1px;
}
@@ -64,15 +67,15 @@
position: absolute;
height: 100%;
width: 100%;
background-color: var(--modal-backdrop-color);
backdrop-filter: blur(var(--modal-backdrop-blur));
.SideBar--hidden & {
background-color: transparent;
backdrop-filter: blur(0px);
backdrop-filter: blur(0);
pointer-events: none;
}
@include screen($lg) {
display: none;
}
@@ -87,6 +90,7 @@
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 1rem;
&:first-of-type {
margin-top: 0;
}

3
frontend/src/layout/navigation/TopBar/TopBar.scss
View File

@@ -12,6 +12,7 @@
background: var(--bg-bridge);
border-bottom: 1px solid var(--border);
gap: 1rem;
@include screen($sm) {
padding: 0.5rem 1rem;
}
@@ -63,6 +64,7 @@
.TopBar__lightning-mode-box {
background: var(--bridge) !important;
.LemonSwitch__slider {
background-color: var(--border) !important;
}
@@ -112,6 +114,7 @@
cursor: pointer;
font-size: 1.25rem;
padding: 0.125rem;
@include screen($sm) {
right: 1rem;
}

2
frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
View File

@@ -28,13 +28,13 @@
right: 0;
width: 100%;
height: calc(100vh - 3.5rem);
display: flex;
flex-direction: column;
overflow: scroll;
> div > ul {
overflow: auto;
li {
margin-top: 0.5rem;
}

0
frontend/src/lib/components/AddToDashboard/AddToDashboard.scss
View File

1
frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
View File

@@ -2,7 +2,6 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { useActions, useValues } from 'kea'
import { addToDashboardModalLogic } from 'lib/components/AddToDashboard/addToDashboardModalLogic'
import { urls } from 'scenes/urls'
import './AddToDashboard.scss'
import { IconCottage } from 'lib/lemon-ui/icons'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'

3
frontend/src/lib/components/Animation/Animation.scss
View File

@@ -1,11 +1,11 @@
.Animation {
max-width: 300px;
// A correct aspect-ratio is be passed via a style prop. This is as a fallback.
aspect-ratio: 1 / 1;
overflow: hidden;
opacity: 1;
transition: 400ms ease opacity;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -18,6 +18,7 @@
display: block;
width: 100%;
height: 100%;
svg {
display: block;
}

4
frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
View File

@@ -19,7 +19,7 @@
background: none;
transform: translate(-50%, -50%);
cursor: pointer;
-webkit-appearance: none !important;
appearance: none !important;
> .LemonBadge {
transition: transform 200ms ease; // Same as LemonBadge's transition
@@ -31,6 +31,7 @@
.AnnotationsPopover {
--annotations-popover-width: 30rem;
transition: left 200ms ease, opacity 100ms ease, transform 100ms ease;
z-index: var(--z-annotation-popover) !important;
@@ -55,6 +56,7 @@
.profile-package {
vertical-align: bottom;
}
h5 {
margin: 0;
}

9
frontend/src/lib/components/BridgePage/BridgePage.scss
View File

@@ -7,9 +7,11 @@
flex-direction: column;
flex: 1;
overflow: scroll;
&::-webkit-scrollbar {
width: 0 !important;
}
-ms-overflow-style: none;
.BridgePage__main {
@@ -83,7 +85,7 @@
font-size: 0.8em;
font-weight: 600;
&:after {
&::after {
position: absolute;
top: 100%;
left: 20px;
@@ -104,7 +106,7 @@
&.BridgePage__left__message--enter-active,
&.BridgePage__left__message--enter-done {
opacity: 1;
transform: translateY(0px) rotate(5deg) scale(1);
transform: translateY(0) rotate(5deg) scale(1);
transition: 200ms opacity, 200ms transform;
}
@@ -126,13 +128,16 @@
.BridgePage__header-logo {
&.mobile {
display: block;
@include screen($md) {
display: none;
}
}
.header-logo {
padding-bottom: 3rem;
text-align: center;
img {
height: 24px;
}

15
frontend/src/lib/components/Cards/CardMeta.scss
View File

@@ -9,19 +9,24 @@
height: 100%;
pointer-events: none;
z-index: var(--z-raised);
&.horizontal {
svg {
transform: rotate(90deg) translateX(0.75rem);
}
}
&.vertical {
flex-direction: column;
svg {
transform: translateX(0.5rem);
}
}
&.corner {
justify-content: flex-end;
svg {
transform: translate(0.5rem, 0.5rem);
}
@@ -41,11 +46,13 @@
z-index: 101; // Elevate above viz
overflow: hidden;
border-radius: var(--radius);
h5 {
color: var(--muted);
line-height: 1.5rem;
margin-bottom: 0;
}
h4 {
overflow: hidden;
text-overflow: ellipsis;
@@ -59,6 +66,7 @@
.CardMeta--with-details {
padding: 1rem;
.CardMeta__top {
// Reduced height so that, considering the padding set above, CardMeta__top doesn't have too much margin
height: 1.5rem;
@@ -71,16 +79,19 @@
.CardMeta--expansion-exit {
transition: box-shadow 200ms ease, height 200ms ease;
}
.CardMeta--expansion-exit.CardMeta--expansion-exit-active,
.CardMeta--expansion-exit-done,
.CardMeta--expansion-enter {
box-shadow: none;
}
.CardMeta--expansion-enter.CardMeta--expansion-enter-active,
.CardMeta--expansion-enter-done,
.CardMeta--expansion-exit {
box-shadow: var(--shadow-elevation);
}
.CardMeta--expansion-enter-done {
overflow: auto;
}
@@ -100,12 +111,15 @@
&.blue {
background: var(--blue);
}
&.purple {
background: var(--purple);
}
&.green {
background: var(--green);
}
&.black {
background: var(--black);
}
@@ -118,6 +132,7 @@
width: 100%;
height: fit-content;
min-height: 2rem;
> * {
max-width: 100%; // Make sure that horizontal overflow is capped, so that ellipsis on insight name works
}

19
frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
View File

@@ -8,10 +8,12 @@
border: 1px solid var(--border);
z-index: 3;
background: var(--bg-light);
&--highlighted {
border-color: var(--primary);
outline: 1px solid var(--primary);
}
.ant-alert {
margin: 1rem;
width: 100%;
@@ -29,19 +31,23 @@
min-height: 0;
width: 100%;
overflow: auto;
.LineGraph,
.AnnotationsOverlay {
padding: 1rem;
}
.insight-empty-state {
height: 100%; // Fix wonkiness when SpinnerOverlay is shown
font-size: 0.875rem; // Reduce font size
padding-top: 0;
padding-bottom: 0;
}
> :first-child {
margin-top: auto;
}
> :last-child {
margin-bottom: auto;
}
@@ -50,12 +56,15 @@
.InsightDetails {
font-size: 0.8125rem;
line-height: 1.5rem;
h5 {
margin-bottom: 0.125rem;
}
section:not(:last-child) {
margin-bottom: 0.5rem;
}
.LemonRow {
min-height: 2rem;
font-size: inherit;
@@ -67,6 +76,7 @@
padding: 0.5rem;
border-radius: var(--radius);
background: var(--side);
.LemonRow {
padding-left: 0;
padding-right: 0;
@@ -82,9 +92,11 @@
.InsightDetails__series {
margin: -0.125rem 0;
&:not(:first-child) {
margin-top: 0.5rem;
}
.LemonDivider {
width: calc(100% - 1.5rem);
margin-left: 1.5rem;
@@ -104,13 +116,16 @@
.InsightDetails__footer {
display: grid;
grid-template-columns: repeat(2, 1fr);
.profile-package {
vertical-align: middle;
}
.tz-label {
line-height: normal;
vertical-align: middle;
}
.taxonomic-breakdown-filter.tag-pill {
font-size: 0.8125rem;
padding: 0;
@@ -136,9 +151,11 @@
font-size: 0.6875rem;
font-weight: 600;
line-height: 1rem;
&.SeriesDisplay__raw-name--action,
&.SeriesDisplay__raw-name--event {
padding: 0.25rem;
&::before {
display: inline-block;
flex-shrink: 0;
@@ -153,9 +170,11 @@
font-weight: 700;
}
}
&.SeriesDisplay__raw-name--action::before {
content: 'A';
}
&.SeriesDisplay__raw-name--event::before {
content: 'E';
}

4
frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
View File

@@ -1,19 +1,23 @@
.CodeSnippet {
position: relative;
font-size: 0.875rem;
&.CodeSnippet--compact {
font-size: 0.8125rem;
.CodeSnippet__actions {
top: 0.375rem;
right: 0.375rem;
}
}
.CodeSnippet__actions {
position: absolute;
display: flex;
top: 0.25rem;
right: 0.25rem;
gap: 0.5rem;
.LemonButton .LemonIcon {
color: #fff;
}

13
frontend/src/lib/components/CommandPalette/CommandPalette.scss
View File

@@ -29,6 +29,7 @@
max-height: 80%;
width: 100%;
}
@media (max-height: 500px) {
top: 0%;
max-height: 100%;
@@ -84,6 +85,7 @@
.palette__result--focused {
background: var(--default-dark);
&::before,
&::after {
content: '';
@@ -93,24 +95,27 @@
bottom: 0;
width: 0.375rem;
}
&::before {
background: hsla(210, 10%, 19%, 1) !important;
background: hsl(210deg 10% 19% / 100%) !important;
}
&::after {
background: rgba(255, 255, 255, 0.1);
background: rgb(255 255 255 / 10%);
}
}
.palette__result--executable {
cursor: pointer;
&::after {
background: var(--primary);
}
}
.palette__scope {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background-color: rgb(255 255 255 / 10%);
color: rgb(255 255 255 / 80%);
}
.palette__icon {

4
frontend/src/lib/components/CompactList/CompactList.scss
View File

@@ -13,6 +13,7 @@
display: flex;
align-items: center;
justify-content: space-between;
h3 {
margin-bottom: 0;
font-weight: 600;
@@ -27,8 +28,7 @@
.scrollable-list {
flex: 1;
overflow-y: auto;
overflow-x: auto;
overflow: auto auto;
padding: 0 0.5rem 0.5rem;
}
}

7
frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
View File

@@ -17,13 +17,13 @@
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Firefox */
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
}
@@ -40,8 +40,6 @@
border-radius: 0.25rem;
background-color: var(--bg-light);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin-right: 0.25rem;
margin-left: 0.25rem;
line-height: 1.25rem;
@@ -56,6 +54,7 @@
margin: 0 0.25rem;
border-radius: var(--radius);
padding: 0.25rem;
&:hover {
background-color: var(--primary-highlight);
}

15
frontend/src/lib/components/DatePicker.scss
View File

@@ -7,25 +7,34 @@
color: var(--default);
background: var(--secondary-3000);
border-color: transparent;
.ant-picker-suffix {
color: var(--default);
}
}
.ant-picker-panel-container {
color: var(--default);
background: var(--bg-3000);
border: 1px solid var(--border);
* {
border-color: var(--border);
}
}
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
background: var(--primary-3000);
}
.ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(
.ant-picker-cell-range-end
):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
.ant-picker-cell:hover:not(
.ant-picker-cell-selected,
.ant-picker-cell-range-start,
.ant-picker-cell-range-end,
.ant-picker-cell-range-hover-start,
.ant-picker-cell-range-hover-end
)
.ant-picker-cell-inner,
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
background: var(--secondary-3000);

3
frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
View File

@@ -1,6 +1,6 @@
.definition-popover {
width: 20rem;
padding: 0.5rem 0.75rem 0.75rem 0.75rem;
padding: 0.5rem 0.75rem 0.75rem;
.definition-popover-header {
display: flex;
@@ -94,6 +94,7 @@
.definition-popover-timemeta-user {
display: inline-flex;
}
.definition-popover-timemeta-spacer {
margin-right: 0.5rem;
}

10
frontend/src/lib/components/EditableField/EditableField.scss
View File

@@ -2,17 +2,21 @@
display: flex;
align-items: center;
max-width: 100%;
&:not(.EditableField--multiline) {
line-height: 2rem;
}
i {
color: var(--muted);
}
.EditableField__notice {
font-size: 1.5rem;
color: var(--muted);
margin-left: 0.5rem;
}
.EditableField__highlight {
display: flex;
flex-direction: row;
@@ -25,6 +29,7 @@
white-space: pre-wrap;
overflow: auto;
}
&--editing .EditableField__highlight {
flex-grow: 1;
align-items: flex-end;
@@ -33,10 +38,12 @@
outline: 1px solid var(--border);
border-radius: var(--radius);
}
.EditableField__autosize {
align-self: center;
min-width: 0;
}
.EditableField__autosize__sizer {
position: absolute;
top: 0;
@@ -46,6 +53,7 @@
overflow: scroll;
white-space: pre;
}
.EditableField__actions {
flex-shrink: 0;
display: flex;
@@ -53,6 +61,7 @@
gap: 0.5rem;
margin-left: 0.5rem;
}
input,
textarea {
max-width: 100%;
@@ -63,6 +72,7 @@
outline: none;
padding: 0;
}
textarea {
align-self: center;
width: 100%;

1
frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
View File

@@ -8,6 +8,7 @@
.title {
text-align: center;
}
.description {
text-align: center;
}

6
frontend/src/lib/components/Fade/Fade.scss
View File

@@ -1,16 +1,18 @@
@keyframes fadeComponentFadeIn {
@keyframes Fade__fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeComponentFadeOut {
@keyframes Fade__fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}

2
frontend/src/lib/components/Fade/Fade.tsx
View File

@@ -31,7 +31,7 @@ export function Fade({
<div
className={`fade-component-container${className ? ` ${className}` : ''}`}
// eslint-disable-next-line react/forbid-dom-props
style={{ animation: `${visible ? 'fadeComponentFadeIn' : 'fadeComponentFadeOut'} 0.3s`, ...style }}
style={{ animation: `${visible ? 'Fade__fade-in' : 'Fade__fade-out'} 0.3s`, ...style }}
onAnimationEnd={onAnimationEnd}
{...props}
>

2
frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
View File

@@ -6,9 +6,11 @@
&.SelectableElement--selected {
background: var(--primary);
}
&:hover {
background: var(--primary-light);
}
&:active {
background: var(--primary-dark);
}

2
frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
View File

@@ -4,7 +4,7 @@
cursor: pointer;
margin: 0;
&:after {
&::after {
// Hack for preloading images
position: absolute;
width: 0;

2
frontend/src/lib/components/InsightLabel/InsightLabel.scss
View File

@@ -25,7 +25,7 @@
border-radius: 50%;
margin-left: 2px;
margin-right: 6px;
border: 2px solid #ffffff;
border: 2px solid #fff;
box-sizing: border-box;
}
}

2
frontend/src/lib/components/Map/Maplibre.scss
View File

@@ -11,6 +11,7 @@
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
background-color: var(--bg-3000);
[theme='dark'] & {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}
@@ -18,6 +19,7 @@
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
background-color: var(--bg-3000);
[theme='dark'] & {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}

1
frontend/src/lib/components/NotFound/NotFound.scss
View File

@@ -1,6 +1,5 @@
.NotFoundComponent {
text-align: center;
margin-top: 2rem;
margin: 6rem auto;
max-width: 600px;

2
frontend/src/lib/components/PropertiesTable/PropertiesTable.scss
View File

@@ -20,6 +20,7 @@
text-transform: uppercase;
white-space: nowrap;
cursor: default;
&:not(:first-child) {
margin-left: 0.25rem;
}
@@ -35,6 +36,7 @@
> * {
vertical-align: middle;
}
> svg {
margin-left: 0.25rem;
font-size: 1rem;

4
frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
View File

@@ -14,7 +14,7 @@
color: #c4c4c4;
font-size: 18px;
user-select: none;
padding: 0px 5px;
padding: 0 5px;
}
.logical-row-divider {
@@ -23,7 +23,7 @@
text-transform: uppercase;
align-items: flex-start;
margin-top: 0.5rem;
margin-bottom: 0px;
margin-bottom: 0;
&::before,
&::after {

2
frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
View File

@@ -29,7 +29,7 @@
background-color: inherit;
.ant-select-selection-search {
padding-left: 0px !important;
padding-left: 0 !important;
}
.ant-select-selection-placeholder {

4
frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
View File

@@ -7,12 +7,12 @@
.property-group-and-or-separator {
color: var(--primary-alt);
padding: 0.5rem 0px;
padding: 0.5rem 0;
font-size: 12px;
font-weight: 600;
position: relative;
&:before {
&::before {
position: absolute;
left: 17px;
top: 0;

2
frontend/src/lib/components/PropertyKeyInfo.scss
View File

@@ -31,8 +31,10 @@
.PropertyKeyInfo__overlay {
padding: 0.25rem;
p {
margin-bottom: 0.25rem;
&:last-child {
margin-bottom: 0;
}

13
frontend/src/lib/components/Resizer/Resizer.scss
View File

@@ -1,5 +1,6 @@
.Resizer {
--resizer-width: 8px;
position: absolute;
top: 0;
bottom: 0;
@@ -17,8 +18,8 @@
.Resizer__handle {
position: absolute;
left: calc(var(--resizer-width) / 2);
top: 0px;
bottom: 0px;
top: 0;
bottom: 0;
width: 1px;
&::before,
@@ -35,6 +36,7 @@
transition: 100ms ease transform;
background: var(--border);
}
&::after {
transition: 100ms ease transform;
background: var(--text-3000);
@@ -43,19 +45,20 @@
}
&--left {
left: 0px;
left: 0;
transform: translateX(calc(var(--resizer-width) / 2 * -1));
}
&--right {
right: 0px;
transform: translateX(calc(var(--resizer-width) / 2 * +1));
right: 0;
transform: translateX(calc(var(--resizer-width) / 2 * 1));
}
&:hover .Resizer__handle::after,
&--resizing .Resizer__handle::after {
opacity: 0.25;
}
&--resizing .Resizer__handle::before,
&--resizing .Resizer__handle::after {
transform: scaleX(3);

16
frontend/src/lib/components/SelectGradientOverflow.scss
View File

@@ -3,10 +3,12 @@
.ant-select-dropdown {
.scrollable-above::after {
@extend %mixin-gradient-overlay;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background: linear-gradient(to bottom, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
bottom: unset;
top: 0;
}
.scrollable-below::after {
@extend %mixin-gradient-overlay;
}
@@ -17,9 +19,7 @@
margin: 1px 4px 1px 0;
display: flex;
align-items: center;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
flex: 0 0 auto;
overflow: hidden;
padding: 0 4px 0 8px;
font-size: inherit;
@@ -27,17 +27,21 @@
background: #f5f5f5;
border: 1px solid #f0f0f0;
user-select: none;
.label {
overflow: hidden;
text-overflow: ellipsis;
}
.btn-close {
font-size: 10px;
margin-left: 4px;
.anticon-close {
color: rgba(0, 0, 0, 0.45);
color: rgb(0 0 0 / 45%);
& :hover {
color: rgba(0, 0, 0, 0.75);
color: rgb(0 0 0 / 75%);
}
}
}

3
frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
View File

@@ -30,6 +30,7 @@
padding-top: 10px;
padding-left: 10px;
font-weight: 600;
&.with-border {
border-top: 1px solid var(--border-light);
}
@@ -48,10 +49,12 @@
color: var(--link);
background: var(--side);
border-color: var(--side);
&.taxonomic-count-zero {
color: var(--muted);
cursor: not-allowed;
}
&.taxonomic-pill-active {
color: #fff;
background: var(--link);

7
frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
View File

@@ -2,6 +2,7 @@
--timeline-seekbar-thickness: 0.125rem;
--timeline-seekbar-arrow-width: 0.5rem;
--timeline-seekbar-arrow-height: 0.75rem;
margin: 0.75rem 0.5rem;
}
@@ -27,9 +28,11 @@
line-height: 1.25rem;
font-size: 0.75rem;
font-weight: 500;
&::selection {
background: var(--primary-light); // Default selection background is invisible on primary
}
.Spinner {
margin-right: 0.25rem;
}
@@ -48,6 +51,7 @@
top: 0;
left: calc(var(--timeline-seekbar-thickness) * 2);
width: calc(100% - var(--timeline-seekbar-arrow-width) - var(--timeline-seekbar-thickness) * 3 - 1.25rem);
.LemonBadge:not(.LemonBadge--active) {
// Connect each badge to the line rightward to signal the direction in which the badge is applicable
border-right-color: transparent;
@@ -61,6 +65,7 @@
left: calc(var(--timeline-seekbar-section-progress-current) - var(--timeline-seekbar-thickness));
width: var(--timeline-seekbar-section-progress-next);
border-left: var(--timeline-seekbar-thickness) solid var(--bg-light);
&:last-child {
width: calc(var(--timeline-seekbar-section-progress-next) + 1.25rem);
}
@@ -80,6 +85,7 @@
position: absolute;
top: calc(var(--timeline-seekbar-thickness) / 2 - 0.625rem);
height: 1.25rem;
&::before {
content: '';
display: block;
@@ -98,6 +104,7 @@
left: 100%;
width: var(--timeline-seekbar-arrow-width);
cursor: pointer;
&::before {
clip-path: polygon(0 0, 100% 50%, 0 100%);
}

2
frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
View File

@@ -4,8 +4,8 @@
max-width: 15rem;
height: 100%;
cursor: pointer;
transition: 200ms ease margin;
.ant-input-affix-wrapper,
input {
background: var(--bg-bridge);

13
frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
View File

@@ -1,58 +1,71 @@
.LemonActionableTooltip {
max-width: var(--in-app-prompts-width);
padding: 0.5rem;
> * + * {
margin-top: 0.5rem;
}
.LemonActionableTooltip__header {
display: flex;
justify-content: space-between;
> * + * {
margin-left: 0.5rem;
}
}
.LemonActionableTooltip__title {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.75rem;
}
.LemonActionableTooltip__icon {
color: var(--primary);
display: flex;
align-items: center;
width: 1.5rem;
height: 1.5rem;
> svg {
width: 100%;
height: 100%;
}
}
.LemonActionableTooltip__body {
> * + * {
margin-top: 0.5rem;
}
}
.LemonActionableTooltip__footer {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.LemonActionableTooltip__url-buttons {
display: flex;
width: 100%;
flex-direction: column;
> * + * {
margin-top: 0.25rem;
}
}
.LemonActionableTooltip__action-buttons {
display: flex;
width: 100%;
flex-direction: column;
> * + * {
margin-top: 0.25rem;
}
}
.LemonActionableTooltip__navigation {
color: var(--muted);
display: flex;

1
frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
View File

@@ -17,6 +17,7 @@
height: var(--lemon-badge-size);
font-size: var(--lemon-badge-font-size);
line-height: var(--lemon-badge-size);
// Just enough so the overall size is unaffected with a single digit (i.e. badge stays round)
padding: calc(var(--lemon-badge-size) / 8);
border-radius: calc(var(--lemon-badge-size) / 2);

25
frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
View File

@@ -1,5 +1,6 @@
.LemonButton {
--lemon-button-height: 2.5rem;
position: relative;
transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
transform 100ms ease;
@@ -20,7 +21,7 @@
font-weight: 500;
cursor: pointer;
user-select: none;
-webkit-appearance: none !important; // Important as this gets overridden by Ant styles...
appearance: none !important; // Important as this gets overridden by Ant styles...
.LemonButton__content {
flex: 1;
@@ -51,6 +52,7 @@
&.LemonButton--centered {
justify-content: center;
.LemonButton__content {
flex: initial;
text-align: center;
@@ -60,6 +62,7 @@
&.LemonButton--has-icon {
padding-left: 0.5rem;
}
&.LemonButton--has-side-icon {
padding-right: 0.5rem;
}
@@ -71,6 +74,7 @@
&.LemonButton--xsmall {
--lemon-button-height: 1.5rem;
padding: 0.125rem 0.375rem;
gap: 0.25rem;
font-size: 0.75rem;
@@ -93,6 +97,7 @@
&.LemonButton--small,
.Breadcrumbs3000 & {
--lemon-button-height: 2rem;
padding: 0.125rem 0.5rem;
gap: 0.25rem;
@@ -113,6 +118,7 @@
&.LemonButton--large {
--lemon-button-height: 3.5rem;
padding: 0.5rem 1rem;
gap: 0.75rem;
font-size: 1rem;
@@ -204,8 +210,10 @@
&.LemonButton--active {
background: var(--#{$status}-highlight, var(--primary-highlight));
}
&:not([aria-disabled='true']):active {
color: var(--#{$status}-dark, var(--primary-dark));
.LemonButton__icon {
color: var(--#{$status}-dark, var(--primary-dark));
}
@@ -219,6 +227,7 @@
&.LemonButton--primary {
color: #fff;
background: var(--#{$status});
.LemonButton__icon {
color: #fff;
}
@@ -227,13 +236,16 @@
&.LemonButton--active {
color: #fff;
background: var(--#{$status}-light, var(--#{$status}));
.LemonButton__icon {
color: #fff;
}
}
&:not([aria-disabled='true']):active {
background: var(--#{$status}-dark, var(--#{$status}));
color: #fff;
.LemonButton__icon {
color: #fff;
}
@@ -261,11 +273,13 @@
.ant-tooltip & {
// Buttons have an overriden style in tooltips, as they are always dark
&:hover {
background: rgba(255, 255, 255, 0.15) !important;
background: rgb(255 255 255 / 15%) !important;
}
&:active {
background: rgba(255, 255, 255, 0.2) !important;
background: rgb(255 255 255 / 20%) !important;
}
.LemonButton__icon {
color: #fff !important;
}
@@ -290,11 +304,13 @@
&.LemonButton--primary {
color: #fff;
background: var(--primary-3000);
&:not([aria-disabled='true']):hover,
&.LemonButton--active {
background: var(--primary-3000-hover);
color: #fff;
}
.LemonButton__icon {
color: #fff;
}
@@ -303,11 +319,13 @@
&.LemonButton--secondary {
color: var(--default);
background: var(--secondary-3000);
&:not([aria-disabled='true']):hover,
&.LemonButton--active {
background: var(--secondary-3000-hover);
color: var(--default);
}
.LemonButton__icon {
color: var(--default);
}
@@ -317,6 +335,7 @@
&.LemonButton--active {
color: var(--default);
background: var(--border);
.LemonButton__icon {
color: var(--default);
}

15
frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
View File

@@ -17,17 +17,20 @@
.LemonCalendar__month tr {
.LemonButton {
&.rounded-none {
border-radius: 0px;
border-radius: 0;
}
&.rounded-r-none {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.rounded-l-none {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.LemonCalendar__today {
position: relative;
@@ -39,7 +42,7 @@
border-radius: 100%;
width: calc(var(--lemon-calendar-today-radius) * 2);
height: calc(var(--lemon-calendar-today-radius) * 2);
background: currentcolor;
background: currentColor;
}
}
}

1
frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
View File

@@ -1,5 +1,6 @@
.LemonCard {
transition: 200ms ease;
&.LemonCard--hoverEffect {
&:hover {
transform: scale(1.01);

7
frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
View File

@@ -14,6 +14,7 @@
label {
--tick-length: 12.73; // Approximation of tick length, which is (3 + 6) * sqrt(2)
--box-color: var(--primary);
display: flex;
align-items: center;
cursor: pointer;
@@ -45,6 +46,7 @@
&.LemonCheckbox--full-width {
width: 100%;
label {
width: 100%;
}
@@ -61,7 +63,6 @@
.LemonCheckbox__box {
border-color: var(--box-color);
border-color: var(--box-color);
}
}
}
@@ -70,10 +71,6 @@
--box-color: var(--primary-dark);
}
&.LemonCheckbox--full-width label {
width: 100%;
}
&.LemonCheckbox--checked {
label {
.LemonCheckbox__box {

1
frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
View File

@@ -12,6 +12,7 @@
display: flex;
flex-direction: column;
align-items: stretch;
&:not(:last-child) {
border-bottom-width: 1px;
}

1
frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
View File

@@ -4,6 +4,7 @@
.FileDropTarget--active::after {
--file-drop-target-padding: 0.5rem;
content: '';
position: absolute;
top: calc(-1 * var(--file-drop-target-padding));

2
frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
View File

@@ -19,6 +19,7 @@
&:hover:not([aria-disabled='true']) {
border-color: var(--primary-light);
}
&.LemonInput--focused:not([aria-disabled='true']) {
border-color: var(--primary);
}
@@ -74,6 +75,7 @@
// NOTE Design: Search inputs are given a specific small width
max-width: 240px;
}
&.LemonInput--full-width {
width: 100%;
max-width: 100%;

9
frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
View File

@@ -1,28 +1,35 @@
.LemonMarkdown {
> * {
margin: 0 0 0.5em 0;
margin: 0 0 0.5em;
&:last-child {
margin-bottom: 0;
}
}
ol,
ul,
dl {
padding-left: 1.5em;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
strong[level] {
// Low-key headings
display: block;
}
hr {
margin: 1em 0;
}
h1 {
margin-bottom: 0.25em;
font-weight: 600;

19
frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
View File

@@ -1,14 +1,9 @@
.LemonModal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
transition: background-color var(--modal-transition-time) ease-out,
backdrop-filter var(--modal-transition-time) ease-out;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
@@ -24,7 +19,7 @@
&.ReactModal__Overlay--before-close {
background-color: transparent;
backdrop-filter: blur(0px);
backdrop-filter: blur(0);
}
}
@@ -62,13 +57,15 @@
transform: scale(1);
opacity: 1;
}
.LemonModal__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 1;
&.LemonModal__close--highlighted {
animation: tilt-shake 400ms;
animation: LemonModal__tilt-shake 400ms;
}
}
@@ -132,19 +129,23 @@
border-top: none;
}
@keyframes tilt-shake {
@keyframes LemonModal__tilt-shake {
0% {
transform: rotate(0deg);
}
16.666% {
transform: rotate(12deg);
}
50% {
transform: rotate(-10deg);
}
83.333% {
transform: rotate(8deg);
}
100% {
transform: rotate(0deg);
}

1
frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
View File

@@ -117,6 +117,7 @@
.LemonRow--large {
@extend .LemonRow--tall;
font-size: 1rem;
.LemonRow__icon {

14
frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
View File

@@ -5,6 +5,7 @@
background: var(--bg-light);
border-radius: var(--radius);
border: 1px solid var(--border);
> ul {
z-index: 1; // Place above slider
list-style: none;
@@ -26,14 +27,17 @@
width: calc(var(--lemon-segmented-button-slider-width) + 2px); // 1px of border (left + right)
transform: translateX(var(--lemon-segmented-button-slider-offset));
background: var(--primary);
&.LemonSegmentedButton__slider--first {
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
&.LemonSegmentedButton__slider--last {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.LemonSegmentedButton--transitioning & {
transition: width 200ms ease, transform 200ms ease, border-radius 200ms ease;
will-change: width, transform, border-radius;
@@ -43,6 +47,7 @@
.LemonSegmentedButton__option {
display: flex;
flex: 1;
.LemonButton {
// Original transition with outline added
transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
@@ -51,32 +56,39 @@
border-radius: 0;
min-height: calc(var(--lemon-button-height) - 2px);
}
&:first-child,
&:first-child .LemonButton {
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
&:last-child,
&:last-child .LemonButton {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
&:not(:last-child) {
border-right: 1px solid var(--border);
}
&:not(.LemonSegmentedButton__option--disabled):not(.LemonSegmentedButton__option--selected) {
&:not(.LemonSegmentedButton__option--disabled, .LemonSegmentedButton__option--selected) {
&:hover .LemonButton {
outline-color: var(--primary);
}
&:active .LemonButton {
outline-color: var(--primary-dark);
}
}
&.LemonSegmentedButton__option--selected {
.LemonButton,
.LemonButton__icon {
color: #fff;
}
.LemonButton {
&:hover,
&:active {

13
frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
View File

@@ -1,6 +1,7 @@
.LemonSelectMultiple {
.ant-select {
width: 100%;
.ant-select-selector,
&.ant-select-single .ant-select-selector {
min-height: 40px;
@@ -9,7 +10,6 @@
font-size: 0.875rem;
text-align: left;
line-height: 1.25rem;
border: 1px solid var(--border);
background: var(--bg-light);
@@ -27,6 +27,7 @@
box-shadow: none;
}
}
&:not(.ant-select-disabled):active {
.ant-select-selector {
color: var(--primary-active);
@@ -67,12 +68,13 @@
padding: 0.5rem;
border-radius: var(--radius);
border: 1px solid var(--primary);
margin: -4px 0px; // Counteract antd wrapper
margin: -4px 0; // Counteract antd wrapper
.ant-select-item {
padding: 0px;
padding: 0;
background: none;
padding-bottom: 0.2rem;
.ant-select-item-option-content {
height: 40px;
cursor: pointer;
@@ -91,13 +93,14 @@
background: var(--primary-bg-active);
}
}
.ant-select-item-option-state {
display: none;
}
}
.ant-select-item-empty {
padding: 0px;
padding: 0;
}
.ant-select-item-option-content {
@@ -110,6 +113,6 @@
align-items: center;
gap: 0.5rem;
height: 40px;
padding: 0px 0.25rem;
padding: 0 0.25rem;
}
}

10
frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
View File

@@ -4,12 +4,12 @@
background: linear-gradient(
90deg,
rgba(190, 190, 190, 0.2) 25%,
rgba(129, 129, 129, 0.24) 45%,
rgba(190, 190, 190, 0.2) 65%
rgb(190 190 190 / 20%) 25%,
rgb(129 129 129 / 24%) 45%,
rgb(190 190 190 / 20%) 65%
);
background-size: 400% 100%;
animation: lemon-skeleton-loading 2s ease infinite;
animation: LemonSkeleton__shimmer 2s ease infinite;
@media (prefers-reduced-motion) {
animation: none;
@@ -30,7 +30,7 @@
}
}
@keyframes lemon-skeleton-loading {
@keyframes LemonSkeleton__shimmer {
0% {
background-position: 100% 50%;
}

3
frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
View File

@@ -74,6 +74,7 @@
border-radius: 0.625rem;
background-color: var(--border);
transition: background-color 100ms ease;
.LemonSwitch--checked & {
background-color: var(--primary-highlight);
}
@@ -99,9 +100,11 @@
background-color: var(--primary);
border-color: var(--primary);
}
.LemonSwitch--active & {
transform: scale(1.1);
}
.LemonSwitch--active.LemonSwitch--checked & {
transform: translateX(1rem) scale(1.1);
}

41
frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
View File

@@ -6,12 +6,16 @@
border: 1px solid var(--border);
overflow: hidden;
flex: 1;
--row-base-height: 3rem;
--row-horizontal-padding: 1rem;
&.LemonTable--with-ribbon {
--row-ribbon-width: 0.25rem;
.LemonTable__content > table > tbody > tr > :first-child {
position: relative;
&::after {
content: '';
position: absolute;
@@ -23,52 +27,64 @@
}
}
}
&--xs {
--row-base-height: 2rem;
.LemonTable__content > table > tbody > tr > td {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
}
&--small {
--row-base-height: 2.5rem;
}
&--embedded {
border: none;
border-radius: 0;
background: none;
}
&--borderless-rows {
tr {
border: none !important;
}
}
&--stealth {
border: none;
border-radius: 0;
background: none;
.LemonTable__content > table > thead {
background: none;
border: none;
}
}
&.LemonTable--inset {
--row-horizontal-padding: 0.5rem;
}
.PaginationControl {
height: var(--row-base-height);
padding: 0.5rem;
border-top: 1px solid var(--border);
}
.row-name {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
&:not(:last-child) {
margin-bottom: 0.125rem;
}
}
.row-description {
display: inline-block;
max-width: 30rem;
@@ -80,6 +96,7 @@
width: 100%;
border-collapse: collapse;
border-spacing: 0;
> thead {
position: relative;
border-bottom: 1px solid var(--border);
@@ -87,64 +104,79 @@
font-size: 0.75rem;
letter-spacing: 0.03125rem;
text-transform: uppercase;
> tr {
> th {
font-weight: 700;
text-align: left;
}
&.LemonTable__row--grouping {
--row-base-height: 2.5rem; // Make group headers smaller for better hierarchy
}
}
}
> tbody {
> tr {
&.LemonTable__expansion {
position: relative;
background: var(--side);
> td {
// Disable padding inside the expansion for better tailored placement of contents
padding: 0 !important;
}
}
&.LemonTable__row--status-highlighted {
background: var(--primary-bg-hover);
color: var(--default);
font-weight: 600;
}
> td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
}
> thead,
> tbody {
> tr {
height: var(--row-base-height);
&:not(:first-child) {
border-top: 1px solid var(--border);
}
> th,
> td {
padding-right: var(--row-horizontal-padding);
overflow: hidden;
text-overflow: ellipsis;
&:first-child {
padding-left: calc(var(--row-horizontal-padding) + var(--row-ribbon-width, 0px));
}
&.LemonTable__boundary:not(:first-child) {
padding-left: var(--row-horizontal-padding);
}
&.LemonTable__boundary:not(:first-of-type) {
border-left: 1px solid var(--border);
}
&.LemonTable__toggle {
padding-right: 0;
}
&.LemonTable__toggle + * {
border-left: none !important;
}
&[colspan='0'] {
// Hidden cells should not affect the width of the table
padding-left: 0 !important;
@@ -170,6 +202,7 @@
opacity: 0;
pointer-events: none;
z-index: 2;
.LemonTable--loading & {
opacity: 0.5;
pointer-events: auto;
@@ -178,6 +211,7 @@
.LemonTable__header {
cursor: default;
&.LemonTable__header--actionable {
cursor: pointer;
}
@@ -203,6 +237,7 @@ body:not(.storybook-test-runner) {
left: 0;
z-index: 1;
overflow: visible !important;
// Replicate .scrollable style for sticky cells
&::before {
transition: box-shadow 200ms ease;
@@ -217,19 +252,23 @@ body:not(.storybook-test-runner) {
box-shadow: -16px 0 16px 16px transparent;
}
}
.LemonTable__cell--sticky::before {
background: var(--bg-light);
}
tr.LemonTable__row--status-highlighted .LemonTable__cell--sticky::before {
background: #e8ecff; // TRICKY: This is a one-off opaque form of --primary-bg-hover, keep in sync with source
}
.LemonTable__header--sticky::before {
background: var(--mid);
}
.scrollable--left {
.LemonTable__cell--sticky::before,
.LemonTable__header--sticky::before {
box-shadow: -16px 0 16px 16px rgba(0, 0, 0, 0.25);
box-shadow: -16px 0 16px 16px rgb(0 0 0 / 25%);
}
}
}

8
frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
View File

@@ -10,6 +10,7 @@
background: var(--primary-bg-active);
border: none !important;
overflow: hidden;
&::after {
content: '';
position: absolute;
@@ -17,24 +18,27 @@
top: 0;
width: 50%;
height: 100%;
animation: loading-bar 1.5s linear infinite;
animation: LemonTableLoader__swooping 1.5s linear infinite;
background: var(--primary);
}
&.LemonTableLoader--enter-active,
&.LemonTableLoader--enter-done {
height: 0.25rem;
}
}
@keyframes loading-bar {
@keyframes LemonTableLoader__swooping {
0% {
left: 0;
width: 33.333%;
transform: translateX(-100%);
}
50% {
width: 50%;
}
100% {
left: 100%;
width: 33.333%;

9
frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
View File

@@ -3,6 +3,7 @@
display: flex;
flex-direction: column;
align-self: stretch;
.Navigation3000__scene > &:first-child,
.Navigation3000__scene > :first-child > &:first-child {
margin-top: -0.75rem;
@@ -18,6 +19,7 @@
flex-direction: row;
align-items: stretch;
overflow-x: auto;
&::before {
// The bottom border
content: '';
@@ -28,6 +30,7 @@
width: 100%;
background: var(--border);
}
&::after {
// The active tab slider
content: '';
@@ -38,6 +41,7 @@
width: var(--lemon-tabs-slider-width);
transform: translateX(var(--lemon-tabs-slider-offset));
background: var(--link);
.LemonTabs--transitioning & {
transition: width 200ms ease, transform 200ms ease;
}
@@ -48,19 +52,24 @@
.LemonTabs--transitioning & {
transition: color 200ms ease;
}
&:not(:last-child) {
margin-right: 2rem;
}
&:hover {
color: var(--link);
}
&:active {
color: var(--primary-dark);
}
&.LemonTabs__tab--active {
color: var(--link);
text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
}
a {
// Make tab labels that are links the same colors as regular tab labels
text-decoration: none;

2
frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
View File

@@ -63,6 +63,6 @@
.LemonTag__right-button {
margin-left: 0.25rem;
min-height: 1.5rem;
padding: 0.125rem 0.125rem !important;
padding: 0.125rem !important;
}
}

2
frontend/src/lib/lemon-ui/Link/Link.scss
View File

@@ -12,10 +12,12 @@
&:hover {
color: var(--primary-light);
}
&:active {
color: var(--primary-dark);
}
}
&:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;

27
frontend/src/lib/lemon-ui/Popover/Popover.scss
View File

@@ -8,9 +8,11 @@
h5 {
margin: 0.25rem 0.5rem;
}
p:last-child {
margin-bottom: 0;
}
&[data-floating-placement^='top'] {
perspective-origin: bottom;
}
@@ -45,7 +47,9 @@
.Popover[data-placement^='bottom'] & {
transform-origin: top;
margin-top: 0.25rem;
transform: rotateX(-6deg);
}
.Popover[data-placement^='bottom'].Popover--with-arrow & {
margin-top: 0.5rem;
}
@@ -53,7 +57,9 @@
.Popover[data-placement^='top'] & {
transform-origin: bottom;
margin-bottom: 0.25rem;
transform: rotateX(6deg);
}
.Popover[data-placement^='top'].Popover--with-arrow & {
margin-bottom: 0.5rem;
}
@@ -61,7 +67,9 @@
.Popover[data-placement^='left'] & {
transform-origin: right;
margin-right: 0.25rem;
transform: rotateY(-6deg);
}
.Popover[data-placement^='left'].Popover--with-arrow & {
margin-right: 0.5rem;
}
@@ -69,27 +77,13 @@
.Popover[data-placement^='right'] & {
transform-origin: left;
margin-left: 0.25rem;
transform: rotateY(6deg);
}
.Popover[data-placement^='right'].Popover--with-arrow & {
margin-left: 0.5rem;
}
.Popover[data-placement^='bottom'] & {
transform: rotateX(-6deg);
}
.Popover[data-placement^='top'] & {
transform: rotateX(6deg);
}
.Popover[data-placement^='left'] & {
transform: rotateY(-6deg);
}
.Popover[data-placement^='right'] & {
transform: rotateY(6deg);
}
.Popover.Popover--enter-active &,
.Popover.Popover--enter-done & {
opacity: 1;
@@ -104,6 +98,7 @@
background: var(--bg-3000);
padding: 0.25rem;
}
.posthog-3000 .Popover--actionable & {
border-color: var(--border);
}

3
frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
View File

@@ -1,6 +1,7 @@
.profile-package {
display: inline-flex;
align-items: center;
&:not(:first-child) {
margin-left: 0.375rem;
}
@@ -75,9 +76,11 @@
.ProfileBubbles {
display: flex;
align-items: center;
> * {
outline: 0.125rem solid var(--bg-light);
}
> :not(:first-child) {
margin-left: -0.125rem;
}

25
frontend/src/lib/lemon-ui/Spinner/Spinner.scss
View File

@@ -4,7 +4,9 @@
width: 1em;
height: 1em;
flex-shrink: 0;
--spinner-color: var(--brand-blue);
&.Spinner--textColored {
--spinner-color: currentColor;
}
@@ -12,6 +14,7 @@
.Spinner__layer {
transform-origin: center;
> circle {
display: block;
fill: transparent;
@@ -20,23 +23,27 @@
stroke: var(--spinner-color);
stroke-linecap: round;
}
&:nth-child(1) {
opacity: 0.333;
}
&:nth-child(2) {
animation: spin 1s infinite linear;
> circle {
animation: writhe 1.5s infinite ease both;
animation: Spinner__writhe 1.5s infinite ease both;
}
}
}
@keyframes writhe {
@keyframes Spinner__writhe {
0%,
100% {
stroke-dashoffset: -60;
stroke-dasharray: 70;
}
50% {
stroke-dashoffset: -30;
stroke-dasharray: 70;
@@ -46,33 +53,31 @@
.SpinnerOverlay {
transition: opacity 0.2s ease;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
text-align: center;
min-height: 6rem;
z-index: var(--z-content-overlay);
display: flex;
align-items: center;
justify-content: center;
&[aria-hidden='true'] {
opacity: 0;
pointer-events: none;
}
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
background: var(--bg-light);
opacity: 0.5;
}
.Spinner {
position: relative;
}
.posthog-3000 &.SpinnerOverlay--scene-level::before {
background: var(--bg-3000);
}

5
frontend/src/lib/lemon-ui/Splotch/Splotch.scss
View File

@@ -8,18 +8,23 @@
width: 1rem;
height: 1rem;
border-radius: var(--radius);
.Splotch--blue & {
background: var(--blue);
}
.Splotch--purple & {
background: var(--purple);
}
.Splotch--green & {
background: var(--green);
}
.Splotch--black & {
background: var(--black);
}
.Splotch--white & {
background: #fff;
border: 1px solid var(--border);

1
frontend/src/lib/logic/newPrompt/prompt.scss
View File

@@ -5,7 +5,6 @@
z-index: 2000;
flex-direction: column;
background: white;
border: 1px solid #f0f0f0;
border-radius: 8px;
padding-top: 5px;
min-width: 300px;

2
frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
View File

@@ -3,6 +3,7 @@
width: 700px;
display: flex;
column-gap: 1rem;
@media (max-width: 960px) {
display: block;
width: auto;
@@ -15,6 +16,7 @@
.HalfColumn {
width: 50%;
@media (max-width: 960px) {
width: 100%;
}

5
frontend/src/queries/nodes/DataTable/DataTable.scss
View File

@@ -3,17 +3,18 @@
max-width: 20rem;
}
@keyframes DataTable--highlight {
@keyframes DataTable__highlight {
0% {
background-color: var(--mark);
}
100% {
background-color: initial;
}
}
.DataTable__row--highlight_once {
animation: DataTable--highlight 2000ms ease-out;
animation: DataTable__highlight 2000ms ease-out;
}
.DataTable__row--category_row {

8
frontend/src/queries/nodes/InsightViz/EditorFilters.scss
View File

@@ -35,7 +35,7 @@
&.EditorFiltersWrapper--singlecolumn {
border: none;
background: none;
padding: 0px;
padding: 0;
margin-right: 1rem;
container-type: normal;
@@ -51,7 +51,7 @@
.EditorFilters {
flex-direction: column;
gap: 0rem;
gap: 0;
.EditorFilterGroup {
width: auto;
@@ -64,12 +64,12 @@
}
&.EditorFiltersWrapper--embedded {
margin-right: 0rem;
margin-right: 0;
@include screen($xl) {
.EditorFilters {
width: 100%;
padding-right: 0rem;
padding-right: 0;
}
}
}

4
frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
View File

@@ -7,12 +7,12 @@
.property-group-and-or-separator {
color: var(--primary-alt);
padding: 0.5rem 0px;
padding: 0.5rem 0;
font-size: 12px;
font-weight: 600;
position: relative;
&:before {
&::before {
position: absolute;
left: 17px;
top: 0;

1
frontend/src/scenes/PreflightCheck/PreflightCheck.scss
View File

@@ -1,6 +1,7 @@
.Preflight {
max-width: 400px;
padding: 1rem;
.Preflight__header {
p {
margin-bottom: 0.5rem;

6
frontend/src/scenes/batch_exports/BatchExports.scss
View File

@@ -1,18 +1,20 @@
.BatchExportRunIcon--pulse {
outline: 2px solid transparent;
outline-offset: 0;
animation: pulse 2s infinite ease-out;
animation: BatchExportRunIcon__pulse 2s infinite ease-out;
}
@keyframes pulse {
@keyframes BatchExportRunIcon__pulse {
0% {
outline-offset: 0;
outline-color: var(--primary-light);
}
80% {
outline-offset: 20px;
outline-color: transparent;
}
100% {
outline-offset: 20px;
outline-color: transparent;

3
frontend/src/scenes/billing/Billing.scss
View File

@@ -1,6 +1,7 @@
.BillingPlan {
max-width: 500px;
flex-grow: 1;
.BillingPlan__description {
ol,
ul {
@@ -8,10 +9,12 @@
padding-left: 0;
list-style: none;
text-align: center;
li {
line-height: 1.2rem;
margin-bottom: 1rem;
}
.disclaimer {
font-size: 10px;
font-weight: bold;

10
frontend/src/scenes/billing/BillingGauge.scss
View File

@@ -1,5 +1,5 @@
.BillingGaugeItem {
animation: billing-gauge-item-expand 800ms cubic-bezier(0.15, 0.15, 0.2, 1) forwards;
animation: BillingGaugeItem__expand 800ms cubic-bezier(0.15, 0.15, 0.2, 1) forwards;
.BillingGaugeItem__info {
position: absolute;
@@ -9,15 +9,14 @@
margin-left: -1px;
font-size: 0.8rem;
background: var(--bg-light);
bottom: 100%;
padding: 0 0.25rem 0.5rem 0.25rem;
padding: 0 0.25rem 0.5rem;
line-height: 1rem;
&--bottom {
top: 100%;
bottom: auto;
padding: 0.5rem 0.25rem 0 0.25rem;
padding: 0.5rem 0.25rem 0;
}
&:hover {
@@ -26,10 +25,11 @@
}
}
@keyframes billing-gauge-item-expand {
@keyframes BillingGaugeItem__expand {
0% {
width: 0%;
}
100% {
width: var(--billing-gauge-item-width);
}

10
frontend/src/scenes/billing/PlanComparison.scss
View File

@@ -1,8 +1,10 @@
.PlanComparisonModal {
max-width: 900px;
}
table.PlanComparison {
table-layout: fixed;
td {
vertical-align: top;
padding: 0.75rem 1.25rem;
@@ -12,14 +14,15 @@ table.PlanComparison {
padding-bottom: 1rem;
}
}
th {
vertical-align: top;
padding: 0.75rem 1.25rem 0.75rem;
padding: 0.75rem 1.25rem;
font-weight: 600;
text-align: left;
&.PlanTable__th__section {
padding: 0.25rem 1.25rem 0.25rem;
padding: 0.25rem 1.25rem;
font-weight: 500;
}
@@ -37,6 +40,7 @@ table.PlanComparison {
}
}
}
.PlanTable__tr__border {
border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
border-bottom: 3px rgb(0 0 0 / 7%) dotted;
}

8
frontend/src/scenes/billing/PlanTable.scss
View File

@@ -1,11 +1,14 @@
.PlanTable {
max-width: 1200px;
table {
table-layout: fixed;
td {
vertical-align: top;
padding: 1.25rem;
}
th {
vertical-align: top;
padding: 1.25rem;
@@ -13,7 +16,7 @@
text-align: left;
&.PlanTable__th__section {
padding: 0.25rem 1.25rem 0.25rem;
padding: 0.25rem 1.25rem;
font-weight: 500;
}
@@ -27,7 +30,8 @@
}
}
}
.PlanTable__tr__border {
border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
border-bottom: 3px rgb(0 0 0 / 7%) dotted;
}
}

2
frontend/src/scenes/cohorts/CohortFilters/CohortField.scss
View File

@@ -47,7 +47,7 @@
background-color: inherit;
.ant-select-selection-search {
padding-left: 0px !important;
padding-left: 0 !important;
}
.ant-select-selection-placeholder {

3
frontend/src/scenes/cohorts/Cohorts.scss
View File

@@ -8,6 +8,7 @@
padding: 0.5rem 1rem;
margin-top: 1rem;
border-radius: var(--radius);
.ant-spin-spinning {
margin-right: 0.375rem;
}
@@ -35,7 +36,7 @@
.ant-upload-text {
font-weight: 600;
font-size: 1rem !important;
margin: 8px 0 0 0 !important;
margin: 8px 0 0 !important;
}
}
}

4
frontend/src/scenes/dashboard/Dashboard.scss
View File

@@ -14,11 +14,14 @@
white-space: nowrap;
display: flex;
align-items: center;
.ant-btn {
.anticon {
vertical-align: baseline;
}
margin-left: 10px;
&.button-box {
padding: 4px 8px;
}
@@ -27,6 +30,7 @@
@media (max-width: 768px) {
flex-direction: column;
.dashboard-meta {
padding-top: 1rem;
justify-content: flex-end;

14
frontend/src/scenes/dashboard/DashboardItems.scss
View File

@@ -13,13 +13,11 @@
transition: border-color 100ms ease;
}
}
.react-grid-item {
transition: all 100ms ease;
transition-property: left, top;
}
.react-grid-item.cssTransforms {
transition-property: transform;
}
.react-grid-item.resizing {
z-index: 1;
will-change: width, height;
@@ -49,10 +47,15 @@
z-index: 2;
user-select: none;
}
.react-resizable-hide > .react-resizable-handle {
display: none;
}
.react-grid-item {
transition: all 100ms ease;
transition-property: left, top;
& > .react-resizable-handle {
position: absolute;
width: 2rem;
@@ -62,15 +65,18 @@
cursor: se-resize;
z-index: 10;
}
& > .react-resizable-handle.react-resizable-handle-se {
cursor: se-resize;
}
& > .react-resizable-handle.react-resizable-handle-e {
top: 0;
bottom: 2rem;
height: auto;
cursor: ew-resize;
}
& > .react-resizable-handle.react-resizable-handle-s {
left: 0;
right: 2rem;

2
frontend/src/scenes/dashboard/EmptyDashboardComponent.scss
View File

@@ -14,7 +14,9 @@
.posthog-3000 & {
--bg-light: var(--bg-3000); // Make the fade blend in with the 3000 background smoothly
}
@extend %mixin-gradient-overlay;
width: 100%;
height: 150px;
}

3
frontend/src/scenes/dashboard/NewDashboardModal.scss
View File

@@ -2,8 +2,7 @@
.DashboardTemplateChooser {
max-width: 780px;
grid-template-columns: repeat(3, 1fr);
column-gap: 0.5em;
row-gap: 0.5em;
gap: 0.5em 0.5em;
display: grid;
}

10
frontend/src/scenes/data-management/definition/Definition.scss
View File

@@ -80,13 +80,10 @@
position: relative;
overflow: visible;
&:before {
&::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -10px;
right: -50px;
inset: -5px -50px -5px -10px;
height: 22px;
}
}
@@ -110,8 +107,9 @@
.definition-matching-events-header {
font-weight: 600;
}
.definition-matching-events-subtext {
margin: 0 0 1rem 0;
margin: 0 0 1rem;
}
}
}

8
frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
View File

@@ -42,13 +42,10 @@
position: relative;
overflow: visible;
&:before {
&::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -10px;
right: -50px;
inset: -5px -50px -5px -10px;
height: 22px;
}
}
@@ -81,6 +78,7 @@
.LemonTable__expansion {
.event-properties-wrapper {
padding: 1rem 0 1rem 1rem;
.event-properties-header {
font-weight: 600;
}

3
frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
View File

@@ -35,11 +35,10 @@
font-weight: 600;
cursor: pointer;
&:before {
&::before {
content: '';
position: absolute;
top: -5px;
//bottom: -5px;
left: -10px;
right: -50px;
height: 22px;

2
frontend/src/scenes/events/EventDetails.scss
View File

@@ -1,3 +1,3 @@
.LemonTabs[data-attr='event-details'] ul {
padding: 0px 0.75rem;
padding: 0 0.75rem;
}

16
frontend/src/scenes/experiments/Experiment.scss
View File

@@ -2,7 +2,6 @@
.metrics-selection {
border-top: 1px solid var(--border);
padding-top: 1rem;
width: 100%;
}
@@ -75,6 +74,7 @@
.variants {
margin-top: 0.5rem;
padding-bottom: 1rem;
.ant-form-horizontal {
min-height: 32px;
}
@@ -92,7 +92,7 @@
.feature-flag-variant {
display: flex;
align-items: center;
padding: 0.5rem 0.5rem;
padding: 0.5rem;
background: var(--bg-light);
border-width: 1px;
border-color: var(--border);
@@ -111,7 +111,7 @@
justify-content: center;
align-items: center;
border-radius: 4px;
color: #ffffff;
color: #fff;
min-width: 52px;
padding: 2px 6px;
margin-right: 8px;
@@ -151,6 +151,7 @@
.participants {
background-color: white;
.ant-collapse-header {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -162,10 +163,12 @@
li {
display: inline;
}
li:after {
li::after {
content: ', ';
}
li:last-child:after {
li:last-child::after {
content: '';
}
}
@@ -209,9 +212,7 @@
min-height: 320px;
font-size: 24px;
}
}
.view-experiment {
.computation-time-and-sampling-notice {
margin-top: 8px;
}
@@ -231,6 +232,7 @@
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 1rem;
&:last-child {
border-bottom: none;
padding-bottom: 0;

3
frontend/src/scenes/feature-flags/FeatureFlag.scss
View File

@@ -23,9 +23,8 @@
.feature-flag-property-display {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;

4
frontend/src/scenes/feature-flags/JSONEditorInput.scss
View File

@@ -1,14 +1,18 @@
.JsonEditorInput {
position: relative;
.border {
border-radius: var(--radius);
.monaco-editor {
border-radius: inherit;
.overflow-guard {
border-radius: inherit;
}
}
}
.placeholder {
position: absolute;
top: 0;

2
frontend/src/scenes/feedback/Feedback.scss
View File

@@ -1,2 +0,0 @@
.Feedback {
}

3
frontend/src/scenes/feedback/Feedback.tsx
View File

@@ -1,10 +1,7 @@
import { LemonTag } from '@posthog/lemon-ui'
import { PageHeader } from 'lib/components/PageHeader'
import { SceneExport } from 'scenes/sceneTypes'
import { feedbackLogic } from './feedbackLogic'
import './Feedback.scss'
import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
import { InAppFeedback, InAppFeedbackHeaderButtons } from './InAppFeedback'
import { UserInterviewScheduler, UserInterviewSchedulerHeaderButtons } from './UserInterviewScheduler'

3
frontend/src/scenes/feedback/InAppFeedback.tsx
View File

@@ -1,11 +1,8 @@
import { LemonButton, LemonCollapse, LemonDivider, LemonModal, Link } from '@posthog/lemon-ui'
import { urls } from '@posthog/apps-common'
import { useActions, useValues } from 'kea'
import { inAppFeedbackLogic } from './inAppFeedbackLogic'
import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import './Feedback.scss'
import { IconHelpOutline } from 'lib/lemon-ui/icons'
import { Query } from '~/queries/Query/Query'

31
frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
View File

@@ -5,26 +5,33 @@
width: 100%;
height: 26rem;
overflow: hidden;
.InsightCard & {
height: 100%;
table {
margin: 0.5rem 0 0;
}
}
table {
--bar-width: 0.5rem; // This should be overriden from React
--bar-row-height: 18rem;
margin: 0.5rem 1rem 0;
width: 100%;
> tbody {
> tr {
&:first-child {
border-bottom: 1px solid var(--border);
> td {
padding: 1.5rem 0;
padding-top: 1rem;
}
}
> td {
// Sneaky hack to make height: 100% work in .StepLegend. The wonders of CSS - there's NO other way!
height: 1px;
@@ -49,6 +56,7 @@
.StepBarLabels__segment {
flex-grow: 1;
padding: 0 0.5rem;
&:first-child {
flex-grow: 0;
height: 0;
@@ -69,6 +77,7 @@
border-bottom: 1px solid var(--border);
height: calc(var(--bar-row-height) - 3rem);
padding: 0 1rem;
&:not(.StepBars--first) {
border-left: 1px dashed var(--border);
}
@@ -87,6 +96,7 @@
.StepBars__gridline {
flex-grow: 1;
&.StepBars__gridline--horizontal {
border-top: 1px dashed var(--border);
}
@@ -95,14 +105,17 @@
.StepBar {
--series-color: #000; // This should be overriden from React
--conversion-rate: 100%; // This should be overriden from React
position: relative;
border-radius: var(--radius);
width: calc(var(--bar-width) / 2); // We need to conserve space in narrow viewports
flex-shrink: 0;
height: 100%;
@include screen($lg) {
width: var(--bar-width);
}
.InsightCard & {
width: calc(var(--bar-width) / 2) !important; // Also need to conserve space in cards
}
@@ -116,10 +129,12 @@
width: 100%;
border-radius: var(--radius);
cursor: pointer;
.InsightCard & {
cursor: default;
}
}
.StepBar__unclickable {
.StepBar__backdrop,
.StepBar__fill {
@@ -134,14 +149,16 @@
-22.5deg,
transparent,
transparent 0.5rem,
rgba(255, 255, 255, 0.5) 0.5rem,
rgba(255, 255, 255, 0.5) 1rem
rgb(255 255 255 / 50%) 0.5rem,
rgb(255 255 255 / 50%) 1rem
),
var(--series-color);
opacity: 0.125;
&:hover {
opacity: 0.2;
}
&:active {
opacity: 0.25;
}
@@ -151,9 +168,11 @@
transition: filter 200ms ease;
background: var(--series-color);
height: var(--conversion-rate);
&:hover {
filter: brightness(0.9);
}
&:active {
filter: brightness(0.85);
}
@@ -163,17 +182,20 @@
border-left: 1px solid var(--border);
white-space: nowrap;
height: 100%;
> .LemonRow {
min-height: 1.5rem;
padding: 0 0.5rem;
font-weight: 500;
margin-top: 0.25rem;
&:first-child {
width: fit-content;
font-weight: 600;
margin-top: 0;
}
}
.funnel-inspect-button {
line-height: 1.5rem;
font-weight: inherit;
@@ -182,23 +204,28 @@
.FunnelTooltip {
width: 20rem;
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
tr {
height: 1.75rem;
}
td:first-child {
padding: 0 0.5rem;
font-weight: 500;
}
td:last-child {
padding-right: 0.5rem;
font-weight: 600;
text-align: right;
}
.table-subtext {
padding-bottom: 0.25rem;
}

3
frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
View File

@@ -18,6 +18,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
.funnel-step {
position: relative;
padding-left: $series_container_width + 0.5rem;
&:not(:first-child) {
&,
.funnel-series-container {
@@ -36,6 +37,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
.funnel-inspect-button {
line-height: 1.5rem;
.value-inspector-button-icon {
font-size: 1.5rem;
margin-right: 0.25rem;
@@ -99,6 +101,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
.funnel-step-title {
@extend %mixin-text-ellipsis;
font-weight: bold;
}

6
frontend/src/scenes/ingestion/panels/InstructionsPanel.scss
View File

@@ -1,11 +1,13 @@
.InstructionsPanel {
max-width: 50rem;
h1 {
font-size: 28px;
font-weight: 800;
line-height: 40px;
letter-spacing: -0.02em;
}
h2 {
font-size: 20px;
font-weight: 800;
@@ -13,13 +15,15 @@
letter-spacing: -0.02em;
margin-top: 0.5rem;
}
h3 {
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0em;
letter-spacing: 0;
margin-top: 0.5rem;
}
ol {
padding-left: 1rem;
}

Some files were not shown because too many files have changed in this diff Show More