mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-22 08:55:15 +02:00
Code Issues Projects Releases Wiki Activity

MDL-84692 theme_boost: Update .btn-icon class

Browse Source 
- Update and improve styles for .btn-icon helper class for consistency.
- Added new $btn-icon-border-radius SCSS variable to cuztomize the btn-icon
border radius.
- Fix and simplify current .btn-icon usages
This commit is contained in:
Mikel Martín 2025-02-28 08:39:00 +01:00
parent 688478cfa4
commit 11657fe082
43 changed files with 236 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
admin/tool/componentlibrary/content/moodle/components/buttons.md
View File

@ -68,6 +68,27 @@ Outline buttons are used for buttons that controll part of the user interface, l
The subtle class is designed to create buttons that offer a balance between the visual prominence of standard buttons and the minimalism of outline buttons. This class aims to provide a softer, more understated appearance compared to regular buttons while still maintaining more visual presence than outline buttons.
### Icon buttons
{{< example >}}
<button type="button" class="btn btn-icon">
<i class="icon fa fa-ellipsis-vertical fa-fw" title="Edit" role="img"></i>
</button>
<button type="button" class="btn btn-icon text-bg-danger">
<i class="icon fa fa-trash-can fa-fw" title="Delete" role="img"></i>
</button>
<button type="button" class="btn btn-icon icon-size-4">
<i class="icon fa fa-user fa-fw" title="User" role="img"></i>
</button>
<button type="button" class="btn btn-icon icon-size-5">
<i class="icon fa fa-user fa-fw" title="User" role="img"></i>
</button>
{{< /example >}}
The `.btn-icon` class styles buttons that contain only an icon, providing a visually appealing and compact design for icon-only buttons. This class is ideal for creating minimalistic, icon-based interactions within your UI.
The `.btn-icon` class standardizes icon button styles using the `$btn-icon-border-radius` variable in variables.scss. While this ensures consistency, the `.rounded-circle` Bootstrap class can still be used for legacy support, though it's discouraged for new designs.
## Adding buttons to a page
### Using the single_select renderer

2
blocks/myoverview/templates/course-action-menu.mustache
View File

@ -25,7 +25,7 @@
}
}}
<div class="ms-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3 coursemenubtn"
<button class="btn btn-link btn-icon coursemenubtn"
type="button"
data-bs-toggle="dropdown"
aria-haspopup="true"

2
course/format/templates/local/content/cm/groupmode.mustache
View File

@ -31,7 +31,7 @@
{{< core/local/dropdown/status}}
{{$ buttonclasses }}
{{#autohide}} v-parent-focus {{/autohide}}
groupmode-information btn btn-icon icon-no-margin
groupmode-information btn btn-icon
{{/ buttonclasses }}
{{$ buttoncontent }}
{{{groupicon}}}

2
course/format/templates/local/content/section/content.mustache
View File

@ -143,7 +143,7 @@
{{^controlmenu}}
<div class="section_goto bulk-hidden ms-auto" data-sectionid="{{id}}">
<a href="{{{url}}}"
class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin"
class="btn btn-icon d-flex"
title="{{#str}}gotosection, course, {{name}}{{/str}}">
<span class="dir-rtl-hide">
{{#pix}}t/right, moodle{{/pix}}

2
course/format/templates/local/content/section/header.mustache
View File

@ -59,7 +59,7 @@
id="collapsesectionid{{id}}"
aria-expanded="{{^contentcollapsed}}true{{/contentcollapsed}}{{#contentcollapsed}}false{{/contentcollapsed}}"
aria-controls="coursecontentcollapseid{{id}}"
class="btn btn-icon me-3 icons-collapse-expand justify-content-center
class="btn btn-icon me-3 icons-collapse-expand
{{#contentcollapsed}} collapsed {{/contentcollapsed}}"
aria-label="{{name}}">
<span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, core {{/str}}">

4
course/templates/local/activitychooser/item.mustache
View File

@ -42,7 +42,7 @@
</a>
<div class="optionactions d-flex justify-content-center" role="group" data-region="chooser-option-actions-container">
{{^legacyitem}}
<button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction {{#favourite}}text-primary{{/favourite}}{{^favourite}}text-muted{{/favourite}}"
<button class="btn btn-icon m-0 optionaction {{#favourite}}text-primary{{/favourite}}{{^favourite}}text-muted{{/favourite}}"
data-action="manage-module-favourite"
data-favourited="{{favourite}}"
data-id="{{id}}"
@ -65,7 +65,7 @@
{{/favourite}}
</button>
{{/legacyitem}}
<button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction" data-action="show-option-summary" tabindex="-1">
<button class="btn btn-icon m-0 optionaction" data-action="show-option-summary" tabindex="-1">
<span aria-hidden="true">{{#pix}} docs, core {{/pix}}</span>
<span class="visually-hidden">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
</button>

2
files/renderer.php
View File

@ -176,7 +176,7 @@ class core_files_renderer extends plugin_renderer_base {
<div class="fp-filename text-truncate"></div>
</div>
</a>
<a class="fp-contextmenu btn btn-icon btn-light border icon-no-margin icon-size-3" href="#">
<a class="fp-contextmenu btn btn-icon btn-light border" href="#">
<span>'.$this->pix_icon('i/menu', '▶').'</span></a>
</div>';
return $rv;

4
grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
View File

@ -75,7 +75,7 @@
{{# pix }} info, gradingform_guide {{/ pix }}
<span class="visually-hidden">{{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}</span>
</button>
<button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 fw-bold mb-0 ms-auto"
<button class="criterion-toggle btn btn-icon text-reset p-0 fw-bold mb-0 ms-auto"
type="button"
data-bs-toggle="collapse"
data-bs-target="#criteria-{{id}}"
@ -126,7 +126,7 @@
>{{remark}}</textarea>
{{#hascomments}}
<button
class="btn btn-icon form-inset-item icon-no-margin p-0 mt-1 me-1 text-reset collapsed"
class="btn btn-icon form-inset-item p-0 mt-1 me-1 text-reset collapsed"
aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
aria-expanded="false"
data-bs-toggle="collapse"

2
grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
View File

@ -60,7 +60,7 @@
<div class="mb-3">
<div class="d-flex align-items-center mb-2">
<h5 id="criterion-description-{{id}}" class="px-0 mb-0 description fw-bold">{{{description}}}</h5>
<button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 fw-bold mb-0 ms-auto"
<button class="criterion-toggle btn btn-icon text-reset p-0 fw-bold mb-0 ms-auto"
type="button"
data-bs-toggle="collapse"
data-bs-target="#criteria-{{id}}"

2
grade/lib.php
View File

@ -1587,7 +1587,7 @@ class grade_structure {
if ($menuitems) {
$menu = new action_menu($menuitems);
$icon = $OUTPUT->pix_icon('i/moremenu', get_string('actions'));
$extraclasses = 'btn btn-link btn-icon icon-size-3 d-flex align-items-center justify-content-center no-caret';
$extraclasses = 'btn btn-link btn-icon d-flex no-caret';
$menu->set_menu_trigger($icon, $extraclasses);
$menu->set_menu_left();

2
grade/report/grader/templates/collapse/icon.mustache
View File

@ -23,7 +23,7 @@
"name": "Meaning of life"
}
}}
<button type="button" class="btn btn-link btn-icon icon-size-3" data-hider="expand" data-col="{{field}}">
<button type="button" class="btn btn-link btn-icon" data-hider="expand" data-col="{{field}}">
<i class="icon fa fa-plus m-0" title="{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}" aria-hidden="true"></i>
<span class="visually-hidden">{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}</span>
</button>

2
grade/report/singleview/classes/local/screen/grade.php
View File

@ -418,7 +418,7 @@ class grade extends tablelike implements selectable_items, filterable_items {
$menuitems[] = new \action_menu_link_secondary($url, null, $title);
$menu = new \action_menu($menuitems);
$icon = $OUTPUT->pix_icon('i/moremenu', get_string('actions'));
$extraclasses = 'btn btn-link btn-icon icon-size-3 d-flex align-items-center justify-content-center';
$extraclasses = 'btn btn-link btn-icon d-flex';
$menu->set_menu_trigger($icon, $extraclasses);
$menu->set_menu_left();
$menu->set_boundary('window');

2
grade/report/singleview/classes/local/screen/user.php
View File

@ -264,7 +264,7 @@ class user extends tablelike implements selectable_items {
$menuitems[] = new \action_menu_link_secondary($url, null, $title);
$menu = new \action_menu($menuitems);
$icon = $OUTPUT->pix_icon('i/moremenu', get_string('actions'));
$extraclasses = 'btn btn-link btn-icon icon-size-3 d-flex align-items-center justify-content-center';
$extraclasses = 'btn btn-link btn-icon d-flex';
$menu->set_menu_trigger($icon, $extraclasses);
$menu->set_menu_left();
$menu->set_boundary('window');

2
grade/templates/cellmenu.mustache
View File

@ -40,7 +40,7 @@
}}
<div class="action-menu moodle-actionmenu grader" data-collapse="menu">
<div class="dropdown">
<button class="btn btn-link btn-icon icon-size-3 cellmenubtn"
<button class="btn btn-link btn-icon cellmenubtn"
type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
{{#databoundary}}data-boundary="{{databoundary}}"{{/databoundary}}
{{#datatype}}data-type="{{datatype}}"{{/datatype}}

2
lib/classes/output/action_menu.php
View File

@ -197,7 +197,7 @@ class action_menu implements renderable, templatable {
/**
* Classes for the trigger menu
*/
const DEFAULT_KEBAB_TRIGGER_CLASSES = 'btn btn-icon d-flex align-items-center justify-content-center no-caret';
const DEFAULT_KEBAB_TRIGGER_CLASSES = 'btn btn-icon d-flex no-caret';
/**
* Setup trigger as in the kebab menu.

4
message/templates/message_drawer_view_conversation_footer_content.mustache
View File

@ -69,7 +69,7 @@
{{> core/emoji/picker }}
</div>
<button
class="btn btn-link btn-icon icon-size-3 ms-1"
class="btn btn-link btn-icon ms-1"
aria-label="{{#str}} toggleemojipicker, core {{/str}}"
data-action="toggle-emoji-picker"
>
@ -77,7 +77,7 @@
</button>
{{/showemojipicker}}
<button
class="btn btn-link btn-icon icon-size-3 ms-1 mt-auto"
class="btn btn-link btn-icon ms-1 mt-auto"
aria-label="{{#str}} sendmessage, core_message {{/str}}"
data-action="send-message"
>

2
message/templates/message_drawer_view_conversation_header_content_type_private.mustache
View File

@ -82,7 +82,7 @@
</a>
</div>
<div class="ms-auto dropdown">
<button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
<button id="conversation-actions-menu-button" class="btn btn-link btn-icon" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
{{#pix}} i/moremenu, core {{/pix}}

2
message/templates/message_drawer_view_conversation_header_content_type_public.mustache
View File

@ -76,7 +76,7 @@
</a>
</div>
<div class="ms-auto dropdown">
<button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
<button id="conversation-actions-menu-button" class="btn btn-link btn-icon" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
{{#pix}} i/moremenu, core {{/pix}}

2
message/templates/message_drawer_view_conversation_header_content_type_self.mustache
View File

@ -73,7 +73,7 @@
</div>
</div>
<div class="ms-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-link btn-icon" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">

2
mod/forum/templates/forum_action_menu.mustache
View File

@ -63,7 +63,7 @@
</button>
{{/settingsselector}}
{{^settingsselector}}
<a href="#" class="{{^settings.excludetext}}dropdown-toggle{{/settings.excludetext}} btn btn-link {{#settings.togglemoreicon}}btn-icon colour-inherit text-decoration-none d-flex align-items-center justify-content-center{{/settings.togglemoreicon}}"
<a href="#" class="{{^settings.excludetext}}dropdown-toggle{{/settings.excludetext}} btn btn-link {{#settings.togglemoreicon}}btn-icon colour-inherit text-decoration-none d-flex{{/settings.togglemoreicon}}"
role="button"
data-bs-toggle="dropdown"
data-bs-boundary="window"

2
mod/forum/templates/forum_discussion_nested_v2_first_post.mustache
View File

@ -143,7 +143,7 @@
{{#showactionmenu}}
<div class="dropdown">
<button
class="btn btn-icon text-muted icon-no-margin icon-size-3"
class="btn btn-icon text-muted"
type="button"
id="post-actions-menu-{{id}}-{{uniqid}}"
data-bs-toggle="dropdown"

2
mod/forum/templates/inpage_reply_v2.mustache
View File

@ -96,7 +96,7 @@
</div>
{{/canreplyprivately}}
<button
class="btn btn-icon icon-no-margin icon-size-4 text-muted"
class="btn btn-icon icon-size-4 text-muted"
title="{{#str}} cancelreply, mod_forum {{/str}}"
data-action="cancel-inpage-reply"
>

4
mod/forum/templates/local/grades/local/grader/grading.mustache
View File

@ -41,7 +41,7 @@
<div class="header-container bg-light">
<div class="info-container d-flex align-items-center" data-region="grading-info-container">
<button
class="btn btn-icon icon-size-3 icon-no-margin colour-inherit"
class="btn btn-icon colour-inherit"
data-action="collapse-grading-drawer"
aria-controls="grading-drawer-{{uniqid}}"
aria-expanded="true"
@ -73,7 +73,7 @@
>
<span id="user-search-input-{{uniqid}}-label" class="visually-hidden">{{#str}}searchusers, mod_forum{{/str}}</span>
<button
class="toggle-search-button btn btn-icon icon-no-margin"
class="toggle-search-button btn btn-icon"
aria-expanded="false"
aria-controls="searchbox-{{uniqid}}"
data-action="toggle-search"

4
mod/forum/templates/local/grades/local/grader/navigation.mustache
View File

@ -50,7 +50,7 @@
<div class="ms-1 ms-sm-auto">
<button
class="btn btn-icon icon-no-margin drawer-button me-1 active"
class="btn btn-icon drawer-button me-1 active"
data-action="expand-grading-drawer"
aria-controls="grading-drawer-{{uniqid}}"
aria-expanded="true"
@ -61,7 +61,7 @@
<span class="dir-rtl-hide" aria-hidden="true">{{#pix}} show-grader-panel, mod_forum, {{#str}} showgraderpanel, mod_forum {{/str}} {{/pix}}</span>
</button>
<button
class="btn btn-icon icon-no-margin drawer-button me-1 d-none d-sm-inline-block"
class="btn btn-icon drawer-button me-1 d-none d-sm-inline-block"
aria-label="{{#str}} hidegraderpanel, mod_forum {{/str}}"
data-action="collapse-grading-drawer"
aria-controls="grading-drawer-{{uniqid}}"

2
mod/forum/templates/settings_drawer_trigger.mustache
View File

@ -34,7 +34,7 @@
}}
<button
id="toggle-discussion-settings-drawer-{{uniqid}}"
class="btn btn-icon icon-size-4 icon-no-margin colour-inherit"
class="btn btn-icon icon-size-4 colour-inherit"
aria-controls="discussion-settings-drawer"
aria-expanded="false"
title="{{#str}} togglesettingsdrawer, mod_forum {{/str}}"

2
mod/forum/templates/settings_header.mustache
View File

@ -35,7 +35,7 @@
<div class="d-flex align-items-center mb-2">
<button
class="btn btn-icon icon-size-3 icon-no-margin me-1 colour-inherit"
class="btn btn-icon me-1 colour-inherit"
data-action="toggle-settings-drawer"
aria-controls="discussion-settings-drawer"
aria-expanded="false"

2
mod/lti/classes/reportbuilder/local/systemreports/course_external_tools_list.php
View File

@ -219,7 +219,7 @@ class course_external_tools_list extends system_report {
// Build and display an action menu.
$menu = new \action_menu();
$menu->set_menu_trigger($OUTPUT->pix_icon('i/moremenu', get_string('actions', 'core')),
'btn btn-icon d-flex align-items-center justify-content-center'); // TODO check 'actions' lang string with UX.
'btn btn-icon d-flex'); // TODO check 'actions' lang string with UX.
$menu->add(new \action_menu_link(
new \moodle_url('/mod/lti/coursetooledit.php', ['course' => $row->course, 'typeid' => $row->id]),

2
question/templates/question_banks_list.mustache
View File

@ -59,7 +59,7 @@
],
"triggerattributes": [],
"menutrigger": "<i class=\"icon fa fa-ellipsis-v fa-fw \" title=\"Edit\" role=\"img\" aria-label=\"Edit\"><\/i>",
"triggerextraclasses": "btn btn-icon d-flex align-items-center justify-content-center no-caret ",
"triggerextraclasses": "btn btn-icon d-flex no-caret ",
"triggerrole": "button",
"iconraw": "",
"actiontext": "",

2
question/templates/view_banks.mustache
View File

@ -106,7 +106,7 @@
],
"triggerattributes": [],
"menutrigger": "<i class=\"icon fa fa-ellipsis-v fa-fw \" title=\"Edit\" role=\"img\" aria-label=\"Edit\"><\/i>",
"triggerextraclasses": "btn btn-icon d-flex align-items-center justify-content-center no-caret ",
"triggerextraclasses": "btn btn-icon d-flex no-caret ",
"triggerrole": "button",
"iconraw": "",
"actiontext": "",

12
question/type/ordering/templates/formulation_and_controls.mustache
View File

@ -83,7 +83,7 @@
{{#horizontallayout}}
<button
type="button"
class="dir-rtl-hide btn btn-icon icon-no-margin"
class="dir-rtl-hide btn btn-icon"
data-action="move-backward"
aria-label="{{#cleanstr}}moveleft, qtype_ordering{{/cleanstr}}"
aria-describedby="{{id}}-text"
@ -92,7 +92,7 @@
</button>
<button
type="button"
class="dir-rtl-hide btn btn-icon icon-no-margin"
class="dir-rtl-hide btn btn-icon"
data-action="move-forward"
aria-label="{{#cleanstr}}moveright, qtype_ordering{{/cleanstr}}"
aria-describedby="{{id}}-text"
@ -101,7 +101,7 @@
</button>
<button
type="button"
class="dir-ltr-hide btn btn-icon icon-no-margin"
class="dir-ltr-hide btn btn-icon"
data-action="move-backward"
aria-label="{{#cleanstr}}moveright, qtype_ordering{{/cleanstr}}"
aria-describedby="{{id}}-text"
@ -110,7 +110,7 @@
</button>
<button
type="button"
class="dir-ltr-hide btn btn-icon icon-no-margin"
class="dir-ltr-hide btn btn-icon"
data-action="move-forward"
aria-label="{{#cleanstr}}moveleft, qtype_ordering{{/cleanstr}}"
aria-describedby="{{id}}-text"
@ -121,7 +121,7 @@
{{^horizontallayout}}
<button
type="button"
class="btn btn-icon icon-no-margin"
class="btn btn-icon"
data-action="move-backward"
aria-label="{{#cleanstr}}moveup{{/cleanstr}}"
aria-describedby="{{id}}-text"
@ -130,7 +130,7 @@
</button>
<button
type="button"
class="btn btn-icon icon-no-margin"
class="btn btn-icon"
data-action="move-forward" aria-label="{{#cleanstr}}movedown{{/cleanstr}}"
aria-describedby="{{id}}-text"
>

2
reportbuilder/classes/table/system_report_table.php
View File

@ -261,7 +261,7 @@ class system_report_table extends base_report_table {
$menu = new action_menu();
$menu->set_menu_trigger(
$OUTPUT->pix_icon('i/menu', get_string('actions', 'core_reportbuilder')),
'btn btn-icon d-flex align-items-center justify-content-center no-caret',
'btn btn-icon d-flex no-caret',
);
$actions = array_filter($this->report->get_actions(), function($action) use ($row) {

6
theme/boost/scss/moodle/blocks.scss
View File

@ -148,12 +148,6 @@ $blocks-plus-gutter: calc(#{$blocks-column-width} + (#{$grid-gutter-width} * 0.5
.multiline {
white-space: normal;
}
.btn.btn-link.btn-icon {
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
}
}
.card-grid {
display: flex;

36
theme/boost/scss/moodle/buttons.scss
View File

@ -38,32 +38,32 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
.btn.btn-icon {
height: ($icon-height + 20px);
width: ($icon-width + 16px);
font-size: $icon-height;
line-height: $icon-height;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
&:hover,
&:focus {
background-color: $gray-200;
.btn-icon {
--#{$prefix}btn-hover-bg: var(--#{$prefix}secondary-bg);
--#{$prefix}btn-border-radius: #{$btn-icon-border-radius};
--#{$prefix}btn-padding-x: 0;
--#{$prefix}btn-padding-y: 0;
--#{$prefix}btn-font-size: #{$icon-height};
height: calc(#{$icon-height} + 1rem);
width: calc(#{$icon-height} + 1rem);
display: inline-flex;
align-items: center;
justify-content: center;
.icon {
margin: 0;
}
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
font-size: $length !important; /* stylelint-disable-line declaration-no-important */
line-height: $length !important; /* stylelint-disable-line declaration-no-important */
height: calc(#{$length} + 1rem);
width: calc(#{$length} + 1rem);
--#{$prefix}btn-font-size: #{$length};
--#{$prefix}btn-line-height: #{$length};
}
}
}
// Specific styles for the collapse/expand buttons.
.btn.btn-icon.icons-collapse-expand {
.btn-icon.icons-collapse-expand {
color: $primary;
background-color: $primary-light-background;
&:hover {

13
theme/boost/scss/moodle/course.scss
View File

@ -170,14 +170,9 @@ $divider-hover-color: $primary !default;
}
}
// Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
.action-menu {
.btn.btn-icon {
height: map-get($iconsizes, 5);
width: map-get($iconsizes, 5);
@include border-radius();
}
&.section-actions .btn.btn-icon {
// Override '.btn-icon' styles from buttons.scss to make section action menu icons bigger.
.section_action_menu > .action-menu {
.btn-icon {
font-size: $font-size-lg;
}
}
@ -776,7 +771,7 @@ $divider-hover-color: $primary !default;
h4 {
font-size: $h5-font-size;
}
.section-actions .btn.btn-icon {
.section_action_menu > .action-menu .btn-icon {
font-size: inherit;
}
}

2
theme/boost/scss/moodle/icons.scss
View File

@ -157,6 +157,8 @@ img.icon {
.icon {
height: $length !important; /* stylelint-disable-line declaration-no-important */
width: map-get($iconwidthsizes, $size) !important; /* stylelint-disable-line declaration-no-important */
max-height: $length !important; /* stylelint-disable-line declaration-no-important */
max-width: map-get($iconwidthsizes, $size) !important; /* stylelint-disable-line declaration-no-important */
font-size: $length !important; /* stylelint-disable-line declaration-no-important */
}
}

15
theme/boost/scss/moodle/message.scss
View File

@ -498,21 +498,6 @@ $message-day-color: color-contrast($message-app-bg) !default;
}
}
.btn.btn-link.btn-icon {
height: $icon-height;
width: $icon-width;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
}
}
}
.view-overview-body {
.section {
display: block;

5
theme/boost/scss/moodle/reportbuilder.scss
View File

@ -26,11 +26,6 @@
}
.action-menu .menubar {
justify-content: end;
.btn.btn-icon {
height: $icon-medium-height;
width: $icon-medium-width;
@include border-radius();
}
}
}

2
theme/boost/scss/moodle/variables.scss
View File

@ -32,6 +32,8 @@ $box-shadow-drawer-right: 0 .25rem .8rem rgba($black, .025) !default;
$moremenu-height: 60px !default;
$btn-icon-border-radius: $btn-border-radius !default;
$primary-light-background: shift-color($primary, -90%) !default;
$primary-light-border: shift-color($primary, -20%) !default;
$primary-light-color: $body-color;

182
theme/boost/style/moodle.css
View File

@ -28765,48 +28765,64 @@ img.icon {
.icon-size-0 .icon {
height: 0 !important; /* stylelint-disable-line declaration-no-important */
width: 0 !important; /* stylelint-disable-line declaration-no-important */
max-height: 0 !important; /* stylelint-disable-line declaration-no-important */
max-width: 0 !important; /* stylelint-disable-line declaration-no-important */
font-size: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-1 .icon {
height: 4px !important; /* stylelint-disable-line declaration-no-important */
width: 5px !important; /* stylelint-disable-line declaration-no-important */
max-height: 4px !important; /* stylelint-disable-line declaration-no-important */
max-width: 5px !important; /* stylelint-disable-line declaration-no-important */
font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-2 .icon {
height: 8px !important; /* stylelint-disable-line declaration-no-important */
width: 10px !important; /* stylelint-disable-line declaration-no-important */
max-height: 8px !important; /* stylelint-disable-line declaration-no-important */
max-width: 10px !important; /* stylelint-disable-line declaration-no-important */
font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-3 .icon {
height: 16px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
max-height: 16px !important; /* stylelint-disable-line declaration-no-important */
max-width: 20px !important; /* stylelint-disable-line declaration-no-important */
font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-4 .icon {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
max-height: 24px !important; /* stylelint-disable-line declaration-no-important */
max-width: 30px !important; /* stylelint-disable-line declaration-no-important */
font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-5 .icon {
height: 32px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
max-height: 32px !important; /* stylelint-disable-line declaration-no-important */
max-width: 40px !important; /* stylelint-disable-line declaration-no-important */
font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-6 .icon {
height: 40px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
max-height: 40px !important; /* stylelint-disable-line declaration-no-important */
max-width: 50px !important; /* stylelint-disable-line declaration-no-important */
font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-7 .icon {
height: 48px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
max-height: 48px !important; /* stylelint-disable-line declaration-no-important */
max-width: 60px !important; /* stylelint-disable-line declaration-no-important */
font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
}
@ -29671,12 +29687,6 @@ img.icon {
.block .block-cards .multiline {
white-space: normal;
}
.block .block-cards .btn.btn-link.btn-icon {
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
}
.card-grid {
display: flex;
@ -30689,12 +30699,7 @@ table.calendartable caption {
font-size: inherit;
margin-right: 0.25rem;
}
.course-section .action-menu .btn.btn-icon {
height: 32px;
width: 32px;
border-radius: 0.5rem;
}
.course-section .action-menu.section-actions .btn.btn-icon {
.course-section .section_action_menu > .action-menu .btn-icon {
font-size: 1.171875rem;
}
.course-section .section-summary-activities .icon {
@ -31186,7 +31191,7 @@ table.calendartable caption {
.activity.subsection .section h4, .activity.subsection .section .h4 {
font-size: 1.171875rem;
}
.activity.subsection .section .section-actions .btn.btn-icon {
.activity.subsection .section .section_action_menu > .action-menu .btn-icon {
font-size: inherit;
}
.activity.subsection + .activity {
@ -33555,45 +33560,6 @@ a.ygtvspacer:hover {
.message-app .overview-section-toggle.collapsed .expanded-icon-container {
display: none;
}
.message-app .btn.btn-link.btn-icon {
height: 16px;
width: 20px;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
}
.message-app .btn.btn-link.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-1 {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 25px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-2 {
height: 28px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-3 {
height: 36px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-4 {
height: 44px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-5 {
height: 52px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-6 {
height: 60px !important; /* stylelint-disable-line declaration-no-important */
width: 70px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-7 {
height: 68px !important; /* stylelint-disable-line declaration-no-important */
width: 80px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .view-overview-body .section {
display: block;
}
@ -37194,72 +37160,75 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
.btn.btn-icon {
height: 36px;
width: 36px;
font-size: 16px;
line-height: 16px;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
.btn-icon {
--bs-btn-hover-bg: var(--bs-secondary-bg);
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-padding-x: 0;
--bs-btn-padding-y: 0;
--bs-btn-font-size: 16px;
height: calc(16px + 1rem);
width: calc(16px + 1rem);
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.btn-icon:hover, .btn.btn-icon:focus {
background-color: #e9ecef;
.btn-icon .icon {
margin: 0;
}
.btn.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
font-size: 0 !important; /* stylelint-disable-line declaration-no-important */
line-height: 0 !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-0 {
height: calc(0 + 1rem);
width: calc(0 + 1rem);
--bs-btn-font-size: 0;
--bs-btn-line-height: 0;
}
.btn.btn-icon.icon-size-1 {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 25px !important; /* stylelint-disable-line declaration-no-important */
font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
line-height: 4px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-1 {
height: calc(4px + 1rem);
width: calc(4px + 1rem);
--bs-btn-font-size: 4px;
--bs-btn-line-height: 4px;
}
.btn.btn-icon.icon-size-2 {
height: 28px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
line-height: 8px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-2 {
height: calc(8px + 1rem);
width: calc(8px + 1rem);
--bs-btn-font-size: 8px;
--bs-btn-line-height: 8px;
}
.btn.btn-icon.icon-size-3 {
height: 36px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
line-height: 16px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-3 {
height: calc(16px + 1rem);
width: calc(16px + 1rem);
--bs-btn-font-size: 16px;
--bs-btn-line-height: 16px;
}
.btn.btn-icon.icon-size-4 {
height: 44px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
line-height: 24px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-4 {
height: calc(24px + 1rem);
width: calc(24px + 1rem);
--bs-btn-font-size: 24px;
--bs-btn-line-height: 24px;
}
.btn.btn-icon.icon-size-5 {
height: 52px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
line-height: 32px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-5 {
height: calc(32px + 1rem);
width: calc(32px + 1rem);
--bs-btn-font-size: 32px;
--bs-btn-line-height: 32px;
}
.btn.btn-icon.icon-size-6 {
height: 60px !important; /* stylelint-disable-line declaration-no-important */
width: 70px !important; /* stylelint-disable-line declaration-no-important */
font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
line-height: 40px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-6 {
height: calc(40px + 1rem);
width: calc(40px + 1rem);
--bs-btn-font-size: 40px;
--bs-btn-line-height: 40px;
}
.btn.btn-icon.icon-size-7 {
height: 68px !important; /* stylelint-disable-line declaration-no-important */
width: 80px !important; /* stylelint-disable-line declaration-no-important */
font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-7 {
height: calc(48px + 1rem);
width: calc(48px + 1rem);
--bs-btn-font-size: 48px;
--bs-btn-line-height: 48px;
}
.btn.btn-icon.icons-collapse-expand {
.btn-icon.icons-collapse-expand {
color: #0f6cbf;
background-color: #e7f0f9;
}
.btn.btn-icon.icons-collapse-expand:hover {
.btn-icon.icons-collapse-expand:hover {
outline: 2px solid #0f6cbf;
}
@ -39820,11 +39789,6 @@ div.editor_atto_toolbar button .icon {
.reportbuilder-table .action-menu .menubar {
justify-content: end;
}
.reportbuilder-table .action-menu .menubar .btn.btn-icon {
height: 32px;
width: 40px;
border-radius: 0.5rem;
}
.reportbuilder-wrapper .filters-dropdown {
width: 27rem;

2
theme/boost/templates/courseindexdrawercontrols.mustache
View File

@ -24,7 +24,7 @@
}
}}
<div id="courseindexdrawercontrols" class="dropdown">
<button class="btn btn-icon rounded-circle mx-2"
<button class="btn btn-icon mx-2"
type="button"
data-bs-toggle="dropdown"
aria-haspopup="true"

2
theme/boost/templates/drawer.mustache
View File

@ -37,7 +37,7 @@
}}>
<div class="drawerheader">
<button
class="btn drawertoggle icon-no-margin hidden"
class="btn btn-icon drawertoggle hidden"
data-toggler="drawers"
data-action="closedrawer"
data-target="{{$id}}{{/id}}"

2
theme/boost/templates/footer.mustache
View File

@ -42,7 +42,7 @@
{{#pix}}t/messages-o, core{{/pix}}
</button>
{{/output.has_communication_links}}
<button class="btn btn-icon bg-secondary icon-no-margin btn-footer-popover" data-action="footer-popover" aria-label="{{#str}}showfooter, theme_boost{{/str}}">
<button class="btn btn-icon rounded-circle bg-secondary btn-footer-popover" data-action="footer-popover" aria-label="{{#str}}showfooter, theme_boost{{/str}}">
{{#pix}}e/question, core{{/pix}}
</button>
</div>

182
theme/classic/style/moodle.css
View File

@ -28771,48 +28771,64 @@ img.icon {
.icon-size-0 .icon {
height: 0 !important; /* stylelint-disable-line declaration-no-important */
width: 0 !important; /* stylelint-disable-line declaration-no-important */
max-height: 0 !important; /* stylelint-disable-line declaration-no-important */
max-width: 0 !important; /* stylelint-disable-line declaration-no-important */
font-size: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-1 .icon {
height: 4px !important; /* stylelint-disable-line declaration-no-important */
width: 5px !important; /* stylelint-disable-line declaration-no-important */
max-height: 4px !important; /* stylelint-disable-line declaration-no-important */
max-width: 5px !important; /* stylelint-disable-line declaration-no-important */
font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-2 .icon {
height: 8px !important; /* stylelint-disable-line declaration-no-important */
width: 10px !important; /* stylelint-disable-line declaration-no-important */
max-height: 8px !important; /* stylelint-disable-line declaration-no-important */
max-width: 10px !important; /* stylelint-disable-line declaration-no-important */
font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-3 .icon {
height: 16px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
max-height: 16px !important; /* stylelint-disable-line declaration-no-important */
max-width: 20px !important; /* stylelint-disable-line declaration-no-important */
font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-4 .icon {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
max-height: 24px !important; /* stylelint-disable-line declaration-no-important */
max-width: 30px !important; /* stylelint-disable-line declaration-no-important */
font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-5 .icon {
height: 32px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
max-height: 32px !important; /* stylelint-disable-line declaration-no-important */
max-width: 40px !important; /* stylelint-disable-line declaration-no-important */
font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-6 .icon {
height: 40px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
max-height: 40px !important; /* stylelint-disable-line declaration-no-important */
max-width: 50px !important; /* stylelint-disable-line declaration-no-important */
font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
}
.icon-size-7 .icon {
height: 48px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
max-height: 48px !important; /* stylelint-disable-line declaration-no-important */
max-width: 60px !important; /* stylelint-disable-line declaration-no-important */
font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
}
@ -29677,12 +29693,6 @@ img.icon {
.block .block-cards .multiline {
white-space: normal;
}
.block .block-cards .btn.btn-link.btn-icon {
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
}
.card-grid {
display: flex;
@ -30695,12 +30705,7 @@ table.calendartable caption {
font-size: inherit;
margin-right: 0.25rem;
}
.course-section .action-menu .btn.btn-icon {
height: 32px;
width: 32px;
border-radius: 0.375rem;
}
.course-section .action-menu.section-actions .btn.btn-icon {
.course-section .section_action_menu > .action-menu .btn-icon {
font-size: 1.171875rem;
}
.course-section .section-summary-activities .icon {
@ -31192,7 +31197,7 @@ table.calendartable caption {
.activity.subsection .section h4, .activity.subsection .section .h4 {
font-size: 1.171875rem;
}
.activity.subsection .section .section-actions .btn.btn-icon {
.activity.subsection .section .section_action_menu > .action-menu .btn-icon {
font-size: inherit;
}
.activity.subsection + .activity {
@ -33561,45 +33566,6 @@ a.ygtvspacer:hover {
.message-app .overview-section-toggle.collapsed .expanded-icon-container {
display: none;
}
.message-app .btn.btn-link.btn-icon {
height: 16px;
width: 20px;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
}
.message-app .btn.btn-link.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-1 {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 25px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-2 {
height: 28px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-3 {
height: 36px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-4 {
height: 44px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-5 {
height: 52px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-6 {
height: 60px !important; /* stylelint-disable-line declaration-no-important */
width: 70px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .btn.btn-link.btn-icon.icon-size-7 {
height: 68px !important; /* stylelint-disable-line declaration-no-important */
width: 80px !important; /* stylelint-disable-line declaration-no-important */
}
.message-app .view-overview-body .section {
display: block;
}
@ -37200,72 +37166,75 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
.btn.btn-icon {
height: 36px;
width: 36px;
font-size: 16px;
line-height: 16px;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
.btn-icon {
--bs-btn-hover-bg: var(--bs-secondary-bg);
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-padding-x: 0;
--bs-btn-padding-y: 0;
--bs-btn-font-size: 16px;
height: calc(16px + 1rem);
width: calc(16px + 1rem);
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.btn-icon:hover, .btn.btn-icon:focus {
background-color: #e9ecef;
.btn-icon .icon {
margin: 0;
}
.btn.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
font-size: 0 !important; /* stylelint-disable-line declaration-no-important */
line-height: 0 !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-0 {
height: calc(0 + 1rem);
width: calc(0 + 1rem);
--bs-btn-font-size: 0;
--bs-btn-line-height: 0;
}
.btn.btn-icon.icon-size-1 {
height: 24px !important; /* stylelint-disable-line declaration-no-important */
width: 25px !important; /* stylelint-disable-line declaration-no-important */
font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
line-height: 4px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-1 {
height: calc(4px + 1rem);
width: calc(4px + 1rem);
--bs-btn-font-size: 4px;
--bs-btn-line-height: 4px;
}
.btn.btn-icon.icon-size-2 {
height: 28px !important; /* stylelint-disable-line declaration-no-important */
width: 30px !important; /* stylelint-disable-line declaration-no-important */
font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
line-height: 8px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-2 {
height: calc(8px + 1rem);
width: calc(8px + 1rem);
--bs-btn-font-size: 8px;
--bs-btn-line-height: 8px;
}
.btn.btn-icon.icon-size-3 {
height: 36px !important; /* stylelint-disable-line declaration-no-important */
width: 40px !important; /* stylelint-disable-line declaration-no-important */
font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
line-height: 16px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-3 {
height: calc(16px + 1rem);
width: calc(16px + 1rem);
--bs-btn-font-size: 16px;
--bs-btn-line-height: 16px;
}
.btn.btn-icon.icon-size-4 {
height: 44px !important; /* stylelint-disable-line declaration-no-important */
width: 50px !important; /* stylelint-disable-line declaration-no-important */
font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
line-height: 24px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-4 {
height: calc(24px + 1rem);
width: calc(24px + 1rem);
--bs-btn-font-size: 24px;
--bs-btn-line-height: 24px;
}
.btn.btn-icon.icon-size-5 {
height: 52px !important; /* stylelint-disable-line declaration-no-important */
width: 60px !important; /* stylelint-disable-line declaration-no-important */
font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
line-height: 32px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-5 {
height: calc(32px + 1rem);
width: calc(32px + 1rem);
--bs-btn-font-size: 32px;
--bs-btn-line-height: 32px;
}
.btn.btn-icon.icon-size-6 {
height: 60px !important; /* stylelint-disable-line declaration-no-important */
width: 70px !important; /* stylelint-disable-line declaration-no-important */
font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
line-height: 40px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-6 {
height: calc(40px + 1rem);
width: calc(40px + 1rem);
--bs-btn-font-size: 40px;
--bs-btn-line-height: 40px;
}
.btn.btn-icon.icon-size-7 {
height: 68px !important; /* stylelint-disable-line declaration-no-important */
width: 80px !important; /* stylelint-disable-line declaration-no-important */
font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
.btn-icon.icon-size-7 {
height: calc(48px + 1rem);
width: calc(48px + 1rem);
--bs-btn-font-size: 48px;
--bs-btn-line-height: 48px;
}
.btn.btn-icon.icons-collapse-expand {
.btn-icon.icons-collapse-expand {
color: #0f6cbf;
background-color: #e7f0f9;
}
.btn.btn-icon.icons-collapse-expand:hover {
.btn-icon.icons-collapse-expand:hover {
outline: 2px solid #0f6cbf;
}
@ -39760,11 +39729,6 @@ div.editor_atto_toolbar button .icon {
.reportbuilder-table .action-menu .menubar {
justify-content: end;
}
.reportbuilder-table .action-menu .menubar .btn.btn-icon {
height: 32px;
width: 40px;
border-radius: 0.375rem;
}
.reportbuilder-wrapper .filters-dropdown {
width: 27rem;