From 93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 13 Jun 2022 10:14:03 +0200 Subject: Replace all glyphicon icons --- client/src/sass/application.scss | 26 +++--- client/src/sass/bootstrap.scss | 4 - client/src/sass/include/_icons.scss | 58 ++++++++++++++ client/src/sass/include/_mixins.scss | 39 --------- client/src/sass/player/settings-menu.scss | 1 + client/src/sass/primeng-custom.scss | 126 ++++++++++++++---------------- 6 files changed, 136 insertions(+), 118 deletions(-) create mode 100644 client/src/sass/include/_icons.scss (limited to 'client/src/sass') diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2ad1af23a..2aa743cf1 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,19 +1,15 @@ -$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; - @use 'sass:math'; @use '_variables' as *; @use '_mixins' as *; +@use '_icons' as *; @use '_fonts'; @use './classes'; - @use './custom-markup'; - @use './ng-select'; -// Needs an import because we extends glyphicon icons in primeng @import './bootstrap'; @import './primeng-custom'; @@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] { } .chevron-down { - @include chevron-down(0.55rem, 0.20em); + @include chevron-down(0.55rem, 0.15rem); - margin: 0 5px; + margin: 0 8px; } .chevron-up { - @include chevron-up(0.55rem, 0.20em); + @include chevron-up(0.55rem, 0.15rem); + + margin: 0 8px; +} + +.chevron-right { + @include chevron-right(0.55rem, 0.15rem); + + margin: 0 8px; +} + +.chevron-left { + @include chevron-left(0.55rem, 0.15rem); - margin: 0 5px; + margin: 0 8px; } /* offsetTop for scrollToAnchor */ diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 03b2e8b15..4d2fcf5b3 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,5 +1,3 @@ -$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; - @use '_variables' as *; @use '_mixins' as *; @@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; @import '~bootstrap/scss/helpers'; @import '~bootstrap/scss/utilities/api'; -@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; - .flex-auto { flex: auto; } diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss new file mode 100644 index 000000000..5d8a312db --- /dev/null +++ b/client/src/sass/include/_icons.scss @@ -0,0 +1,58 @@ +@use '_variables' as *; + +@mixin chevron ($size, $border-width) { + border-style: solid; + border-width: $border-width $border-width 0 0; + content: ''; + display: inline-block; + transform: rotate(-45deg); + height: $size; + width: $size; + position: relative; +} + +@mixin chevron-right ($size, $border-width) { + @include chevron($size, $border-width); + + left: 0; + transform: rotate(45deg); +} + +@mixin chevron-down ($size, $border-width) { + @include chevron($size, $border-width); + + bottom: 0.15em; + transform: rotate(135deg); +} + +@mixin chevron-up ($size, $border-width) { + @include chevron($size, $border-width); + + top: 0.15em; + transform: rotate(-45deg); +} + +@mixin chevron-left ($size, $border-width) { + @include chevron($size, $border-width); + + left: 0.25em; + transform: rotate(-135deg); +} + +// --------------------------------------------------------------------------- + +@mixin arrow-up ($size) { + width: 0; + height: 0; + border-left: $size solid transparent; + border-right: $size solid transparent; + border-bottom: $size solid pvar(--mainForegroundColor); +} + +@mixin arrow-down ($size) { + width: 0; + height: 0; + border-left: $size solid transparent; + border-right: $size solid transparent; + border-top: $size solid pvar(--mainForegroundColor); +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index da216b00f..22c3b2a2f 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -562,45 +562,6 @@ } } -@mixin chevron ($size, $border-width) { - border-style: solid; - border-width: $border-width $border-width 0 0; - content: ''; - display: inline-block; - transform: rotate(-45deg); - height: $size; - width: $size; - position: relative; -} - -@mixin chevron-right ($size, $border-width) { - @include chevron($size, $border-width); - - left: 0; - transform: rotate(45deg); -} - -@mixin chevron-down ($size, $border-width) { - @include chevron($size, $border-width); - - bottom: 0.15em; - transform: rotate(135deg); -} - -@mixin chevron-up ($size, $border-width) { - @include chevron($size, $border-width); - - top: 0.15em; - transform: rotate(-45deg); -} - -@mixin chevron-left ($size, $border-width) { - @include chevron($size, $border-width); - - left: 0.25em; - transform: rotate(-135deg); -} - @mixin in-content-small-title { text-transform: uppercase; color: pvar(--mainColor); diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 8aa2c2ac3..d2346c126 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -1,5 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; +@use '_icons' as *; @use './_player-variables' as *; $setting-transition-duration: 0.15s; diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index ef117ae34..f5d7c7b00 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -1,5 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; +@use '_icons' as *; /* stylelint-disable */ @import '~primeng/resources/primeng.css'; @@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button { border: 1px solid #a80000; } -// data table customizations - -@mixin glyphicon-light { - font-family: 'Glyphicons Halflings'; - text-decoration: none !important; - color: pvar(--mainForegroundColor) !important; - font-display: swap; -} +// --------------------------------------------------------------------------- +// PeerTube customizations +// --------------------------------------------------------------------------- p-table { .p-datatable-header { @@ -618,24 +614,20 @@ p-table { &.p-highlight { background-color: pvar(--submenuBackgroundColor) !important; - .pi { - @extend .glyphicon !optional; - - color: #000 !important; - font-size: 11px !important; - top: 0 !important; - - &.pi-sort-amount-up-alt { - @extend .glyphicon-triangle-top !optional; - - color: pvar(--mainForegroundColor) !important; - } + .pi-sort-amount-up-alt, + .pi-sort-amount-down { + display: inline-block; + position: relative; + top: -1px; + color: pvar(--mainForegroundColor) !important; + } - &.pi-sort-amount-down { - @extend .glyphicon-triangle-bottom !optional; + .pi-sort-amount-up-alt { + @include arrow-up(5px); + } - color: pvar(--mainForegroundColor) !important; - } + .pi-sort-amount-down { + @include arrow-down(5px); } } } @@ -693,12 +685,10 @@ p-table { .p-paginator-prev, .p-paginator-next, .p-paginator-last { - @include glyphicon-light; padding: 5px 2px; - height: auto; + height: 100%; outline: none; - font-size: 13px; - top: -1px; + color: pvar(--mainForegroundColor); &.focus-within, &:focus { @@ -710,23 +700,37 @@ p-table { } &.p-paginator-first { - @extend .glyphicon-step-backward !optional; + .p-paginator-icon { + width: 18px; + height: 18px; + background: url('../assets/images/feather/skip-back.svg') no-repeat; + background-size: contain; + } } &.p-paginator-prev { - @extend .glyphicon-chevron-left !optional; + .p-paginator-icon { + @extend .chevron-left !optional; + } @include margin-right(10px); } &.p-paginator-next { - @extend .glyphicon-chevron-right !optional; + .p-paginator-icon { + @extend .chevron-right !optional; + } @include margin-left(10px); } &.p-paginator-last { - @extend .glyphicon-step-forward !optional; + .p-paginator-icon { + width: 18px; + height: 18px; + background: url('../assets/images/feather/skip-forward.svg') no-repeat; + background-size: contain; + } } } @@ -810,8 +814,7 @@ p-calendar .p-datepicker { } .p-datepicker-next { - @extend .glyphicon-chevron-right !optional; - @include glyphicon-light; + @extend .chevron-right !optional; color: #000 !important; text-align: end; @@ -822,8 +825,7 @@ p-calendar .p-datepicker { } .p-datepicker-prev { - @extend .glyphicon-chevron-left !optional; - @include glyphicon-light; + @extend .chevron-left !optional; color: #000 !important; text-align: start; @@ -837,15 +839,13 @@ p-calendar .p-datepicker { .p-timepicker { .pi.pi-chevron-up { - @extend .glyphicon-chevron-up !optional; - @include glyphicon-light; + @extend .chevron-up !optional; color: #000 !important; } .pi.pi-chevron-down { - @extend .glyphicon-chevron-down !optional; - @include glyphicon-light; + @extend .chevron-down !optional; color: #000 !important; } @@ -901,15 +901,14 @@ p-toast { min-width: 200px; .p-toast-icon-close { - font-family: "Glyphicons Halflings"; opacity: 0; position: absolute; right: 5px; top: 5px; - - &:after { - content: "\e014"; - } + width: 18px; + height: 18px; + background: url('../assets/images/feather/x.svg') no-repeat; + background-size: contain; } &:hover .p-toast-icon-close { @@ -927,22 +926,6 @@ p-toast { box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1); overflow: hidden; - &.p-toast-message-success my-global-icon { - color: #8BC34A !important; - } - - &.p-toast-message-error my-global-icon { - color: #F44336 !important; - } - - &.p-toast-message-warn my-global-icon { - color: #F1680D !important; - } - - &.p-toast-message-info my-global-icon { - color: #03A9F4 !important; - } - .notification-block { display: flex; align-items: center; @@ -962,13 +945,24 @@ p-toast { margin-bottom: 0; } } - - .glyphicon { - font-size: 32px; - @include margin-right(5px); - } } } + + .p-toast-message-success my-global-icon { + color: #8BC34A !important; + } + + .p-toast-message-error my-global-icon { + color: #F44336 !important; + } + + .p-toast-message-warn my-global-icon { + color: #F1680D !important; + } + + .p-toast-message-info my-global-icon { + color: #03A9F4 !important; + } } .p-selectbutton { -- cgit v1.2.3