CSS size reduce + cleanups. (#12625)
* tooltips 1.0.1 * tooltips 1.0.1 * fixes and cleanups * whoops * aria * revert
This commit is contained in:
ludwiczakpawel
GitHub
parent
0c3ad5a1b5
commit
3b2480ed0a
17 changed files with 37 additions and 1511 deletions
|
|
@ -276,7 +276,7 @@
|
|||
--content-padding-y: var(--su-7);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
@media (min-width: $breakpoint-l) {
|
||||
--content-padding-x: var(--su-9);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,30 +133,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
.xl\:crayons-#{$name} {
|
||||
&--l {
|
||||
width: var(--su-7);
|
||||
height: var(--su-7);
|
||||
}
|
||||
|
||||
&--xl {
|
||||
width: var(--su-8);
|
||||
height: var(--su-8);
|
||||
}
|
||||
|
||||
&--2xl {
|
||||
width: var(--su-9);
|
||||
height: var(--su-9);
|
||||
}
|
||||
|
||||
&--3xl {
|
||||
width: var(--su-10);
|
||||
height: var(--su-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include avatar-logo('avatar', 100%, var(--card-color-tertiary));
|
||||
|
|
|
|||
|
|
@ -296,119 +296,35 @@
|
|||
(
|
||||
'top',
|
||||
'top',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': var(--su-1),
|
||||
'2': var(--su-2),
|
||||
'3': var(--su-3),
|
||||
'4': var(--su-4),
|
||||
'100': 100%
|
||||
),
|
||||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'-top',
|
||||
'top',
|
||||
(
|
||||
'1': calc(var(--su-1) * -1),
|
||||
'2': calc(var(--su-2) * -1),
|
||||
'3': calc(var(--su-3) * -1),
|
||||
'4': calc(var(--su-4) * -1),
|
||||
'100': -100%
|
||||
),
|
||||
(),
|
||||
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
|
||||
$spacing-units,
|
||||
true
|
||||
),
|
||||
('-top', 'top', ('100': -100%), $negative-spacing-units, true),
|
||||
(
|
||||
'bottom',
|
||||
'bottom',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': var(--su-1),
|
||||
'2': var(--su-2),
|
||||
'3': var(--su-3),
|
||||
'4': var(--su-4),
|
||||
'100': 100%
|
||||
),
|
||||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'-bottom',
|
||||
'bottom',
|
||||
(
|
||||
'1': calc(var(--su-1) * -1),
|
||||
'2': calc(var(--su-2) * -1),
|
||||
'3': calc(var(--su-3) * -1),
|
||||
'4': calc(var(--su-4) * -1),
|
||||
'100': -100%
|
||||
),
|
||||
(),
|
||||
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
|
||||
$spacing-units,
|
||||
true
|
||||
),
|
||||
('-bottom', 'bottom', ('100': -100%), $negative-spacing-units, true),
|
||||
(
|
||||
'left',
|
||||
'left',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': var(--su-1),
|
||||
'2': var(--su-2),
|
||||
'3': var(--su-3),
|
||||
'4': var(--su-4),
|
||||
'100': 100%
|
||||
),
|
||||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'-left',
|
||||
'left',
|
||||
(
|
||||
'1': calc(var(--su-1) * -1),
|
||||
'2': calc(var(--su-2) * -1),
|
||||
'3': calc(var(--su-3) * -1),
|
||||
'4': calc(var(--su-4) * -1),
|
||||
'100': -100%
|
||||
),
|
||||
(),
|
||||
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
|
||||
$spacing-units,
|
||||
true
|
||||
),
|
||||
('-left', 'left', ('100': -100%), $negative-spacing-units, true),
|
||||
(
|
||||
'right',
|
||||
'right',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': var(--su-1),
|
||||
'2': var(--su-2),
|
||||
'3': var(--su-3),
|
||||
'4': var(--su-4),
|
||||
'100': 100%
|
||||
),
|
||||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'-right',
|
||||
'right',
|
||||
(
|
||||
'1': calc(var(--su-1) * -1),
|
||||
'2': calc(var(--su-2) * -1),
|
||||
'3': calc(var(--su-3) * -1),
|
||||
'4': calc(var(--su-4) * -1),
|
||||
'100': -100%
|
||||
),
|
||||
(),
|
||||
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
|
||||
$spacing-units,
|
||||
true
|
||||
),
|
||||
('-right', 'right', ('100': -100%), $negative-spacing-units, true),
|
||||
('z', 'z-index', $z-indexes, (), false),
|
||||
(
|
||||
'overflow',
|
||||
|
|
|
|||
16
app/assets/stylesheets/config/_import.scss
vendored
16
app/assets/stylesheets/config/_import.scss
vendored
|
|
@ -25,17 +25,9 @@ $colors: (
|
|||
'base-0': var(--base-0),
|
||||
'base-inverted': var(--base-inverted),
|
||||
'accent-brand': var(--accent-brand),
|
||||
'accent-brand-darker': var(--accent-brand-darker),
|
||||
'accent-brand-lighter': var(--accent-brand-lighter),
|
||||
'accent-success': var(--accent-success),
|
||||
'accent-success-darker': var(--accent-success-darker),
|
||||
'accent-success-lighter': var(--accent-success-lighter),
|
||||
'accent-warning': var(--accent-warning),
|
||||
'accent-warning-darker': var(--accent-warning-darker),
|
||||
'accent-warning-lighter': var(--accent-warning-lighter),
|
||||
'accent-danger': var(--accent-danger),
|
||||
'accent-danger-darker': var(--accent-danger-darker),
|
||||
'accent-danger-lighter': var(--accent-danger-lighter),
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -47,13 +39,11 @@ $colors: (
|
|||
$breakpoint-s: 640px;
|
||||
$breakpoint-m: 768px;
|
||||
$breakpoint-l: 1024px;
|
||||
$breakpoint-xl: 1280px;
|
||||
|
||||
$breakpoints: (
|
||||
's': $breakpoint-s,
|
||||
'm': $breakpoint-m,
|
||||
'l': $breakpoint-l,
|
||||
'xl': $breakpoint-xl,
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -178,7 +168,7 @@ $z-indexes: (
|
|||
@each $name, $value in $values {
|
||||
.#{$prefix}#{$separator}#{$name} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
#{$property}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -188,7 +178,7 @@ $z-indexes: (
|
|||
|
||||
// initialize-generator()
|
||||
//
|
||||
// Initilize generators.
|
||||
// Initialize generators.
|
||||
//
|
||||
// @param {list} $breakpoints All our responsiveness breakpoints.
|
||||
// @param {list} $classes All the parameters required by generate-classes().
|
||||
|
|
@ -225,7 +215,7 @@ $z-indexes: (
|
|||
// @param {integer} $level Visual elevation level: 0-4
|
||||
// @param {color} $bg Background color
|
||||
// @param {color} $border Border and shadow colors
|
||||
// @param {color} $color Contnet color
|
||||
// @param {color} $color Content color
|
||||
|
||||
@mixin generate-box(
|
||||
$level: 1,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import 'config/variables';
|
||||
@import 'config/colors';
|
||||
@import 'config/generator';
|
||||
|
||||
@import 'base/reset';
|
||||
@import 'base/main';
|
||||
|
|
@ -33,3 +32,5 @@
|
|||
@import 'components/tabs';
|
||||
@import 'components/tags';
|
||||
@import 'components/tooltips';
|
||||
|
||||
@import 'config/generator';
|
||||
|
|
|
|||
|
|
@ -30,22 +30,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mod-actions-menu-btn {
|
||||
position: fixed;
|
||||
bottom: var(--su-7);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
right: var(--su-7);
|
||||
z-index: var(--z-elevate);
|
||||
cursor: pointer;
|
||||
border-radius: 50px;
|
||||
|
||||
@media (max-width: $breakpoint-m) {
|
||||
bottom: calc(var(--header-height) + var(--su-3));
|
||||
right: var(--su-3);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mod-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -130,10 +130,4 @@ class PagesController < ApplicationController
|
|||
redirect_to "/notifications"
|
||||
end
|
||||
end
|
||||
|
||||
def crayons
|
||||
@page = Page.find_by(slug: "crayons")
|
||||
render :show if @page
|
||||
set_surrogate_key_header "crayons_page"
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { addDecorator, addParameters } from '@storybook/preact';
|
|||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import '../../assets/stylesheets/minimal.scss';
|
||||
import '../../assets/stylesheets/crayons.scss';
|
||||
import '../../assets/stylesheets/views.scss';
|
||||
import '../../assets/stylesheets/crayons.scss';
|
||||
import '../../assets/javascripts/lib/xss';
|
||||
import '../../assets/javascripts/utilities/timeAgo';
|
||||
import './storybook.scss';
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@ export function initializeActionsPanel(user, path) {
|
|||
`;
|
||||
|
||||
const modActionsMenuIconHTML = `
|
||||
<button class="mod-actions-menu-btn crayons-btn crayons-btn--icon-rounded crayons-btn--s">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="54px" height="54px"
|
||||
viewBox="-8 -8 40 40" class="crayons-icon actions-menu-svg" role="img"
|
||||
aria-labelledby="d6cd43ffbad3fe639e2e95c901ee88c8">
|
||||
<button class="mod-actions-menu-btn p-4 fixed right-3 bottom-9 m:bottom-7 m:right-7 z-elevate crayons-btn crayons-btn--icon-rounded">
|
||||
<svg width="32" height="32" class="crayons-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="d6cd43ffbad3fe639e2e95c901ee88c8">
|
||||
<title id="d6cd43ffbad3fe639e2e95c901ee88c8">Moderation</title>
|
||||
<path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"></path>
|
||||
<path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div onclick="toggleEditNavigationLinkModal('<%= link[:id] %>')" class="color-accent-warning-darker cursor-pointer">
|
||||
<div onclick="toggleEditNavigationLinkModal('<%= link[:id] %>')" class="color-accent-brand cursor-pointer">
|
||||
Edit Link
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<meta name="page-cached-at" content="<%= Time.current.to_i %>">
|
||||
|
||||
<meta name="proper-stylesheet-crayons" content="<%= stylesheet_path "crayons" %>">
|
||||
<meta name="proper-stylesheet-views" content="<%= stylesheet_path "views" %>">
|
||||
<meta name="proper-stylesheet-minimal" content="<%= stylesheet_path "minimal" %>">
|
||||
<meta name="proper-stylesheet-views" content="<%= stylesheet_path "views" %>">
|
||||
<meta name="proper-stylesheet-crayons" content="<%= stylesheet_path "crayons" %>">
|
||||
|
||||
<script async>
|
||||
|
||||
|
|
@ -31,11 +31,6 @@
|
|||
var link = document.createElement("link");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = pageCrayons.content;
|
||||
docBody.appendChild(link);
|
||||
var link = document.createElement("link");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = pageViews.content;
|
||||
docBody.appendChild(link);
|
||||
var link = document.createElement("link");
|
||||
|
|
@ -43,6 +38,11 @@
|
|||
link.rel = "stylesheet";
|
||||
link.href = pageMinimal.content;
|
||||
docBody.appendChild(link);
|
||||
var link = document.createElement("link");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = pageCrayons.content;
|
||||
docBody.appendChild(link);
|
||||
|
||||
// Take a breath and then remove the old ones.
|
||||
// If we call this immediately it could cause a flash of unstyled comments.
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
// The old CSS is most likely compatible with the new stuff, so for most changes
|
||||
// It won't show a difference.
|
||||
setTimeout(function(){
|
||||
headCrayons.remove();
|
||||
headViews.remove();
|
||||
headMinimal.remove();
|
||||
headViews.remove();
|
||||
headCrayons.remove();
|
||||
}, 350)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<%= stylesheet_link_tag "crayons", media: "all", id: "#{qualifier}-crayons-stylesheet" %>
|
||||
<%= stylesheet_link_tag "views", media: "all", id: "#{qualifier}-views-stylesheet" %>
|
||||
<%= stylesheet_link_tag "minimal", media: "all", id: "#{qualifier}-minimal-stylesheet" %>
|
||||
<%= stylesheet_link_tag "views", media: "all", id: "#{qualifier}-views-stylesheet" %>
|
||||
<%= stylesheet_link_tag "crayons", media: "all", id: "#{qualifier}-crayons-stylesheet" %>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<p class="color-base-70"><em><%= json_data["badge_achievement"]["rewarding_context_message"].html_safe %></em></p>
|
||||
</div>
|
||||
|
||||
<p><a href="<%= json_data["user"]["path"] %>" class="crayons-btn w-100 m:w-50">Visit your profile</a></p>
|
||||
<p class="self-stretch"><a href="<%= json_data["user"]["path"] %>" class="crayons-btn w-100 m:w-50">Visit your profile</a></p>
|
||||
<p class="max-w-75 mx-auto">You also get <a href="/credits" class="crayons-link crayons-link--brand fw-bold">5 new credits</a> to use for <a href="/listings">community listings</a> if you have anything you'd like to promote. 🎉</p>
|
||||
<p class="fs-s"><a href="<%= about_listings_url %>" class="crayons-link crayons-link--secondary">More information about listings<a></p>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -46,7 +46,6 @@ describe('generateUtilityClassesDocumentation', () => {
|
|||
>color</a> set to <code>red</code>
|
||||
</li>
|
||||
</ul>
|
||||
${' '}
|
||||
<pre><code>{\`.color-some-utility-class {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -61,7 +60,6 @@ ${' '}
|
|||
style: {
|
||||
0: 'color',
|
||||
length: 1,
|
||||
_importants: {},
|
||||
color: 'red',
|
||||
},
|
||||
selectorText: '.color-some-utility-class',
|
||||
|
|
@ -103,7 +101,6 @@ ${' '}
|
|||
>opacity</a> set to <code>0.5</code>
|
||||
</li>
|
||||
</ul>
|
||||
${' '}
|
||||
<pre><code>{\`.color-some-utility-class {
|
||||
color: red;
|
||||
opacity: 0.5;
|
||||
|
|
@ -120,7 +117,6 @@ ${' '}
|
|||
0: 'color',
|
||||
1: 'opacity',
|
||||
length: 2,
|
||||
_importants: {},
|
||||
color: 'red',
|
||||
opacity: '0.5',
|
||||
},
|
||||
|
|
@ -138,7 +134,7 @@ ${' '}
|
|||
expect(files[filePath]).toEqual(expected);
|
||||
});
|
||||
|
||||
it('should generate a Storybook story file when CSS utility classes have !important in values', () => {
|
||||
it('should generate a Storybook story file with CSS utility classes', () => {
|
||||
const expected = ` // This is an auto-generated file. DO NOT EDIT
|
||||
import { h } from 'preact';
|
||||
import '../../crayons/storybook-utilities/designSystem.scss';
|
||||
|
|
@ -157,7 +153,6 @@ ${' '}
|
|||
>color</a> set to <code>red</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Note that <code>!important</code> is being used to override pre-design system CSS.</p>
|
||||
<pre><code>{\`.color-some-utility-class {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -172,7 +167,6 @@ ${' '}
|
|||
style: {
|
||||
0: 'color',
|
||||
length: 1,
|
||||
_importants: { color: 'important' },
|
||||
color: 'red',
|
||||
},
|
||||
selectorText: '.color-some-utility-class',
|
||||
|
|
@ -208,7 +202,6 @@ ${' '}
|
|||
>color</a> set to <code>red</code>
|
||||
</li>
|
||||
</ul>
|
||||
${' '}
|
||||
<pre><code>{\`.color-some-utility-class {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -223,7 +216,6 @@ ${' '}
|
|||
style: {
|
||||
0: 'color',
|
||||
length: 1,
|
||||
_importants: {},
|
||||
color: 'red',
|
||||
},
|
||||
selectorText: '.color-some-utility-class',
|
||||
|
|
@ -233,7 +225,6 @@ ${' '}
|
|||
style: {
|
||||
0: 'width',
|
||||
length: 1,
|
||||
_importants: {},
|
||||
},
|
||||
media: 'some-media-rule',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -95,16 +95,11 @@ function generateUtilityClassStories(cssProperty, cssRules) {
|
|||
for (const [className, cssRule] of Object.entries(cssRules)) {
|
||||
const sanitizedCssClassName = className.replace(/[.-]/g, '_');
|
||||
const propertiesAndValues = [];
|
||||
let isImportant = false;
|
||||
|
||||
for (let i = 0; i < cssRule.style.length; i++) {
|
||||
const styleProperty = cssRule.style[i];
|
||||
const value = cssRule.style[styleProperty];
|
||||
|
||||
if (!isImportant) {
|
||||
isImportant = cssRule.style._importants[styleProperty] === 'important';
|
||||
}
|
||||
|
||||
propertiesAndValues.push(`<li>
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/${styleProperty}"
|
||||
|
|
@ -120,11 +115,6 @@ function generateUtilityClassStories(cssProperty, cssRules) {
|
|||
<ul>
|
||||
${propertiesAndValues.join('')}
|
||||
</ul>
|
||||
${
|
||||
isImportant
|
||||
? '<p>Note that <code>!important</code> is being used to override pre-design system CSS.</p>'
|
||||
: ''
|
||||
}
|
||||
<pre><code>{\`${prettier.format(cssRule.cssText, {
|
||||
parser: 'css',
|
||||
})}\`}</code></pre>
|
||||
|
|
@ -203,7 +193,7 @@ async function generateDocumentation() {
|
|||
|
||||
await generateUtilityClassesDocumentation(styleSheet);
|
||||
} catch (error) {
|
||||
throw new Error('Error generating the CSS utilty class Storybook stories');
|
||||
throw new Error('Error generating the CSS utility class Storybook stories');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -435,7 +435,6 @@ Rails.application.routes.draw do
|
|||
|
||||
get "/mod" => "moderations#index", :as => :mod
|
||||
get "/mod/:tag" => "moderations#index"
|
||||
get "/page/crayons" => "pages#crayons"
|
||||
|
||||
post "/fallback_activity_recorder" => "ga_events#create"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue