Remove fomantic accordion module (#15951)

Replace it with native <detail> element. Did some slight restyling on
the release downloads, new behaviour should be exactly the same
otherwise.

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2021-05-23 02:45:39 +02:00 committed by GitHub
parent 308b562b3c
commit b4d10598c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 197 additions and 1061 deletions

View File

@ -145,171 +145,162 @@
<h4 class="ui dividing header">{{.i18n.Tr "install.optional_title"}}</h4>
<!-- Email -->
<div class="ui accordion optional field">
<div class="title {{if .Err_SMTP}}text red{{end}}">
<i class="icon dropdown"></i>
<details class="optional field">
<summary class="title py-3{{if .Err_SMTP}} text red{{end}}">
{{.i18n.Tr "install.email_title"}}
</summary>
<div class="inline field">
<label for="smtp_host">{{.i18n.Tr "install.smtp_host"}}</label>
<input id="smtp_host" name="smtp_host" value="{{.smtp_host}}">
</div>
<div class="content">
<div class="inline field">
<label for="smtp_host">{{.i18n.Tr "install.smtp_host"}}</label>
<input id="smtp_host" name="smtp_host" value="{{.smtp_host}}">
</div>
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
<label for="smtp_from">{{.i18n.Tr "install.smtp_from"}}</label>
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
<span class="help">{{.i18n.Tr "install.smtp_from_helper"}}</span>
</div>
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
<label for="smtp_user">{{.i18n.Tr "install.mailer_user"}}</label>
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
</div>
<div class="inline field">
<label for="smtp_passwd">{{.i18n.Tr "install.mailer_password"}}</label>
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
</div>
<div class="inline field">
<div class="ui checkbox">
<label><strong>{{.i18n.Tr "install.register_confirm"}}</strong></label>
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label><strong>{{.i18n.Tr "install.mail_notify"}}</strong></label>
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
</div>
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
<label for="smtp_from">{{.i18n.Tr "install.smtp_from"}}</label>
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
<span class="help">{{.i18n.Tr "install.smtp_from_helper"}}</span>
</div>
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
<label for="smtp_user">{{.i18n.Tr "install.mailer_user"}}</label>
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
</div>
<div class="inline field">
<label for="smtp_passwd">{{.i18n.Tr "install.mailer_password"}}</label>
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
</div>
<div class="inline field">
<div class="ui checkbox">
<label><strong>{{.i18n.Tr "install.register_confirm"}}</strong></label>
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label><strong>{{.i18n.Tr "install.mail_notify"}}</strong></label>
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
</div>
</div>
</details>
<!-- Server and other services -->
<div class="ui accordion optional field">
<div class="title {{if .Err_Services}}text red{{end}}">
<i class="icon dropdown"></i>
<details class="optional field">
<summary class="title py-3{{if .Err_Services}} text red{{end}}">
{{.i18n.Tr "install.server_service_title"}}
</div>
<div class="content">
<div class="inline field">
<div class="ui checkbox" id="offline-mode">
<label class="poping up" data-content="{{.i18n.Tr "install.offline_mode_popup"}}"><strong>{{.i18n.Tr "install.offline_mode"}}</strong></label>
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="disable-gravatar">
<label class="poping up" data-content="{{.i18n.Tr "install.disable_gravatar_popup"}}"><strong>{{.i18n.Tr "install.disable_gravatar"}}</strong></label>
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="federated-avatar-lookup">
<label class="poping up" data-content="{{.i18n.Tr "install.federated_avatar_lookup_popup"}}"><strong>{{.i18n.Tr "install.federated_avatar_lookup"}}</strong></label>
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-openid-signin">
<label class="poping up" data-content="{{.i18n.Tr "install.openid_signin_popup"}}"><strong>{{.i18n.Tr "install.openid_signin"}}</strong></label>
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="disable-registration">
<label class="poping up" data-content="{{.i18n.Tr "install.disable_registration_popup"}}"><strong>{{.i18n.Tr "install.disable_registration"}}</strong></label>
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="allow-only-external-registration">
<label class="poping up" data-content="{{.i18n.Tr "install.allow_only_external_registration_popup"}}"><strong>{{.i18n.Tr "install.allow_only_external_registration_popup"}}</strong></label>
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-openid-signup">
<label class="poping up" data-content="{{.i18n.Tr "install.openid_signup_popup"}}"><strong>{{.i18n.Tr "install.openid_signup"}}</strong></label>
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-captcha">
<label class="poping up" data-content="{{.i18n.Tr "install.enable_captcha_popup"}}"><strong>{{.i18n.Tr "install.enable_captcha"}}</strong></label>
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.require_sign_in_view_popup"}}"><strong>{{.i18n.Tr "install.require_sign_in_view"}}</strong></label>
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_keep_email_private_popup"}}"><strong>{{.i18n.Tr "install.default_keep_email_private"}}</strong></label>
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_allow_create_organization_popup"}}"><strong>{{.i18n.Tr "install.default_allow_create_organization"}}</strong></label>
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_enable_timetracking_popup"}}"><strong>{{.i18n.Tr "install.default_enable_timetracking"}}</strong></label>
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
</div>
</div>
<div class="inline field">
<label for="no_reply_address">{{.i18n.Tr "install.no_reply_address"}}</label>
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
<span class="help">{{.i18n.Tr "install.no_reply_address_helper"}}</span>
</div>
<div class="inline field">
<label for="password_algorithm">{{.i18n.Tr "install.password_algorithm"}}</label>
<div class="ui selection dropdown">
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
<div class="text">{{.password_algorithm}}</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
{{range .PasswordHashAlgorithms}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{.i18n.Tr "install.password_algorithm_helper"}}</span>
</summary>
<div class="inline field">
<div class="ui checkbox" id="offline-mode">
<label class="poping up" data-content="{{.i18n.Tr "install.offline_mode_popup"}}"><strong>{{.i18n.Tr "install.offline_mode"}}</strong></label>
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="disable-gravatar">
<label class="poping up" data-content="{{.i18n.Tr "install.disable_gravatar_popup"}}"><strong>{{.i18n.Tr "install.disable_gravatar"}}</strong></label>
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="federated-avatar-lookup">
<label class="poping up" data-content="{{.i18n.Tr "install.federated_avatar_lookup_popup"}}"><strong>{{.i18n.Tr "install.federated_avatar_lookup"}}</strong></label>
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-openid-signin">
<label class="poping up" data-content="{{.i18n.Tr "install.openid_signin_popup"}}"><strong>{{.i18n.Tr "install.openid_signin"}}</strong></label>
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="disable-registration">
<label class="poping up" data-content="{{.i18n.Tr "install.disable_registration_popup"}}"><strong>{{.i18n.Tr "install.disable_registration"}}</strong></label>
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="allow-only-external-registration">
<label class="poping up" data-content="{{.i18n.Tr "install.allow_only_external_registration_popup"}}"><strong>{{.i18n.Tr "install.allow_only_external_registration_popup"}}</strong></label>
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-openid-signup">
<label class="poping up" data-content="{{.i18n.Tr "install.openid_signup_popup"}}"><strong>{{.i18n.Tr "install.openid_signup"}}</strong></label>
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox" id="enable-captcha">
<label class="poping up" data-content="{{.i18n.Tr "install.enable_captcha_popup"}}"><strong>{{.i18n.Tr "install.enable_captcha"}}</strong></label>
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.require_sign_in_view_popup"}}"><strong>{{.i18n.Tr "install.require_sign_in_view"}}</strong></label>
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_keep_email_private_popup"}}"><strong>{{.i18n.Tr "install.default_keep_email_private"}}</strong></label>
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_allow_create_organization_popup"}}"><strong>{{.i18n.Tr "install.default_allow_create_organization"}}</strong></label>
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label class="poping up" data-content="{{.i18n.Tr "install.default_enable_timetracking_popup"}}"><strong>{{.i18n.Tr "install.default_enable_timetracking"}}</strong></label>
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
</div>
</div>
<div class="inline field">
<label for="no_reply_address">{{.i18n.Tr "install.no_reply_address"}}</label>
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
<span class="help">{{.i18n.Tr "install.no_reply_address_helper"}}</span>
</div>
<div class="inline field">
<label for="password_algorithm">{{.i18n.Tr "install.password_algorithm"}}</label>
<div class="ui selection dropdown">
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
<div class="text">{{.password_algorithm}}</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
{{range .PasswordHashAlgorithms}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{.i18n.Tr "install.password_algorithm_helper"}}</span>
</div>
</details>
<!-- Admin -->
<div class="ui accordion optional field">
<div class="title {{if .Err_Admin}}text red{{end}}">
<i class="icon dropdown"></i>
<details class="optional field">
<summary class="title py-3{{if .Err_Admin}} text red{{end}}">
{{.i18n.Tr "install.admin_title"}}
</summary>
<p class="center">{{.i18n.Tr "install.admin_setting_desc"}}</p>
<div class="inline field {{if .Err_AdminName}}error{{end}}">
<label for="admin_name">{{.i18n.Tr "install.admin_name"}}</label>
<input id="admin_name" name="admin_name" value="{{.admin_name}}">
</div>
<div class="content">
<p class="center">{{.i18n.Tr "install.admin_setting_desc"}}</p>
<div class="inline field {{if .Err_AdminName}}error{{end}}">
<label for="admin_name">{{.i18n.Tr "install.admin_name"}}</label>
<input id="admin_name" name="admin_name" value="{{.admin_name}}">
</div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_passwd">{{.i18n.Tr "install.admin_password"}}</label>
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
</div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_confirm_passwd">{{.i18n.Tr "install.confirm_password"}}</label>
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
</div>
<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
<label for="admin_email">{{.i18n.Tr "install.admin_email"}}</label>
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
</div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_passwd">{{.i18n.Tr "install.admin_password"}}</label>
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
</div>
</div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_confirm_passwd">{{.i18n.Tr "install.confirm_password"}}</label>
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
</div>
<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
<label for="admin_email">{{.i18n.Tr "install.admin_email"}}</label>
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
</div>
</details>
<div class="ui divider"></div>
<div class="inline field">

View File

@ -139,39 +139,36 @@
<div class="markup desc">
{{Str2html .Note}}
</div>
<div class="ui accordion download">
<h2 class="title {{if eq $idx 0}}active{{end}} df ac mb-0">
{{svg "octicon-triangle-right" 14 "dropdown icon"}}
<details class="download border-secondary-top mt-4 pt-4" {{if eq $idx 0}}open{{end}}>
<summary class="mb-4">
{{$.i18n.Tr "repo.release.downloads"}}
</h2>
<div class="content {{if eq $idx 0}}active{{end}}">
<ul class="list">
{{if and (not .IsDraft) ($.Permission.CanRead $.UnitTypeCode)}}
</summary>
<ul class="list">
{{if and (not .IsDraft) ($.Permission.CanRead $.UnitTypeCode)}}
<li>
<a class="archive-link" data-url="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.i18n.Tr "repo.release.source_code"}} (ZIP)</strong></a>
</li>
<li>
<a class="archive-link" data-url="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.tar.gz"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.i18n.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
</li>
{{end}}
{{if .Attachments}}
{{range .Attachments}}
<li>
<a class="archive-link" data-url="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.i18n.Tr "repo.release.source_code"}} (ZIP)</strong></a>
</li>
<li>
<a class="archive-link" data-url="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.tar.gz"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.i18n.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
</li>
{{end}}
{{if .Attachments}}
{{range .Attachments}}
<li>
<span class="ui text middle aligned right">
<span class="ui text grey">{{.Size | FileSize}}</span>
<span class="poping up" data-content="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
{{svg "octicon-info"}}
</span>
<span class="ui text middle aligned right">
<span class="ui text grey">{{.Size | FileSize}}</span>
<span class="poping up" data-content="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
{{svg "octicon-info"}}
</span>
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
<strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong>
</a>
</li>
{{end}}
</span>
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
<strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong>
</a>
</li>
{{end}}
</ul>
</div>
</div>
{{end}}
</ul>
</details>
{{end}}
<span class="dot">&nbsp;</span>
</div>

View File

@ -94,12 +94,11 @@
<input id="mirror_address" name="mirror_address" value="{{MirrorFullAddress .Mirror}}" required>
<p class="help">{{.i18n.Tr "repo.mirror_address_desc"}}</p>
</div>
<div class="ui accordion optional field">
<label class="ui title {{if .Err_Auth}}text red active{{end}}">
<i class="icon dropdown"></i>
<label for="">{{.i18n.Tr "repo.need_auth"}}</label>
</label>
<div class="content {{if .Err_Auth}}active{{else if (MirrorUserName .Mirror)}}active{{end}}">
<details class="ui optional field" {{if .Err_Auth}}open{{else if (MirrorUserName .Mirror)}}open{{end}}>
<summary class="p-2">
{{.i18n.Tr "repo.need_auth"}}
</summary>
<div class="p-2">
<div class="inline field {{if .Err_Auth}}error{{end}}">
<label for="mirror_username">{{.i18n.Tr "username"}}</label>
<input id="mirror_username" name="mirror_username" value="{{MirrorUserName .Mirror}}" {{if not .mirror_username}}data-need-clear="true"{{end}}>
@ -110,7 +109,7 @@
<input id="mirror_password" name="mirror_password" type="password" value="{{MirrorPassword .Mirror}}" {{if not .mirror_password}}data-need-clear="true"{{end}} autocomplete="off">
</div>
</div>
</div>
</details>
{{if .LFSStartServer}}
<div class="inline field">

View File

@ -8,253 +8,6 @@
* http://opensource.org/licenses/MIT
*
*/
/*!
* # Fomantic-UI - Accordion
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Accordion
*******************************/
.ui.accordion,
.ui.accordion .accordion {
max-width: 100%;
}
.ui.accordion .accordion {
margin: 1em 0 0;
padding: 0;
}
/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
cursor: pointer;
}
/* Default Styling */
.ui.accordion .title:not(.ui) {
padding: 0.5em 0;
font-family: var(--fonts-regular);
font-size: 1em;
color: rgba(0, 0, 0, 0.87);
}
/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
margin: '';
padding: 0.5em 0 1em;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
padding-bottom: 0;
}
/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
display: inline-block;
float: none;
opacity: 1;
width: 1.25em;
height: 1em;
margin: 0 0.25rem 0 0;
padding: 0;
font-size: 1em;
transition: transform 0.1s ease, opacity 0.1s ease;
vertical-align: baseline;
transform: none;
}
/*--------------
Coupling
---------------*/
/* Menu */
.ui.accordion.menu .item .title {
display: block;
padding: 0;
}
.ui.accordion.menu .item .title > .dropdown.icon {
float: right;
margin: 0.21425em 0 0 1em;
transform: rotate(180deg);
}
/* Header */
.ui.accordion .ui.header .dropdown.icon {
font-size: 1em;
margin: 0 0.25rem 0 0;
}
/*******************************
States
*******************************/
.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
transform: rotate(90deg);
}
.ui.accordion.menu .item .active.title > .dropdown.icon {
transform: rotate(90deg);
}
/*******************************
Types
*******************************/
/*--------------
Styled
---------------*/
.ui.styled.accordion {
width: 600px;
}
.ui.styled.accordion,
.ui.styled.accordion .accordion {
border-radius: 0.28571429rem;
background: #FFFFFF;
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15);
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
margin: 0;
padding: 0.75em 1em;
color: rgba(0, 0, 0, 0.4);
font-weight: 500;
border-top: 1px solid rgba(34, 36, 38, 0.15);
transition: background 0.1s ease, color 0.1s ease;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
border-top: none;
}
/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
margin: 0;
padding: 0.5em 1em 1.5em;
}
.ui.styled.accordion .accordion .content {
margin: 0;
padding: 0.5em 1em 1.5em;
}
/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: transparent;
color: rgba(0, 0, 0, 0.87);
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: transparent;
color: rgba(0, 0, 0, 0.87);
}
/* Active */
.ui.styled.accordion .active.title {
background: transparent;
color: rgba(0, 0, 0, 0.95);
}
.ui.styled.accordion .accordion .active.title {
background: transparent;
color: rgba(0, 0, 0, 0.95);
}
/*******************************
States
*******************************/
/*--------------
Not Active
---------------*/
.ui.accordion .title ~ .content:not(.active),
.ui.accordion .accordion .title ~ .content:not(.active) {
display: none;
}
/*******************************
Variations
*******************************/
/*--------------
Fluid
---------------*/
.ui.fluid.accordion,
.ui.fluid.accordion .accordion {
width: 100%;
}
/*--------------
Inverted
---------------*/
.ui.inverted.accordion .title:not(.ui) {
color: rgba(255, 255, 255, 0.9);
}
/*******************************
Theme Overrides
*******************************/
@font-face {
font-family: 'Accordion';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
font-weight: normal;
font-style: normal;
}
/* Dropdown Icon */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
font-family: Accordion;
line-height: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-weight: normal;
font-style: normal;
text-align: center;
}
.ui.accordion .title .dropdown.icon:before,
.ui.accordion .accordion .title .dropdown.icon:before {
content: '\f0da' ;
}
/*******************************
User Overrides
*******************************/
/*!
* # Fomantic-UI - Breadcrumb
* http://github.com/fomantic/Fomantic-UI/

View File

@ -8,625 +8,6 @@
* http://opensource.org/licenses/MIT
*
*/
/*!
* # Fomantic-UI - Accordion
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ($, window, document, undefined) {
'use strict';
$.isFunction = $.isFunction || function(obj) {
return typeof obj === "function" && typeof obj.nodeType !== "number";
};
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
? self
: Function('return this')()
;
$.fn.accordion = function(parameters) {
var
$allModules = $(this),
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
returnedValue
;
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.accordion.settings, parameters)
: $.extend({}, $.fn.accordion.settings),
className = settings.className,
namespace = settings.namespace,
selector = settings.selector,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
$module = $(this),
$title = $module.find(selector.title),
$content = $module.find(selector.content),
element = this,
instance = $module.data(moduleNamespace),
observer,
module
;
module = {
initialize: function() {
module.debug('Initializing', $module);
module.bind.events();
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
instantiate: function() {
instance = module;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.debug('Destroying previous instance', $module);
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
},
refresh: function() {
$title = $module.find(selector.title);
$content = $module.find(selector.content);
},
observeChanges: function() {
if('MutationObserver' in window) {
observer = new MutationObserver(function(mutations) {
module.debug('DOM tree modified, updating selector cache');
module.refresh();
});
observer.observe(element, {
childList : true,
subtree : true
});
module.debug('Setting up mutation observer', observer);
}
},
bind: {
events: function() {
module.debug('Binding delegated events');
$module
.on(settings.on + eventNamespace, selector.trigger, module.event.click)
;
}
},
event: {
click: function() {
module.toggle.call(this);
}
},
toggle: function(query) {
var
$activeTitle = (query !== undefined)
? (typeof query === 'number')
? $title.eq(query)
: $(query).closest(selector.title)
: $(this).closest(selector.title),
$activeContent = $activeTitle.next($content),
isAnimating = $activeContent.hasClass(className.animating),
isActive = $activeContent.hasClass(className.active),
isOpen = (isActive && !isAnimating),
isOpening = (!isActive && isAnimating)
;
module.debug('Toggling visibility of content', $activeTitle);
if(isOpen || isOpening) {
if(settings.collapsible) {
module.close.call($activeTitle);
}
else {
module.debug('Cannot close accordion content collapsing is disabled');
}
}
else {
module.open.call($activeTitle);
}
},
open: function(query) {
var
$activeTitle = (query !== undefined)
? (typeof query === 'number')
? $title.eq(query)
: $(query).closest(selector.title)
: $(this).closest(selector.title),
$activeContent = $activeTitle.next($content),
isAnimating = $activeContent.hasClass(className.animating),
isActive = $activeContent.hasClass(className.active),
isOpen = (isActive || isAnimating)
;
if(isOpen) {
module.debug('Accordion already open, skipping', $activeContent);
return;
}
module.debug('Opening accordion content', $activeTitle);
settings.onOpening.call($activeContent);
settings.onChanging.call($activeContent);
if(settings.exclusive) {
module.closeOthers.call($activeTitle);
}
$activeTitle
.addClass(className.active)
;
$activeContent
.stop(true, true)
.addClass(className.animating)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$activeContent
.children()
.transition({
animation : 'fade in',
queue : false,
useFailSafe : true,
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
skipInlineHidden : true,
onComplete: function() {
$activeContent.children().removeClass(className.transition);
}
})
;
}
else {
$activeContent
.children()
.stop(true, true)
.animate({
opacity: 1
}, settings.duration, module.resetOpacity)
;
}
}
$activeContent
.slideDown(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
.addClass(className.active)
;
module.reset.display.call(this);
settings.onOpen.call(this);
settings.onChange.call(this);
})
;
},
close: function(query) {
var
$activeTitle = (query !== undefined)
? (typeof query === 'number')
? $title.eq(query)
: $(query).closest(selector.title)
: $(this).closest(selector.title),
$activeContent = $activeTitle.next($content),
isAnimating = $activeContent.hasClass(className.animating),
isActive = $activeContent.hasClass(className.active),
isOpening = (!isActive && isAnimating),
isClosing = (isActive && isAnimating)
;
if((isActive || isOpening) && !isClosing) {
module.debug('Closing accordion content', $activeContent);
settings.onClosing.call($activeContent);
settings.onChanging.call($activeContent);
$activeTitle
.removeClass(className.active)
;
$activeContent
.stop(true, true)
.addClass(className.animating)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$activeContent
.children()
.transition({
animation : 'fade out',
queue : false,
useFailSafe : true,
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
skipInlineHidden : true
})
;
}
else {
$activeContent
.children()
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
;
}
}
$activeContent
.slideUp(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
.removeClass(className.active)
;
module.reset.display.call(this);
settings.onClose.call(this);
settings.onChange.call(this);
})
;
}
},
closeOthers: function(index) {
var
$activeTitle = (index !== undefined)
? $title.eq(index)
: $(this).closest(selector.title),
$parentTitles = $activeTitle.parents(selector.content).prev(selector.title),
$activeAccordion = $activeTitle.closest(selector.accordion),
activeSelector = selector.title + '.' + className.active + ':visible',
activeContent = selector.content + '.' + className.active + ':visible',
$openTitles,
$nestedTitles,
$openContents
;
if(settings.closeNested) {
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
$openContents = $openTitles.next($content);
}
else {
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
$nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
$openTitles = $openTitles.not($nestedTitles);
$openContents = $openTitles.next($content);
}
if( ($openTitles.length > 0) ) {
module.debug('Exclusive enabled, closing other content', $openTitles);
$openTitles
.removeClass(className.active)
;
$openContents
.removeClass(className.animating)
.stop(true, true)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$openContents
.children()
.transition({
animation : 'fade out',
useFailSafe : true,
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
skipInlineHidden : true
})
;
}
else {
$openContents
.children()
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
;
}
}
$openContents
.slideUp(settings.duration , settings.easing, function() {
$(this).removeClass(className.active);
module.reset.display.call(this);
})
;
}
},
reset: {
display: function() {
module.verbose('Removing inline display from element', this);
$(this).css('display', '');
if( $(this).attr('style') === '') {
$(this)
.attr('style', '')
.removeAttr('style')
;
}
},
opacity: function() {
module.verbose('Removing inline opacity from element', this);
$(this).css('opacity', '');
if( $(this).attr('style') === '') {
$(this)
.attr('style', '')
.removeAttr('style')
;
}
},
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else if(value !== undefined) {
if($.isPlainObject(settings[name])) {
$.extend(true, settings[name], value);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
module.debug('Changing internal', name, value);
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(!settings.silent && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(!settings.silent && settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
if(!settings.silent) {
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
module.error.apply(console, arguments);
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Element' : element,
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
module.error(error.method, query);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
instance.invoke('destroy');
}
module.initialize();
}
})
;
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.accordion.settings = {
name : 'Accordion',
namespace : 'accordion',
silent : false,
debug : false,
verbose : false,
performance : true,
on : 'click', // event on title that opens accordion
observeChanges : true, // whether accordion should automatically refresh on DOM insertion
exclusive : true, // whether a single accordion content panel should be open at once
collapsible : true, // whether accordion content can be closed
closeNested : false, // whether nested content should be closed when a panel is closed
animateChildren : true, // whether children opacity should be animated
duration : 350, // duration of animation
easing : 'easeOutQuad', // easing equation for animation
onOpening : function(){}, // callback before open animation
onClosing : function(){}, // callback before closing animation
onChanging : function(){}, // callback before closing or opening animation
onOpen : function(){}, // callback after open animation
onClose : function(){}, // callback after closing animation
onChange : function(){}, // callback after closing or opening animation
error: {
method : 'The method you called is not defined'
},
className : {
active : 'active',
animating : 'animating',
transition: 'transition'
},
selector : {
accordion : '.accordion',
title : '.title',
trigger : '.title',
content : '.content'
}
};
// Adds easing
$.extend( $.easing, {
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
}
});
})( jQuery, window, document );
/*!
* # Fomantic-UI - API
* http://github.com/fomantic/Fomantic-UI/

View File

@ -21,7 +21,6 @@
"rtl": false,
"admin": false,
"components": [
"accordion",
"api",
"breadcrumb",
"button",

View File

@ -2563,7 +2563,6 @@ $(document).ready(async () => {
direction: 'upward',
fullTextSearch: 'exact'
});
$('.ui.accordion').accordion();
$('.ui.checkbox').checkbox();
$('.ui.progress').progress({
showActivity: false

View File

@ -164,6 +164,14 @@ table {
border-collapse: collapse;
}
details summary {
cursor: pointer;
}
details summary > * {
display: inline;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) transparent;

View File

@ -1849,8 +1849,6 @@
}
.download {
margin-top: 20px;
> a {
.svg {
margin-left: 5px;
@ -1860,19 +1858,30 @@
.list {
padding-left: 0;
border-top: 1px solid var(--color-secondary);
li {
list-style: none;
display: block;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-secondary);
padding: 8px;
border: 1px solid var(--color-secondary);
background: var(--color-light);
a > .text.right {
margin-right: 5px;
}
}
li + li {
border-top: 0;
}
li:first-of-type {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
li:last-of-type {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
}
}