CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-03 14:54:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use <details> und <summary> instead of panel-collapse

Browse Source
This commit is contained in:
Raphael Michel
2018-05-10 12:04:29 +02:00
parent bfff001752
commit 05daeb561c
17 changed files with 198 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pretix/control/templates/pretixcontrol/base.html
View File

@@ -42,6 +42,7 @@
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/mail.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/typeahead.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/quicksetup.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asyncdownload.js" %}"></script>
<script type="text/javascript" src="{% static "colorpicker/bootstrap-colorpicker.js" %}"></script>
@@ -53,7 +54,10 @@
<link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
{% block custom_header %}{% endblock %}
</head>
<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}" data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}" data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}">
<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}"
data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}"
data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}"
data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">

16
src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
View File

@@ -1,16 +1,14 @@
{% load i18n %}
{% load bootstrap3 %}
{% load mail_settings_preview %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default">
<summary class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#{{ pid }}">
<strong>{% trans title %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans title %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="{{ pid }}" class="panel-collapse collapse">
</summary>
<div id="{{ pid }}">
<div class="panel-body">
{% with exclude|split as exclusion %}
{% with items|split as item_list %}
@@ -51,4 +49,4 @@
{% endwith %}
</div>
</div>
</div>
</details>

17
src/pretix/control/templates/pretixcontrol/event/tax_edit.html
View File

@@ -21,16 +21,15 @@
{% bootstrap_field form.name layout="control" %}
{% bootstrap_field form.rate addon_after="%" layout="control" %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default"
{% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}open{% endif %}>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#advanced">
<strong>{% trans "Advanced settings" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Advanced settings" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="advanced" class="panel-collapse collapsed {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}in{% endif %}">
</summary>
<div id="advanced">
<div class="panel-body">
<legend>{% trans "Advanced settings" %}</legend>
<div class="alert alert-legal">
@@ -111,7 +110,7 @@
</div>
</div>
</div>
</div>
</details>
<div class="form-group submit-group">

41
src/pretix/control/templates/pretixcontrol/order/change_questions.html
View File

@@ -19,38 +19,33 @@
{% csrf_token %}
<div class="panel-group" id="questions_accordion">
{% if request.event.settings.invoice_address_asked %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
<strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="invoice" class="panel-collapse collapsed in">
</summary>
<div id="invoice">
<div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% endif %}
{% for pos, forms in formgroups %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{{ pos.item.name }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="cp{{ pos.id }}"
class="panel-collapse collapsed in">
</summary>
<div id="cp{{ pos.id }}">
<div class="panel-body">
{% for form in forms %}
{% if form.pos.item != pos.item %}
@@ -61,7 +56,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="form-group submit-group">

17
src/pretix/control/templates/pretixcontrol/orders/export.html
View File

@@ -11,17 +11,14 @@
{% endif %}
</h1>
{% for e in exporters %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" {% if "identifier" in request.GET %}open{% endif %}>
<summary class="panel-heading">
<h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#{{ e.identifier }}">
{{ e.verbose_name }}
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
{{ e.verbose_name }}
<i class="fa fa-angle-down collapse-indicator"></i>
</h3>
</div>
<div id="{{ e.identifier }}" class="panel-collapse collapse {% if "identifier" in request.GET %}in
{% endif %}">
</summary>
<div id="{{ e.identifier }}">
<div class="panel-body">
<form action="{% url "control:event.orders.export.do" event=request.event.slug organizer=request.organizer.slug %}"
method="post" class="form-horizontal" data-asynctask data-asynctask-download
@@ -35,6 +32,6 @@
</form>
</div>
</div>
</div>
</details>
{% endfor %}
{% endblock %}

4
src/pretix/presale/templates/pretixpresale/base.html
View File

@@ -25,9 +25,9 @@
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/main.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asyncdownload.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
<script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script>
{% endcompress %}
@@ -37,7 +37,7 @@
<link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
{% block custom_header %}{% endblock %}
</head>
<body data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
<body class="nojs" data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
{% block above %}
{% endblock %}
<div class="container">

21
src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
View File

@@ -9,19 +9,16 @@
{% csrf_token %}
<div class="panel-group" id="questions_group">
{% for form in forms %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default">
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ form.cartpos.pk }}">
<strong>{{ form.item.name }}{% if form.variation %}
– {{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{{ form.item.name }}{% if form.variation %}
– {{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="cp{{ form.cartpos.pk }}"
class="panel-collapse collapsed in">
</summary>
<div id="cp{{ form.cartpos.pk }}">
<div class="panel-body">
{% for c in form.categories %}
<fieldset>
@@ -55,7 +52,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">

40
src/pretix/presale/templates/pretixpresale/event/checkout_base.html
View File

@@ -3,28 +3,26 @@
{% load bootstrap3 %}
{% block title %}{% trans "Checkout" %}{% endblock %}
{% block content %}
<div class="panel panel-default cart">
<div class="panel-heading">
<details class="panel panel-default cart">
<summary class="panel-heading">
<h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</a>
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</h3>
</div>
<div class="panel-collapse collapse" id="cart">
</summary>
<div>
<div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event %}
<em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -38,7 +36,7 @@
</em>
</div>
</div>
</div>
</details>
<h2>{% trans "Checkout" %}</h2>
{% include "pretixpresale/event/fragment_checkoutflow.html" %}
{% block inner %}

73
src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
View File

@@ -11,64 +11,57 @@
<form class="form-horizontal" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="panel-group" id="questions_group">
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#contact">
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="contact" class="panel-collapse collapse in">
</summary>
<div id="contact">
<div class="panel-body">
{% bootstrap_form contact_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% if event.settings.invoice_address_asked %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" {% if event.settings.invoice_address_required or event.settings.invoice_name_required %}open{% endif %}>
<summary class="panel-heading">
<h4 class="panel-title">
<a class="{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %} collapsed{% endif %}" data-toggle="collapse" href="#invoice">
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="invoice" class="panel-collapse collapse {% if event.settings.invoice_address_required or event.settings.invoice_name_required or "invoice" in request.GET %} in{% endif %}">
</summary>
<div id="invoice">
<div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% endif %}
{% for pos, forms in formgroups %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}</strong>
{% if pos.variation %}
– {{ pos.variation }}
{% endif %}
{% if forloop.counter > 1 %}
<span class="text-right">
<input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
{% else %}
<strong>{{ pos.item.name }}</strong>
{% if pos.variation %}
– {{ pos.variation }}
{% endif %}
{% if forloop.counter > 1 %}
<span class="text-right">
<input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
<i class="fa fa-angle-down collapse-indicator"></i>
{% endif %}
</a>
</span>
{% else %}
<i class="fa fa-angle-down collapse-indicator"></i>
{% endif %}
</h4>
</div>
<div id="cp{{ pos.id }}"
class="panel-collapse collapse in">
</summary>
<div>
<div class="panel-body" data-idx="{{ forloop.counter0 }}">
{% if pos.addons.all %}
<div class="form-group">
@@ -93,7 +86,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">

40
src/pretix/presale/templates/pretixpresale/event/index.html
View File

@@ -16,28 +16,26 @@
</script>
{% endautoescape %}
{% if show_cart %}
<div class="panel panel-primary cart">
<div class="panel-heading">
<details class="panel panel-primary cart" open>
<summary class="panel-heading">
<h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</a>
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</h3>
</div>
<div class="panel-collapse collapse in" id="cart">
</summary>
<div>
<div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=True %}
<em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -79,7 +77,7 @@
</div>
</div>
</div>
</div>
</details>
{% endif %}
{% if show_dates %}

41
src/pretix/presale/templates/pretixpresale/event/order_modify.html
View File

@@ -18,38 +18,33 @@
Please contact us if you need a new invoice.
{% endblocktrans %}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="invoice" class="panel-collapse collapsed in">
</summary>
<div id="invoice" class="panel-collapse">
<div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% endif %}
{% for pos, forms in formgroups %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{{ pos.item.name }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="cp{{ pos.id }}"
class="panel-collapse collapsed in">
</summary>
<div id="cp{{ pos.id }}">
<div class="panel-body">
{% for form in forms %}
{% if form.pos.item != pos.item %}
@@ -60,7 +55,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">

4
src/pretix/static/pretixpresale/js/ui/details.js → src/pretix/static/pretixbase/js/details.js
View File

@@ -14,12 +14,14 @@ $(function () {
return false;
}
if (isOpen) {
$details.removeClass("details-open");
$detailsNotSummary.stop().show().slideUp(500, function () {
$details.prop("open", false);
});
} else {
$detailsNotSummary.stop().hide();
$details.prop("open", true);
$details.addClass("details-open");
$detailsNotSummary.slideDown();
}
e.preventDefault();
@@ -40,6 +42,8 @@ $(function () {
$details.prop('open', typeof $details.attr('open') == 'string');
if (!$details.prop('open')) {
$detailsNotSummary.hide();
} else {
$details.addClass("details-open");
}
$detailsSummary.attr({
'role': 'button',

2
src/pretix/static/pretixcontrol/js/ui/main.js
View File

@@ -367,6 +367,8 @@ var form_handlers = function (el) {
$(function () {
"use strict";
$("body").removeClass("nojs");
$("[data-formset]").formset(
{
animateForms: true,

24
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -406,7 +406,7 @@ body.loading #wrapper {
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"] {
.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
display: flex;
padding: 10px 15px;
margin: -10px -15px;
@@ -570,3 +570,25 @@ ul.pagination {
.table-payment-providers > tbody > tr > td {
vertical-align: middle;
}
details {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}

2
src/pretix/static/pretixpresale/js/ui/main.js
View File

@@ -97,6 +97,8 @@ var form_handlers = function (el) {
$(function () {
"use strict";
$("body").removeClass("nojs");
$("input[data-toggle=radiocollapse]").change(function () {
$($(this).attr("data-parent")).find(".collapse.in").collapse('hide');
$($(this).attr("data-target")).collapse('show');

13
src/pretix/static/pretixpresale/scss/_event.scss
View File

@@ -65,19 +65,6 @@
line-height: inherit;
}
}
details.item-with-variations {
list-style: none;
}
details.item-with-variations > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.radio .variation-description {
padding-left: 20px;

23
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -201,7 +201,7 @@ body.loading .container {
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"] {
.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
display: flex;
padding: 10px 15px;
margin: -10px -15px;
@@ -219,5 +219,26 @@ body.loading .container {
background-color: darken($btn-primary-bg, 10%);
}
details {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
@import "_iframe.scss";
@import "_a11y.scss";