mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-12 16:35:45 +01:00
Add experimental high contrast mode (#1845)
Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility. The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.
This commit is contained in:
Sebastian Sdorra
GitHub
830
scm-ui/ui-styles/src/components/_main.scss
Normal file
830
scm-ui/ui-styles/src/components/_main.scss
Normal file
@@ -0,0 +1,830 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
// TODO split into multiple files
|
||||
|
||||
.is-ellipsis-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-word-break {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.has-rounded-border {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.is-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fitParent {
|
||||
// TODO get rid of important
|
||||
margin: 0 !important;
|
||||
// 3.8em for line-numbers
|
||||
padding: 0 0 0 3.8em !important;
|
||||
}
|
||||
|
||||
// shown in top section when pageactions set
|
||||
hr.header-with-actions {
|
||||
margin-top: -10px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.is-mobile-action-spacing {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: flow-root !important;
|
||||
|
||||
.input-field {
|
||||
padding: 0;
|
||||
margin: 0 0 1.25rem 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
.input-button {
|
||||
// TODO color def
|
||||
border: 2px solid #e9f7fd;
|
||||
padding: 1em 1em;
|
||||
margin-top: 0 !important;
|
||||
width: 100%;
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
background-color: $white-ter;
|
||||
padding: inherit;
|
||||
|
||||
a {
|
||||
color: darken($info, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.has-hover-background-blue:hover {
|
||||
background-color: scale-color($blue, $alpha: -90%);
|
||||
}
|
||||
|
||||
// readability issues with original color
|
||||
.has-text-warning {
|
||||
// TODO color def
|
||||
color: #ffb600 !important;
|
||||
}
|
||||
.has-text-warning-invert {
|
||||
color: $warning-invert;
|
||||
}
|
||||
|
||||
.has-text-blue-light {
|
||||
color: $blue-light;
|
||||
}
|
||||
.has-background-blue-light {
|
||||
background-color: $blue-light;
|
||||
}
|
||||
|
||||
// TODO
|
||||
/*
|
||||
.has-text-high-contrast-warning {
|
||||
color: $warning;
|
||||
}
|
||||
.has-text-high-contrast-danger{
|
||||
color: $high-contrast-danger-50;
|
||||
}
|
||||
.has-text-high-contrast-light-gray {
|
||||
color: $high-contrast-light-gray;
|
||||
}*/
|
||||
|
||||
|
||||
// border and background colors
|
||||
.has-background-dark-75 {
|
||||
background-color: $dark-75;
|
||||
}
|
||||
.has-background-dark-50 {
|
||||
background-color: $dark-50;
|
||||
}
|
||||
.has-background-dark-25 {
|
||||
background-color: $dark-25;
|
||||
}
|
||||
.has-background-info-75 {
|
||||
background-color: $info-75;
|
||||
}
|
||||
.has-background-info-50 {
|
||||
background-color: $info-50;
|
||||
}
|
||||
.has-background-info-25 {
|
||||
background-color: $info-25;
|
||||
}
|
||||
.has-background-link-75 {
|
||||
background-color: $link-75;
|
||||
}
|
||||
.has-background-link-50 {
|
||||
background-color: $link-50;
|
||||
}
|
||||
.has-background-link-25 {
|
||||
background-color: $link-25;
|
||||
}
|
||||
.has-background-primary-75 {
|
||||
background-color: $primary-75;
|
||||
}
|
||||
.has-background-primary-50 {
|
||||
background-color: $primary-50;
|
||||
}
|
||||
.has-background-primary-25 {
|
||||
background-color: $primary-25;
|
||||
}
|
||||
.has-background-success-75 {
|
||||
background-color: $success-75;
|
||||
}
|
||||
.has-background-success-50 {
|
||||
background-color: $success-50;
|
||||
}
|
||||
.has-background-success-25 {
|
||||
background-color: $success-25;
|
||||
}
|
||||
.has-background-warning-75 {
|
||||
background-color: $warning-75;
|
||||
}
|
||||
.has-background-warning-50 {
|
||||
background-color: $warning-50;
|
||||
}
|
||||
.has-background-warning-25 {
|
||||
background-color: $warning-25;
|
||||
}
|
||||
.has-background-danger-75 {
|
||||
background-color: $danger-75;
|
||||
}
|
||||
.has-background-danger-50 {
|
||||
background-color: $danger-50;
|
||||
}
|
||||
.has-background-danger-25 {
|
||||
background-color: $danger-25;
|
||||
}
|
||||
|
||||
// TODO
|
||||
/*.has-background-danger-high-contrast {
|
||||
background-color: $high-contrast-danger;
|
||||
}
|
||||
.has-background-danger-high-contrast-75 {
|
||||
background-color: $high-contrast-danger-75;
|
||||
}
|
||||
.has-background-danger-high-contrast-50 {
|
||||
background-color: $high-contrast-danger-50;
|
||||
}
|
||||
.has-background-danger-high-contrast-25 {
|
||||
background-color: $high-contrast-danger-25;
|
||||
}
|
||||
|
||||
.has-background-high-contrast-light-gray {
|
||||
background-color: $high-contrast-light-gray;
|
||||
}
|
||||
.has-background-high-contrast-light-gray-75 {
|
||||
background-color: $light-75;
|
||||
}
|
||||
.has-background-high-contrast-light-gray-50 {
|
||||
background-color: $light-50;
|
||||
}
|
||||
.has-background-high-contrast-light-gray-25 {
|
||||
background-color: $light-25;
|
||||
}*/
|
||||
|
||||
// tags
|
||||
.tag:not(body) {
|
||||
border: 1px solid transparent;
|
||||
background-color: $white;
|
||||
|
||||
&.is-delete {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
+ .is-delete {
|
||||
border-color: #aaa;
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
background-color: $white;
|
||||
}
|
||||
&.is-black.is-outlined {
|
||||
color: $black;
|
||||
border-color: $black;
|
||||
}
|
||||
&.is-dark.is-outlined {
|
||||
color: $dark;
|
||||
border-color: $dark;
|
||||
}
|
||||
&.is-light.is-outlined {
|
||||
color: $light;
|
||||
border-color: $light;
|
||||
}
|
||||
&.is-white.is-outlined {
|
||||
color: $white;
|
||||
border-color: $white;
|
||||
}
|
||||
&.is-primary.is-outlined {
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
&.is-link.is-outlined {
|
||||
color: $link;
|
||||
border-color: $link;
|
||||
}
|
||||
&.is-info.is-outlined {
|
||||
color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
&.is-success.is-outlined {
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
&.is-warning.is-outlined {
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
&.is-danger.is-outlined {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
.button {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
height: 2.5rem;
|
||||
font-weight: $weight-semibold;
|
||||
|
||||
&.is-primary,
|
||||
&.is-info,
|
||||
&.is-link,
|
||||
&.is-success,
|
||||
&.is-warning,
|
||||
&.is-danger {
|
||||
&.is-outlined {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary:hover,
|
||||
&.is-primary.is-hovered {
|
||||
background-color: scale-color($primary, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-primary:active,
|
||||
&.is-primary.is-active {
|
||||
background-color: scale-color($primary, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-info:hover,
|
||||
&.is-info.is-hovered {
|
||||
background-color: scale-color($info, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-info:active,
|
||||
&.is-info.is-active {
|
||||
background-color: scale-color($info, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-link:hover,
|
||||
&.is-link.is-hovered {
|
||||
background-color: scale-color($link, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-link:active,
|
||||
&.is-link.is-active {
|
||||
background-color: scale-color($link, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-success:hover,
|
||||
&.is-success.is-hovered {
|
||||
background-color: scale-color($success, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-success:active,
|
||||
&.is-success.is-active {
|
||||
background-color: scale-color($success, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-warning:hover,
|
||||
&.is-warning.is-hovered {
|
||||
background-color: scale-color($warning, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-warning:active,
|
||||
&.is-warning.is-active {
|
||||
background-color: scale-color($warning, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-danger:hover,
|
||||
&.is-danger.is-hovered {
|
||||
background-color: scale-color($danger, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.is-danger:active,
|
||||
&.is-danger.is-active {
|
||||
background-color: scale-color($danger, $lightness: -20%);
|
||||
}
|
||||
|
||||
&.is-reduced-mobile,
|
||||
&.reduced-mobile {
|
||||
@media screen and (max-width: 1087px) {
|
||||
> span:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1087px) and (min-width: 769px) {
|
||||
// simultaneously with left margin of Bulma
|
||||
> .icon:first-child:not(:last-child) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
// simultaneously with left margin of Bulma
|
||||
.icon:first-child:not(:last-child) {
|
||||
margin-right: calc(-0.375em - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-link-shadow {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $box-link-hover-shadow;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: $box-link-active-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
|
||||
@import "~@fortawesome/fontawesome-free/scss/solid";
|
||||
@import "~@fortawesome/fontawesome-free/scss/regular";
|
||||
@import "~@fortawesome/fontawesome-free/scss/brands";
|
||||
|
||||
@import "~react-diff-view/style/index";
|
||||
|
||||
// NEW STYLES
|
||||
|
||||
//typography
|
||||
.has-border-white {
|
||||
border-color: $white !important;
|
||||
}
|
||||
ul.is-separated {
|
||||
> li:after {
|
||||
content: ",\2800";
|
||||
}
|
||||
> li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// card columns for repo and plugins overview
|
||||
.card-columns {
|
||||
.column {
|
||||
height: 120px;
|
||||
|
||||
.overlay-column {
|
||||
position: absolute;
|
||||
height: calc(120px - 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.column.is-half {
|
||||
width: calc(50% - 0.75rem);
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-column {
|
||||
width: calc(50% - 3rem);
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: calc(100% - 1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column.is-full .overlay-column {
|
||||
width: calc(100% - 1.5rem);
|
||||
}
|
||||
}
|
||||
.content.is-plugin-page {
|
||||
.card-columns {
|
||||
.column.is-half .overlay-column {
|
||||
width: calc(37.5% - 1.5rem);
|
||||
}
|
||||
|
||||
.column.is-full .overlay-column {
|
||||
width: calc(75% - 1.5rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.column.is-half .overlay-column,
|
||||
.column.is-full .overlay-column {
|
||||
width: calc(100% - 1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
width: calc(50% - 0.75rem);
|
||||
.shorten-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// tables
|
||||
.table {
|
||||
width: 100%;
|
||||
td,
|
||||
th {
|
||||
border-color: $white-ter;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// card tables
|
||||
.card-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
|
||||
tr {
|
||||
a {
|
||||
color: #363636;
|
||||
}
|
||||
&.border-is-green td:first-child {
|
||||
border-left-color: $green;
|
||||
}
|
||||
&.border-is-yellow td:first-child {
|
||||
border-left-color: $yellow;
|
||||
}
|
||||
|
||||
&.is-primary td:first-child {
|
||||
border-left-color: $primary;
|
||||
}
|
||||
&.is-success td:first-child {
|
||||
border-left-color: $success;
|
||||
}
|
||||
&.is-warning td:first-child {
|
||||
border-left-color: $warning;
|
||||
}
|
||||
&.is-danger td:first-child {
|
||||
border-left-color: $danger;
|
||||
}
|
||||
&.is-info td:first-child {
|
||||
border-left-color: $info;
|
||||
}
|
||||
&.is-link td:first-child {
|
||||
border-left-color: $link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
background-color: whitesmoke;
|
||||
|
||||
&.is-darker {
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 1em 1.25em;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
|
||||
&:first-child {
|
||||
border-left: 3px solid $grey;
|
||||
}
|
||||
&.is-darker {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
}
|
||||
&.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
thead th {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// panels
|
||||
.panel {
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.panel-heading {
|
||||
border: none;
|
||||
border-bottom: 1px solid $border;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
|
||||
> .field {
|
||||
margin-bottom: 0; // replace selector margin
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block {
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
background-color: whitesmoke;
|
||||
color: #363636;
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
padding: 0.5em 0.75em;
|
||||
border: none;
|
||||
border-top: 1px solid $border;
|
||||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// forms
|
||||
form .field:not(.is-grouped) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.input,
|
||||
.select select,
|
||||
.textarea,
|
||||
.file-name {
|
||||
border-color: $blue-light;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.select,
|
||||
.select:hover {
|
||||
&:not(.is-multiple):not(.is-loading) {
|
||||
&.disabled::after {
|
||||
border-color: #7a7a7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// label with help-icon compensation
|
||||
.label-icon-spacing {
|
||||
margin-top: 30px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// pagination
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
height: 2.8rem;
|
||||
min-width: 5rem;
|
||||
}
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
height: 2.8rem;
|
||||
min-width: 6.75em;
|
||||
}
|
||||
.pagination-previous[disabled],
|
||||
.pagination-next[disabled] {
|
||||
background-color: #ededed;
|
||||
color: #bcbcbc;
|
||||
}
|
||||
.pagination-link.is-current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.has-scm-background {
|
||||
background-image: url(images/scmManagerHero.jpg) !important;
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-color: #002e4b;
|
||||
}
|
||||
|
||||
// hero
|
||||
.hero.is-dark {
|
||||
background-color: #002e4b;
|
||||
background-image: url(images/scmManagerHero.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
|
||||
.tabs.is-boxed li.is-active a,
|
||||
.tabs.is-boxed li.is-active a:hover,
|
||||
.tabs.is-toggle li.is-active a,
|
||||
.tabs.is-toggle li.is-active a:hover {
|
||||
background-color: #28b1e8;
|
||||
border-color: #28b1e8;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// aside
|
||||
.aside-background {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
// menu
|
||||
.menu {
|
||||
div {
|
||||
height: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.menu-label {
|
||||
display: flex;
|
||||
height: 3.2rem;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
background-color: $blue;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 0.5rem 1rem;
|
||||
text-transform: none;
|
||||
|
||||
&:last-child,
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.menu-list {
|
||||
a {
|
||||
color: #333;
|
||||
padding: 1rem;
|
||||
|
||||
&.is-active {
|
||||
color: $info;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
ul {
|
||||
margin: 0;
|
||||
border-top: 1px solid $white-ter;
|
||||
|
||||
li {
|
||||
border-right: none;
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a.is-active:before {
|
||||
position: relative;
|
||||
content: " ";
|
||||
background: $blue;
|
||||
height: 53px;
|
||||
width: 2px;
|
||||
display: block;
|
||||
left: -17px;
|
||||
float: left;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
border-radius: 0;
|
||||
border-top: 1px solid $white-ter;
|
||||
border-left: 1px solid $white-ter;
|
||||
border-right: 1px solid $white-ter;
|
||||
}
|
||||
> li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: 1px solid $white-ter;
|
||||
}
|
||||
div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu li {
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
a:before {
|
||||
font-family: "Font Awesome 5 Free"; /* NOSONAR */
|
||||
font-weight: 900;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
content: "\f105";
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// modal
|
||||
.modal-card {
|
||||
border-radius: 6px;
|
||||
|
||||
.modal-card-foot {
|
||||
justify-content: flex-end; // pulled-right
|
||||
}
|
||||
}
|
||||
|
||||
// radio
|
||||
//overwrite bulma's default margin
|
||||
.radio + .radio {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// NOTE: use .is-clickable instead!
|
||||
.has-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// fix tooltip bug in firefox
|
||||
// for bulma-tooltip v3.0.0
|
||||
[data-tooltip]:not(.is-disabled).has-tooltip-right::after,
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-right::after,
|
||||
[data-tooltip]:not([disabled]).has-tooltip-right::after,
|
||||
[data-tooltip]:not(.is-disabled).has-tooltip-left::after,
|
||||
[data-tooltip]:not(.is-loading).has-tooltip-left::after,
|
||||
[data-tooltip]:not([disabled]).has-tooltip-left::after {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.diff-gutter-conflict {
|
||||
background: $warning-50;
|
||||
}
|
||||
|
||||
.diff-code-conflict {
|
||||
background: $warning-25;
|
||||
}
|
||||
|
||||
.small-loading-spinner {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
&:after {
|
||||
@include loader;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-sub-section + .sg-sub-section {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user