mirror of https://github.com/zulip/zulip.git
styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
Tim Abbott
parent
7492656b92
commit
a3d26d701e
|
|
@ -7,7 +7,7 @@ indent_style = space
|
|||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.{sh,py,pyi,xml,css,scss,hbs,html}]
|
||||
[*.{sh,py,pyi,xml,css,hbs,html}]
|
||||
indent_size = 4
|
||||
|
||||
[{*.{js,json,ts},check-openapi}]
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ The Zulip application's CSS can be found in the `static/styles/`
|
|||
directory. Zulip uses [Bootstrap](https://getbootstrap.com/) as its
|
||||
main third-party CSS library.
|
||||
|
||||
Zulip uses SCSS for its CSS files. There are two high-level sections
|
||||
Zulip uses PostCSS for its CSS files. There are two high-level sections
|
||||
of CSS: the "portico" (logged-out pages like /help/, /login/, etc.),
|
||||
and the app. The portico CSS lives under the `static/styles/portico`
|
||||
subdirectory.
|
||||
|
|
@ -148,9 +148,9 @@ relevant background as well.
|
|||
|
||||
Zulip's frontend is primarily JavaScript in the `static/js` directory;
|
||||
we are working on migrating these to TypeScript modules. Stylesheets
|
||||
are written in the Sass extension of CSS (with the scss syntax), they
|
||||
are written in CSS extended by various PostCSS plugins; they
|
||||
are converted from plain CSS, and we have yet to take full advantage of
|
||||
the features Sass offers. We use Webpack to transpile and build JS
|
||||
the features PostCSS offers. We use Webpack to transpile and build JS
|
||||
and CSS bundles that the browser can understand, one for each entry
|
||||
points specified in `tools/webpack.assets.json`; source maps are
|
||||
generated in the process for better debugging experience.
|
||||
|
|
@ -169,7 +169,7 @@ by comparing the `render_entrypoint` calls in the HTML templates under
|
|||
|
||||
### Adding static files
|
||||
|
||||
To add a static file to the app (JavaScript, TypeScript, CSS/Sass, images, etc),
|
||||
To add a static file to the app (JavaScript, TypeScript, CSS, images, etc),
|
||||
first add it to the appropriate place under `static/`.
|
||||
|
||||
- Third-party packages from the NPM repository should be added to
|
||||
|
|
@ -188,7 +188,7 @@ first add it to the appropriate place under `static/`.
|
|||
to eliminate patched third-party code from the project.
|
||||
- Our own JavaScript and TypeScript files live under `static/js`. Ideally,
|
||||
new modules should be written in TypeScript (details on this policy below).
|
||||
- CSS/Sass files lives under `static/styles`.
|
||||
- CSS files live under `static/styles`.
|
||||
- Portico JavaScript ("portico" means for logged-out pages) lives under
|
||||
`static/js/portico`.
|
||||
- Custom SVG graphics living under `static/assets/icons` are compiled into
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
"postcss-extend-rule": "^3.0.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-nested": "^4.1.2",
|
||||
"postcss-scss": "^2.0.0",
|
||||
"postcss-simple-vars": "^5.0.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"script-loader": "^0.7.2",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"use strict";
|
||||
|
||||
module.exports = ({file}) => ({
|
||||
parser: file.extname === ".scss" ? "postcss-scss" : false,
|
||||
module.exports = {
|
||||
plugins: {
|
||||
// Warning: despite appearances, order is significant
|
||||
"postcss-nested": {},
|
||||
|
|
@ -10,4 +9,4 @@ module.exports = ({file}) => ({
|
|||
"postcss-calc": {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -202,31 +202,31 @@ import "spectrum-colorpicker/spectrum.css";
|
|||
import "katex/dist/katex.css";
|
||||
import "flatpickr/dist/flatpickr.css";
|
||||
import "flatpickr/dist/plugins/confirmDate/confirmDate.css";
|
||||
import "../../styles/components.scss";
|
||||
import "../../styles/app_components.scss";
|
||||
import "../../styles/rendered_markdown.scss";
|
||||
import "../../styles/zulip.scss";
|
||||
import "../../styles/alerts.scss";
|
||||
import "../../styles/settings.scss";
|
||||
import "../../styles/image_upload_widget.scss";
|
||||
import "../../styles/subscriptions.scss";
|
||||
import "../../styles/drafts.scss";
|
||||
import "../../styles/input_pill.scss";
|
||||
import "../../styles/informational-overlays.scss";
|
||||
import "../../styles/compose.scss";
|
||||
import "../../styles/message_edit_history.scss";
|
||||
import "../../styles/reactions.scss";
|
||||
import "../../styles/user_circles.scss";
|
||||
import "../../styles/left-sidebar.scss";
|
||||
import "../../styles/right-sidebar.scss";
|
||||
import "../../styles/lightbox.scss";
|
||||
import "../../styles/popovers.scss";
|
||||
import "../../styles/recent_topics.scss";
|
||||
import "../../styles/typing_notifications.scss";
|
||||
import "../../styles/hotspots.scss";
|
||||
import "../../styles/night_mode.scss";
|
||||
import "../../styles/user_status.scss";
|
||||
import "../../styles/widgets.scss";
|
||||
import "../../styles/components.css";
|
||||
import "../../styles/app_components.css";
|
||||
import "../../styles/rendered_markdown.css";
|
||||
import "../../styles/zulip.css";
|
||||
import "../../styles/alerts.css";
|
||||
import "../../styles/settings.css";
|
||||
import "../../styles/image_upload_widget.css";
|
||||
import "../../styles/subscriptions.css";
|
||||
import "../../styles/drafts.css";
|
||||
import "../../styles/input_pill.css";
|
||||
import "../../styles/informational-overlays.css";
|
||||
import "../../styles/compose.css";
|
||||
import "../../styles/message_edit_history.css";
|
||||
import "../../styles/reactions.css";
|
||||
import "../../styles/user_circles.css";
|
||||
import "../../styles/left-sidebar.css";
|
||||
import "../../styles/right-sidebar.css";
|
||||
import "../../styles/lightbox.css";
|
||||
import "../../styles/popovers.css";
|
||||
import "../../styles/recent_topics.css";
|
||||
import "../../styles/typing_notifications.css";
|
||||
import "../../styles/hotspots.css";
|
||||
import "../../styles/night_mode.css";
|
||||
import "../../styles/user_status.css";
|
||||
import "../../styles/widgets.css";
|
||||
|
||||
// This should be last.
|
||||
import "../ready";
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@ import "simplebar/dist/simplebar.css";
|
|||
import "font-awesome/css/font-awesome.css";
|
||||
import "../../assets/icons/zulip-icons.font";
|
||||
import "source-sans-pro/source-sans-pro.css";
|
||||
import "../../styles/pygments.scss";
|
||||
import "../../styles/pygments.css";
|
||||
import "@uppy/core/dist/style.css";
|
||||
import "@uppy/progress-bar/dist/style.css";
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@ import "./common";
|
|||
import "../i18n";
|
||||
import "../portico/header";
|
||||
import "../portico/google-analytics";
|
||||
import "../../styles/portico/portico-styles.scss";
|
||||
import "../../styles/portico/portico-styles.css";
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ exports.is_narrow = function () {
|
|||
// This basically returns true when we hide the right sidebar for
|
||||
// the left_side_userlist skinny mode. It would be nice to have a less brittle
|
||||
// test for this. See the "@media (max-width: 1165px)" section in
|
||||
// media.scss.
|
||||
// media.css.
|
||||
return window.innerWidth <= 1165;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ exports.recent_topics_open = function () {
|
|||
// To address bugs where mouse might apply to the streams/settings
|
||||
// overlays underneath an open modal within those settings UI, we add
|
||||
// this inline style to '.overlay.show', overriding the
|
||||
// "pointer-events: all" style in app_components.scss.
|
||||
// "pointer-events: all" style in app_components.css.
|
||||
//
|
||||
// This is kinda hacky; it only works for modals within overlays, and
|
||||
// we need to make sure it gets re-enabled when the modal closes.
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
|
||||
#compose-container {
|
||||
width: 100%;
|
||||
// This should match the value for .app-main
|
||||
/* This should match the value for .app-main */
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* SCSS related to settings page user avatar upload widget only */
|
||||
/* CSS related to settings page user avatar upload widget only */
|
||||
#user-avatar-upload-widget {
|
||||
.image_upload_button {
|
||||
border-radius: 5px;
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* SCSS related to settings page realm icon upload widget only */
|
||||
/* CSS related to settings page realm icon upload widget only */
|
||||
#realm-icon-upload-widget {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/* SCSS related to settings page realm day/night logo upload widget only */
|
||||
/* CSS related to settings page realm day/night logo upload widget only */
|
||||
#realm-day-logo-upload-widget,
|
||||
#realm-night-logo-upload-widget {
|
||||
width: 220px;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
display: table;
|
||||
|
||||
td.definition {
|
||||
// keeps dividing line at same width for all tables in model.
|
||||
/* keeps dividing line at same width for all tables in model. */
|
||||
width: calc(50% - 11px);
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
th {
|
||||
width: 245px;
|
||||
text-align: center;
|
||||
// aligns table name with dividing line
|
||||
/* aligns table name with dividing line */
|
||||
}
|
||||
|
||||
td:not(.definition) {
|
||||
|
|
@ -492,7 +492,7 @@ on a dark background, and don't change the dark labels dark either. */
|
|||
}
|
||||
|
||||
#invite_user_form .modal-footer {
|
||||
// no transparency prevents overlap issues
|
||||
/* no transparency prevents overlap issues */
|
||||
background-color: hsl(211, 28%, 14%);
|
||||
}
|
||||
|
||||
|
|
@ -297,7 +297,7 @@
|
|||
}
|
||||
|
||||
code {
|
||||
/* Copied from rendered_markdown.scss */
|
||||
/* Copied from rendered_markdown.css */
|
||||
font-size: 0.857em;
|
||||
unicode-bidi: embed;
|
||||
direction: ltr;
|
||||
|
|
@ -686,7 +686,7 @@ button.login-social-button {
|
|||
|
||||
button#login_auth_button_gitlab,
|
||||
button#register_auth_button_gitlab {
|
||||
// GitLab icon size looks a bit inconsistent with others. This fixes it.
|
||||
/* GitLab icon size looks a bit inconsistent with others. This fixes it. */
|
||||
background-size: auto 90%;
|
||||
background-position-x: 3px;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import "../components.css";
|
||||
@import "portico.css";
|
||||
@import "portico-signin.css";
|
||||
@import "markdown.css";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "../components.scss";
|
||||
@import "portico.scss";
|
||||
@import "portico-signin.scss";
|
||||
@import "markdown.scss";
|
||||
|
|
@ -255,7 +255,7 @@ html {
|
|||
margin-left: -40px;
|
||||
padding-left: 40px;
|
||||
|
||||
// Don't show the focus outline for the highlighted page.
|
||||
/* Don't show the focus outline for the highlighted page. */
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
.table_fix_head table {
|
||||
// To keep border properties to the thead th.
|
||||
/* To keep border properties to the thead th. */
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
|
||||
.clear_search_button {
|
||||
// Overrides app_components.scss property.
|
||||
/* Overrides app_components.css property. */
|
||||
padding-top: 6px !important;
|
||||
}
|
||||
|
||||
|
|
@ -284,9 +284,9 @@
|
|||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
// Hide participants and last message time
|
||||
// on smaller screens. This ensures user always
|
||||
// has a nice UI experience.
|
||||
/* Hide participants and last message time
|
||||
on smaller screens. This ensures user always
|
||||
has a nice UI experience. */
|
||||
.recent_topic_users,
|
||||
.recent_topic_timestamp,
|
||||
thead .participants_header,
|
||||
|
|
@ -293,7 +293,7 @@ td .button {
|
|||
}
|
||||
}
|
||||
|
||||
// Force the actions column to use the minimum space necessary
|
||||
/* Force the actions column to use the minimum space necessary */
|
||||
.actions {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1565,7 +1565,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
margin: 0 5px;
|
||||
|
||||
&.dropdown_list_reset_button {
|
||||
// Prevent night mode from overriding background.
|
||||
/* Prevent night mode from overriding background. */
|
||||
background: unset !important;
|
||||
border: none;
|
||||
|
||||
|
|
@ -1583,7 +1583,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: -7px; // -(margin+padding), both are set by bootstrap.
|
||||
top: -7px; /* -(margin+padding), both are set by bootstrap. */
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1757,11 +1757,11 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
}
|
||||
}
|
||||
|
||||
// This value needs to match with the same in subscriptions.scss, as
|
||||
// we have some shared styles declared there
|
||||
/* This value needs to match with the same in subscriptions.css, as
|
||||
we have some shared styles declared there */
|
||||
@media (max-width: 750px) {
|
||||
#settings_overlay_container {
|
||||
// this variable allows JavaScript to detect this media query
|
||||
/* this variable allows JavaScript to detect this media query */
|
||||
--single-column: yes;
|
||||
}
|
||||
|
||||
|
|
@ -1770,7 +1770,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
display: block;
|
||||
|
||||
&:not(.slide-left) .section {
|
||||
// When viewing the settings list we hide the active section.
|
||||
/* When viewing the settings list we hide the active section. */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1796,7 +1796,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
height: 100%;
|
||||
|
||||
li.active {
|
||||
// Don't highlight the active section in the settings list.
|
||||
/* Don't highlight the active section in the settings list. */
|
||||
background: inherit;
|
||||
border-bottom: 1px solid hsl(0, 0%, 93%);
|
||||
}
|
||||
|
|
@ -1856,8 +1856,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
|
|||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
// selects the label (inline-block)
|
||||
// immediately following the checkbox
|
||||
/* selects the label (inline-block)
|
||||
immediately following the checkbox */
|
||||
.settings-box .checkbox + .inline-block {
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
|
@ -1113,11 +1113,11 @@ ul.grey-box {
|
|||
}
|
||||
}
|
||||
|
||||
// Note that this block has settings_page CSS as well, and thus needs
|
||||
// to match the media queries in settings.scss.
|
||||
//
|
||||
// Longer-term we should extract this logic two-column-overlay class
|
||||
// to read more naturally.
|
||||
/* Note that this block has settings_page CSS as well, and thus needs
|
||||
to match the media queries in settings.css.
|
||||
|
||||
Longer-term we should extract this logic two-column-overlay class
|
||||
to read more naturally. */
|
||||
@media (max-width: 750px) {
|
||||
.subscriptions-container {
|
||||
position: relative;
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
&::after {
|
||||
content: "";
|
||||
background: hsl(0, 0%, 50%);
|
||||
height: 1.5px; // 1px is too thin, 2px is too thick
|
||||
height: 1.5px; /* 1px is too thin, 2px is too thick */
|
||||
width: 6px;
|
||||
display: block;
|
||||
margin: 3.25px auto 0 auto; // (total height - line height) / 2 = 3.25px
|
||||
margin: 3.25px auto 0 auto; /* (total height - line height) / 2 = 3.25px */
|
||||
}
|
||||
}
|
||||
|
|
@ -299,16 +299,16 @@ p.n-margin {
|
|||
.app-main,
|
||||
.header-main {
|
||||
width: 100%;
|
||||
// TODO: This 1400px is wrong, but it's hard to do better. On
|
||||
// browsers with a nonzero default scrollbar width (i.e. not
|
||||
// macOS), we actually want a max-width of 1400px+the width of the
|
||||
// scrollbar, which is done as an override in
|
||||
// static/js/scroll_bar.js.
|
||||
//
|
||||
// And with the fluid_layout_width setting, we don't want a
|
||||
// max-width at all. The consequence is that if you reload a
|
||||
// Zulip window, there's a brief flash where the content is
|
||||
// misplaced before the JS code can fix it.
|
||||
/* TODO: This 1400px is wrong, but it's hard to do better. On
|
||||
browsers with a nonzero default scrollbar width (i.e. not
|
||||
macOS), we actually want a max-width of 1400px+the width of the
|
||||
scrollbar, which is done as an override in
|
||||
static/js/scroll_bar.js.
|
||||
|
||||
And with the fluid_layout_width setting, we don't want a
|
||||
max-width at all. The consequence is that if you reload a
|
||||
Zulip window, there's a brief flash where the content is
|
||||
misplaced before the JS code can fix it. */
|
||||
max-width: 1400px;
|
||||
min-width: 950px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -389,7 +389,7 @@ label {
|
|||
/* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
|
||||
a:not(:active):focus {
|
||||
outline: 2px solid hsl(215, 47%, 50%);
|
||||
// TODO: change solid to auto once the Chromium bug #1105822 is fixed
|
||||
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
|
||||
}
|
||||
|
||||
/* List of text-like input types taken from Bootstrap */
|
||||
|
|
@ -551,10 +551,10 @@ strong {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
// .dropdown-menu from v2.3.2
|
||||
// + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
|
||||
// basic idea of this fix is to remove decorations from :hover and apply them only
|
||||
// on :focus.
|
||||
/* .dropdown-menu from v2.3.2
|
||||
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
|
||||
basic idea of this fix is to remove decorations from :hover and apply them only
|
||||
on :focus. */
|
||||
.typeahead-menu {
|
||||
li {
|
||||
a {
|
||||
|
|
@ -757,11 +757,11 @@ td.pointer {
|
|||
height: 22px;
|
||||
z-index: 1;
|
||||
|
||||
// This is a bit tricky; we need to reserve space for the message
|
||||
// controls even when the message isn't hovered, so that hover
|
||||
// doesn't disturb the layout. Usually that would be just
|
||||
// visibility: hidden, but that cannot be animated, so we set
|
||||
// opacity as well, which can be animated.
|
||||
/* This is a bit tricky; we need to reserve space for the message
|
||||
controls even when the message isn't hovered, so that hover
|
||||
doesn't disturb the layout. Usually that would be just
|
||||
visibility: hidden, but that cannot be animated, so we set
|
||||
opacity as well, which can be animated. */
|
||||
> div {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -811,7 +811,7 @@ td.pointer {
|
|||
&:not(.empty-star) {
|
||||
color: hsl(106, 77%, 29%);
|
||||
|
||||
// Opacity/visibility as though the message is hovered.
|
||||
/* Opacity/visibility as though the message is hovered. */
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
|
@ -1565,7 +1565,7 @@ div.focused_table {
|
|||
padding: 12px 6px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 7px 3.5px; // based on having ~41.66% decrease
|
||||
padding: 7px 3.5px; /* based on having ~41.66% decrease */
|
||||
}
|
||||
i {
|
||||
margin-right: 3px;
|
||||
|
|
@ -1578,7 +1578,7 @@ div.focused_table {
|
|||
}
|
||||
.fa-hashtag {
|
||||
font-size: 1.2rem;
|
||||
// font-weight: 800;
|
||||
/* font-weight: 800; */
|
||||
margin: 0 2px 0 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1589,7 +1589,7 @@ div.focused_table {
|
|||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
// The first ~3px of padding here overlaps with the left padding from sub_count for some reason.
|
||||
/* The first ~3px of padding here overlaps with the left padding from sub_count for some reason. */
|
||||
padding-right: calc(3px + 10px);
|
||||
}
|
||||
|
||||
|
|
@ -1627,8 +1627,8 @@ div.focused_table {
|
|||
&::before {
|
||||
left: -3px;
|
||||
@media (max-width: 500px) {
|
||||
// this ensures the before "|" doesn't overlap
|
||||
// with the stream name text on small narrows
|
||||
/* this ensures the before "|" doesn't overlap
|
||||
with the stream name text on small narrows */
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1639,12 +1639,12 @@ div.focused_table {
|
|||
}
|
||||
|
||||
.narrow_description {
|
||||
// the actual value of flex shrink does not matter, it is the
|
||||
// ratio of this value to other flex items that determines the
|
||||
// behavior while shrinking, here the other item has the .stream
|
||||
// class and a flex of 1, so the value here *is* the ratio, and
|
||||
// is chosen such that the narrow description shrinks to close
|
||||
// before the stream name must begin to shrink
|
||||
/* the actual value of flex shrink does not matter, it is the
|
||||
ratio of this value to other flex items that determines the
|
||||
behavior while shrinking, here the other item has the .stream
|
||||
class and a flex of 1, so the value here *is* the ratio, and
|
||||
is chosen such that the narrow description shrinks to close
|
||||
before the stream name must begin to shrink */
|
||||
flex-shrink: 100;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1663,7 +1663,7 @@ div.focused_table {
|
|||
}
|
||||
|
||||
.search_closed {
|
||||
flex: 0; // makes sure search icon is always visible
|
||||
flex: 0; /* makes sure search icon is always visible */
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
|
|
@ -1683,17 +1683,17 @@ div.focused_table {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// The very last element in the navbar is the search icon, the second
|
||||
// last element is either the narrow description (for stream narrows) or
|
||||
// the "title" (for other narrows). The flex-grow property ensures these
|
||||
// elements take up the entirety of the white space.
|
||||
/* The very last element in the navbar is the search icon, the second
|
||||
last element is either the narrow description (for stream narrows) or
|
||||
the "title" (for other narrows). The flex-grow property ensures these
|
||||
elements take up the entirety of the white space. */
|
||||
> :nth-last-child(2) {
|
||||
flex-grow: 1;
|
||||
|
||||
// We extend the clickable area for the search_closed icon over the
|
||||
// 2nd last navbar element for better design (user convenience) this
|
||||
// selector makes it so mousing over that element also gives the user
|
||||
// a visual cue about the results of clicking the element
|
||||
/* We extend the clickable area for the search_closed icon over the
|
||||
2nd last navbar element for better design (user convenience) this
|
||||
selector makes it so mousing over that element also gives the user
|
||||
a visual cue about the results of clicking the element */
|
||||
cursor: pointer;
|
||||
&:hover + .search_closed {
|
||||
color: hsl(0, 0%, 0%);
|
||||
|
|
@ -1908,7 +1908,7 @@ div.focused_table {
|
|||
left: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
// border-right: 2px solid hsl(204, 20%, 74%);
|
||||
/* border-right: 2px solid hsl(204, 20%, 74%); */
|
||||
}
|
||||
|
||||
#streamlist-toggle-button {
|
||||
|
|
@ -2580,7 +2580,7 @@ select.inline_select_topic_edit {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
// Hide the up and down arrows in the Flatpickr datepicker year
|
||||
/* Hide the up and down arrows in the Flatpickr datepicker year */
|
||||
.flatpickr-months .numInputWrapper span {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2607,9 +2607,9 @@ select.inline_select_topic_edit {
|
|||
box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
|
||||
border-left: 1px solid hsl(0, 0%, 87%);
|
||||
|
||||
// We use both margin and padding to
|
||||
// hide little artifacts from showing up in
|
||||
// the gutter below the navbar.
|
||||
/* We use both margin and padding to
|
||||
hide little artifacts from showing up in
|
||||
the gutter below the navbar. */
|
||||
margin-top: $header_height;
|
||||
padding-top: $header_padding_bottom;
|
||||
|
||||
|
|
@ -2686,9 +2686,9 @@ select.inline_select_topic_edit {
|
|||
box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
|
||||
border-right: 1px solid hsl(0, 0%, 87%);
|
||||
|
||||
// We use both margin and padding to
|
||||
// hide little artifacts from showing up in
|
||||
// the gutter below the navbar.
|
||||
/* We use both margin and padding to
|
||||
hide little artifacts from showing up in
|
||||
the gutter below the navbar. */
|
||||
margin-top: $header_height;
|
||||
padding-top: $header_padding_bottom;
|
||||
|
||||
|
|
@ -2738,9 +2738,9 @@ select.inline_select_topic_edit {
|
|||
margin-left: 40px;
|
||||
width: calc(100% - 108px);
|
||||
}
|
||||
// todo: Figure out why this has to be different
|
||||
// from above at this width and resolve it
|
||||
// #searchbox_legacy .navbar-search.expanded,
|
||||
/* todo: Figure out why this has to be different
|
||||
from above at this width and resolve it
|
||||
#searchbox_legacy .navbar-search.expanded, */
|
||||
#searchbox_legacy .navbar-search.expanded,
|
||||
#searchbox .navbar-search.expanded {
|
||||
width: calc(100% - 123px);
|
||||
|
|
@ -2751,9 +2751,9 @@ select.inline_select_topic_edit {
|
|||
}
|
||||
|
||||
#top_navbar:not(.rightside-userlist) {
|
||||
// .search_closed .fa-search {
|
||||
// right: 115px;
|
||||
// }
|
||||
/* .search_closed .fa-search {
|
||||
right: 115px;
|
||||
} */
|
||||
.top-navbar-border {
|
||||
width: calc(100% - 75px);
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
* returns a string containing the header text, or false.
|
||||
*
|
||||
* Our custom changes include all mentions of this.header, some CSS changes
|
||||
* in compose.scss and splitting $container out of $menu so we can insert
|
||||
* in compose.css and splitting $container out of $menu so we can insert
|
||||
* additional HTML before $menu.
|
||||
*
|
||||
* 4. Escape hooks:
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
#!/usr/bin/env bash
|
||||
# Hackish tool for attempting to find unused IDs / classes in our CSS
|
||||
|
||||
for n in $(perl -lne 'print $1 while /[#.]([a-zA-Z0-9_-]+)/g' static/styles/zulip.scss | sort -u); do
|
||||
if [ "$(git grep "$n" | grep -cv '^static/styles/zulip.scss')" -eq 0 ]; then
|
||||
for n in $(perl -lne 'print $1 while /[#.]([a-zA-Z0-9_-]+)/g' static/styles/zulip.css | sort -u); do
|
||||
if [ "$(git grep "$n" | grep -cv '^static/styles/zulip.css')" -eq 0 ]; then
|
||||
echo "$n"
|
||||
fi
|
||||
done
|
||||
|
|
|
|||
|
|
@ -45,10 +45,10 @@ def run() -> None:
|
|||
|
||||
by_lang = linter_config.list_files(groups={
|
||||
'backend': ['py', 'sh', 'pp', 'json', 'md', 'txt', 'text', 'yaml', 'rst', 'yml'],
|
||||
'frontend': ['js', 'ts', 'css', 'scss', 'hbs', 'html', 'lock'],
|
||||
'frontend': ['js', 'ts', 'css', 'hbs', 'html', 'lock'],
|
||||
}, exclude=EXCLUDED_FILES)
|
||||
|
||||
linter_config.external_linter('css', ['node', 'node_modules/.bin/stylelint'], ['css', 'scss'],
|
||||
linter_config.external_linter('css', ['node', 'node_modules/.bin/stylelint'], ['css'],
|
||||
fix_arg='--fix',
|
||||
description="Standard CSS style and formatting linter "
|
||||
"(config: stylelint.config.js)")
|
||||
|
|
@ -92,7 +92,7 @@ def run() -> None:
|
|||
description="Sorts Python import statements",
|
||||
check_arg=['--check-only', '--diff'])
|
||||
linter_config.external_linter('prettier', ['node_modules/.bin/prettier', '--check', '--loglevel=warn'],
|
||||
['css', 'js', 'json', 'scss', 'ts', 'yaml', 'yml'],
|
||||
['css', 'js', 'json', 'ts', 'yaml', 'yml'],
|
||||
fix_arg=['--write'],
|
||||
description="Formats CSS, JavaScript, YAML")
|
||||
|
||||
|
|
|
|||
|
|
@ -419,7 +419,7 @@ bash_rules = RuleList(
|
|||
)
|
||||
|
||||
css_rules = RuleList(
|
||||
langs=['css', 'scss'],
|
||||
langs=['css'],
|
||||
rules=[
|
||||
*whitespace_rules,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"./static/js/bundles/common",
|
||||
"sorttable",
|
||||
"./static/js/analytics/activity",
|
||||
"./static/styles/portico/activity.scss"
|
||||
"./static/styles/portico/activity.css"
|
||||
],
|
||||
"archive": [
|
||||
"./static/js/bundles/portico",
|
||||
|
|
@ -15,35 +15,35 @@
|
|||
"./static/js/stream_color",
|
||||
"./static/js/scroll_bar",
|
||||
"katex/dist/katex.css",
|
||||
"./static/styles/rendered_markdown.scss",
|
||||
"./static/styles/zulip.scss",
|
||||
"./static/styles/portico/archive.scss",
|
||||
"./static/styles/rendered_markdown.css",
|
||||
"./static/styles/zulip.css",
|
||||
"./static/styles/portico/archive.css",
|
||||
"./static/generated/emoji-styles/google-sprite.css"
|
||||
],
|
||||
"billing": [
|
||||
"./static/js/bundles/portico",
|
||||
"./static/js/portico/landing-page",
|
||||
"./static/styles/portico/landing-page.scss",
|
||||
"./static/styles/portico/landing-page.css",
|
||||
"./static/js/billing/helpers",
|
||||
"./static/js/billing/billing",
|
||||
"./static/js/templates",
|
||||
"./static/js/loading",
|
||||
"./static/styles/portico/billing.scss"
|
||||
"./static/styles/portico/billing.css"
|
||||
],
|
||||
"upgrade": [
|
||||
"./static/js/bundles/portico",
|
||||
"./static/js/portico/landing-page",
|
||||
"./static/styles/portico/landing-page.scss",
|
||||
"./static/styles/portico/landing-page.css",
|
||||
"./static/js/billing/helpers",
|
||||
"./static/js/billing/upgrade",
|
||||
"./static/js/templates",
|
||||
"./static/js/loading",
|
||||
"./static/styles/portico/billing.scss"
|
||||
"./static/styles/portico/billing.css"
|
||||
],
|
||||
"portico": ["./static/js/bundles/portico"],
|
||||
"error-styles": [
|
||||
"./static/third/bootstrap/css/bootstrap.css",
|
||||
"./static/styles/portico/portico-styles.scss"
|
||||
"./static/styles/portico/portico-styles.css"
|
||||
],
|
||||
"common": ["./static/js/bundles/common"],
|
||||
"help": [
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
"landing-page": [
|
||||
"./static/js/bundles/portico",
|
||||
"./static/js/portico/landing-page",
|
||||
"./static/styles/portico/landing-page.scss"
|
||||
"./static/styles/portico/landing-page.css"
|
||||
],
|
||||
"integrations": [
|
||||
"./static/js/bundles/portico",
|
||||
"./static/js/portico/integrations",
|
||||
"./static/styles/portico/landing-page.scss",
|
||||
"./static/styles/portico/integrations.scss"
|
||||
"./static/styles/portico/landing-page.css",
|
||||
"./static/styles/portico/integrations.css"
|
||||
],
|
||||
"signup": [
|
||||
"./static/js/bundles/portico",
|
||||
|
|
@ -83,9 +83,9 @@
|
|||
"./static/js/bundles/common",
|
||||
"sorttable",
|
||||
"./static/js/analytics/activity",
|
||||
"./static/styles/portico/activity.scss",
|
||||
"./static/styles/portico/activity.css",
|
||||
"./static/js/analytics/support",
|
||||
"./static/styles/app_components.scss"
|
||||
"./static/styles/app_components.css"
|
||||
],
|
||||
"dev-login": ["./static/js/bundles/portico", "./static/js/portico/dev-login"],
|
||||
"desktop-login": ["./static/js/bundles/portico", "./static/js/portico/desktop-login"],
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
],
|
||||
"stats": [
|
||||
"./static/js/bundles/portico",
|
||||
"./static/styles/portico/stats.scss",
|
||||
"./static/styles/portico/stats.css",
|
||||
"./static/js/stats/stats"
|
||||
],
|
||||
"app": ["./static/js/bundles/app"],
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ export default (env?: string): webpack.Configuration[] => {
|
|||
// regular css files
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: resolve(__dirname, "static/styles"),
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
|
|
@ -98,9 +99,9 @@ export default (env?: string): webpack.Configuration[] => {
|
|||
},
|
||||
],
|
||||
},
|
||||
// scss loader
|
||||
// PostCSS loader
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.css$/,
|
||||
include: resolve(__dirname, "static/styles"),
|
||||
use: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9461,7 +9461,7 @@ postcss-sass@^0.4.4:
|
|||
gonzales-pe "^4.3.0"
|
||||
postcss "^7.0.21"
|
||||
|
||||
postcss-scss@^2.0.0, postcss-scss@^2.1.1:
|
||||
postcss-scss@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
|
||||
integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue