Changes several font sizes from pixels to rem unit, for future acessibility implementation.

This commit is contained in:
Mateus Machado Luna 2018-09-11 17:00:19 -03:00
parent c07453d981
commit 6d2582e835
24 changed files with 73 additions and 73 deletions

View File

@ -144,7 +144,7 @@
class="field column is-12"> class="field column is-12">
<a <a
@click="addSearchCriteria" @click="addSearchCriteria"
style="font-size: 12px;"> style="font-size: 0.75rem;">
<b-icon <b-icon
class="add-i" class="add-i"
icon="plus-circle" icon="plus-circle"
@ -746,12 +746,12 @@
.advanced-search-text { .advanced-search-text {
margin: 0 12px; margin: 0 12px;
font-size: 12px; font-size: 0.75rem;
color: $blue5; color: $blue5;
} }
.advanced-search-text-di { .advanced-search-text-di {
font-size: 14px; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #01295c; color: #01295c;
margin-top: 4px; margin-top: 4px;

View File

@ -903,7 +903,7 @@ export default {
.select-all { .select-all {
color: $gray4; color: $gray4;
font-size: 14px; font-size: 0.875rem;
&:hover { &:hover {
color: $gray4; color: $gray4;
} }

View File

@ -671,7 +671,7 @@
color: $blue5; color: $blue5;
cursor: pointer; cursor: pointer;
height: 27px; height: 27px;
font-size: 18px; font-size: 1.125rem;
width: 30px !important; width: 30px !important;
position: absolute; position: absolute;
right: 0; right: 0;

View File

@ -1187,8 +1187,8 @@
} }
h1 { h1 {
font-size: 20px; font-size: 1.25rem;
font-weight: 500; font-weight: normal;
color: $blue5; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1204,8 +1204,8 @@
padding: 0 $table-side-padding; padding: 0 $table-side-padding;
h1 { h1 {
font-size: 20px; font-size: 1.25rem;
font-weight: 500; font-weight: normal;
color: $blue5; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1276,7 +1276,7 @@
cursor: pointer; cursor: pointer;
color: $blue5; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 1.125rem !important;
height: 2rem !important; height: 2rem !important;
} }
margin-bottom: 5px; margin-bottom: 5px;
@ -1284,7 +1284,7 @@
} }
.label { .label {
font-size: 12px; font-size: 0.75rem;
font-weight: normal; font-weight: normal;
} }
@ -1376,7 +1376,7 @@
padding-right: 10px; padding-right: 10px;
} }
.gray-icon .icon i::before, .gray-icon i::before { .gray-icon .icon i::before, .gray-icon i::before {
font-size: 21px !important; font-size: 1.3125rem !important;
} }
.view-mode-icon { .view-mode-icon {
@ -1427,7 +1427,7 @@
cursor: pointer; cursor: pointer;
color: $blue5; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 1.125rem !important;
height: 2rem !important; height: 2rem !important;
} }
} }

View File

@ -1184,8 +1184,8 @@
} }
h1 { h1 {
font-size: 20px; font-size: 1.25rem;
font-weight: 500; font-weight: normal;
color: $blue5; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1201,8 +1201,8 @@
padding: 0 $table-side-padding; padding: 0 $table-side-padding;
h1 { h1 {
font-size: 20px; font-size: 1.25rem;
font-weight: 500; font-weight: normal;
color: $blue5; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1273,7 +1273,7 @@
cursor: pointer; cursor: pointer;
color: $blue5; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 1.125rem !important;
height: 2rem !important; height: 2rem !important;
} }
margin-bottom: 5px; margin-bottom: 5px;
@ -1281,7 +1281,7 @@
} }
.label { .label {
font-size: 12px; font-size: 0.75rem;
font-weight: normal; font-weight: normal;
} }
@ -1373,7 +1373,7 @@
padding-right: 10px; padding-right: 10px;
} }
.gray-icon .icon i::before, .gray-icon i::before { .gray-icon .icon i::before, .gray-icon i::before {
font-size: 21px !important; font-size: 1.3125rem !important;
} }
.view-mode-icon { .view-mode-icon {
@ -1424,7 +1424,7 @@
cursor: pointer; cursor: pointer;
color: $blue5; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 1.125rem !important;
height: 2rem !important; height: 2rem !important;
} }
} }

View File

@ -53,10 +53,10 @@
} }
.button.is-small { .button.is-small {
height: 26px !important; height: 26px !important;
line-height: 12px; line-height: 0.75rem;
} }
.button:not(.is-small):not(.is-medium):not(.is-large) { .button:not(.is-small):not(.is-medium):not(.is-large) {
height: 30px !important; height: 30px !important;
line-height: 20px !important; line-height: 1.25rem !important;
font-size: 14px !important; font-size: 0.875rem !important;
} }

View File

@ -23,10 +23,10 @@
.dropdown-item { .dropdown-item {
text-decoration: none; text-decoration: none;
padding: 0.375rem 1rem; padding: 0.375rem 1rem;
font-size: 13px; font-size: 0.8125rem;
color: $tainacan-input-color !important; color: $tainacan-input-color !important;
label { margin-bottom: 0; } label { margin-bottom: 0; }
&.control { font-size: 13px !important; } &.control { font-size: 0.8125rem !important; }
.b-checkbox { width: 100% }; .b-checkbox { width: 100% };
&:hover { background-color: $gray2; } &:hover { background-color: $gray2; }
.is-small { color: $gray4; } .is-small { color: $gray4; }
@ -97,7 +97,7 @@
border-style: solid; border-style: solid;
background-color: white; background-color: white;
display: flex; display: flex;
font-size: 12px; font-size: 0.75rem;
.tags { .tags {
margin-right: 8px; margin-right: 8px;

View File

@ -1,5 +1,5 @@
.input, .textarea { .input, .textarea {
font-size: 14px; font-size: 0.875rem;
border-radius: 1px !important; border-radius: 1px !important;
box-shadow: none !important; box-shadow: none !important;
background-color: white; background-color: white;

View File

@ -15,8 +15,8 @@
align-items: flex-end; align-items: flex-end;
h1, h2 { h1, h2 {
font-size: 20px; font-size: 1.25rem;
font-weight: 500; font-weight: normal;
color: $blue5; color: $blue5;
display: inline-block; display: inline-block;
width: 90%; width: 90%;
@ -109,8 +109,8 @@
display: inline-flex !important; display: inline-flex !important;
cursor: pointer; cursor: pointer;
height: 30px !important; height: 30px !important;
line-height: 20px !important; line-height: 1.25rem !important;
font-size: 14px !important; font-size: 0.875rem !important;
} }
.button.is-success { .button.is-success {
border: none; border: none;

View File

@ -39,7 +39,7 @@
flex-grow: 5; flex-grow: 5;
margin-right: 0.5em; margin-right: 0.5em;
.label { .label {
font-size: 1em !important; // font-size: 1em !important;
font-weight: normal !important; font-weight: normal !important;
color: $gray4; color: $gray4;
} }
@ -78,12 +78,12 @@
} }
.mdi-chevron-left::before { .mdi-chevron-left::before {
content: "\F40A"; content: "\F40A";
font-size: 17px; font-size: 1.0625rem;
transform: rotate(180deg); transform: rotate(180deg);
} }
.mdi-chevron-right::before { .mdi-chevron-right::before {
content: "\F40A"; content: "\F40A";
font-size: 17px; font-size: 1.0625rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {

View File

@ -4,7 +4,7 @@
border: none; border: none;
border-radius: 1px !important; border-radius: 1px !important;
font-weight: normal; font-weight: normal;
font-size: 14px !important; font-size: 0.875rem !important;
height: 30px !important; height: 30px !important;
padding: 2px 25px 2px 15px!important; padding: 2px 25px 2px 15px!important;
margin-top: 0px !important; margin-top: 0px !important;

View File

@ -35,7 +35,7 @@
} }
&.is-small { &.is-small {
font-size: 8px; font-size: 0.5rem;
input[type="checkbox"] + .check { input[type="checkbox"] + .check {
border: 1.5px solid $gray4; border: 1.5px solid $gray4;

View File

@ -67,8 +67,8 @@
max-width: 80px; max-width: 80px;
p { p {
color: $gray4; color: $gray4;
font-size: 11px; font-size: 0.6875rem;
line-height: 1.5; line-height: 1.03125rem;
} }
} }
.column-default-width { .column-default-width {
@ -76,8 +76,8 @@
max-width: 160px; max-width: 160px;
p { p {
color: $gray4; color: $gray4;
font-size: 11px; font-size: 0.6875rem;
line-height: 1.5; line-height: 1.03125rem;
} }
} }
.column-medium-width { .column-medium-width {
@ -85,8 +85,8 @@
max-width: 200px; max-width: 200px;
p { p {
color: $gray4; color: $gray4;
font-size: 11px; font-size: 0.6875rem;
line-height: 1.5; line-height: 1.03125rem;
} }
} }
.column-large-width { .column-large-width {
@ -94,15 +94,15 @@
max-width: 240px; max-width: 240px;
p { p {
color: $gray4; color: $gray4;
font-size: 11px; font-size: 0.6875rem;
line-height: 1.5; line-height: 1.03125rem;
} }
} }
.column-main-content { .column-main-content {
min-width: 120px !important; min-width: 120px !important;
max-width: 240px !important; max-width: 240px !important;
p { p {
font-size: 14px !important; font-size: 0.875rem !important;
color: $tainacan-input-color !important; color: $tainacan-input-color !important;
margin: 0px !important; margin: 0px !important;
} }
@ -125,7 +125,7 @@
vertical-align: bottom; vertical-align: bottom;
.th-wrap { .th-wrap {
font-size: 12px !important; font-size: 0.75rem !important;
color: $gray4; color: $gray4;
font-weight: normal !important; font-weight: normal !important;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -149,10 +149,10 @@
max-height: 60px; max-height: 60px;
padding: 10px; padding: 10px;
vertical-align: middle; vertical-align: middle;
line-height: 12px; line-height: 0.75rem;
border: none !important; border: none !important;
p { p {
font-size: 14px; font-size: 0.875rem;
margin: 0px; margin: 0px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
@ -186,10 +186,10 @@
a { a {
margin: auto; margin: auto;
font-size: 18px !important; font-size: 1.125rem !important;
.mdi-settings, .mdi-settings::before { .mdi-settings, .mdi-settings::before {
font-size: 23px; font-size: 1.4375rem;
} }
} }

View File

@ -1,7 +1,7 @@
// Tabs // Tabs
.tabs { .tabs {
a { a {
font-size: 13px; font-size: 0.8125rem;
margin-bottom: -3px !important; margin-bottom: -3px !important;
&:hover{ &:hover{
border-bottom-color: transparent; border-bottom-color: transparent;

View File

@ -25,7 +25,7 @@
} }
.label { .label {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 0.875rem;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -49,7 +49,7 @@
height: 2.0em; height: 2.0em;
.mdi-alert-circle::before { .mdi-alert-circle::before {
content: "\F156" !important; content: "\F156" !important;
font-size: 16px !important; font-size: 1rem !important;
} }
} }
} }
@ -67,7 +67,7 @@
.control-label { // The value part in checkbox, radio and switches .control-label { // The value part in checkbox, radio and switches
color: $tainacan-input-color; color: $tainacan-input-color;
padding-left: 0.8em; padding-left: 0.8em;
font-size: 12px; font-size: 0.75rem;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

View File

@ -11,7 +11,7 @@
.tooltip-inner { .tooltip-inner {
background: $turquoise1; background: $turquoise1;
color: $gray5; color: $gray5;
font-size: 11px; font-size: 0.6875rem;
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
max-width: 280px; max-width: 280px;

View File

@ -54,7 +54,7 @@ a:hover {
} }
.add-link { .add-link {
display: inline; display: inline;
font-size: 12px; font-size: 0.75rem;
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;

View File

@ -163,7 +163,7 @@ export default {
.gray-icon, .gray-icon .icon { .gray-icon, .gray-icon .icon {
color: $gray4 !important; color: $gray4 !important;
i::before { i::before {
font-size: 21px; font-size: 1.3125rem;
} }
} }
.dropdown-item { .dropdown-item {
@ -175,7 +175,7 @@ export default {
margin-left: 4px; margin-left: 4px;
&.icon i::before, .gray-icon i::before { &.icon i::before, .gray-icon i::before {
font-size: 19px !important; font-size: 1.1875px !important;
} }
} }
} }

View File

@ -180,10 +180,10 @@
#profileImage { #profileImage {
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 35px; font-size: 2.1875rem;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 150px; line-height: 9.375rem;
margin: 20px 0; margin: 20px 0;
} }
</style> </style>

View File

@ -212,7 +212,7 @@
this.options.splice(j--, 1); this.options.splice(j--, 1);
} }
if (i == this.options.length - 1) if (i == this.options.length - 1)
this.options[i].seeMoreLink = `<a style="font-size: 12px;"> ${ this.$i18n.get('label_view_all') } </a>`; this.options[i].seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
} }
this.selectedValues(); this.selectedValues();

View File

@ -88,7 +88,7 @@ export const filter_type_mixin = {
} }
if (this.filter.max_options && this.options.length >= this.filter.max_options) { if (this.filter.max_options && this.options.length >= this.filter.max_options) {
let seeMoreLink = `<a style="font-size: 12px;"> ${ this.$i18n.get('label_view_all') } </a>`; let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){ if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink; this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;
@ -169,7 +169,7 @@ export const filter_type_mixin = {
} }
if (this.filter.max_options && this.options.length >= this.filter.max_options) { if (this.filter.max_options && this.options.length >= this.filter.max_options) {
let seeMoreLink = `<a style="font-size: 12px;"> ${ this.$i18n.get('label_view_all') } </a>`; let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){ if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink; this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;

View File

@ -117,14 +117,14 @@
margin: 0; margin: 0;
height: 24px; height: 24px;
padding: 0; padding: 0;
font-size: 12px; font-size: 0.75rem;
} }
.pagination-next { .pagination-next {
margin: 0; margin: 0;
height: 24px; height: 24px;
padding: 0; padding: 0;
font-size: 12px; font-size: 0.75rem;
} }
} }
@ -195,12 +195,12 @@
.label { .label {
font-weight: normal !important; font-weight: normal !important;
font-size: 14px; font-size: 0.875rem;
width: 100%; width: 100%;
} }
.taginput-container { .taginput-container {
font-size: 14px; font-size: 0.875rem;
border-radius: 1px !important; border-radius: 1px !important;
box-shadow: none !important; box-shadow: none !important;
transition: background-color 0.1s; transition: background-color 0.1s;
@ -261,7 +261,7 @@
.b-checkbox.checkbox { .b-checkbox.checkbox {
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 0.75rem;
margin-right: 2px; margin-right: 2px;
} }

View File

@ -123,7 +123,7 @@
this.options.splice(this.filter.max_options); this.options.splice(this.filter.max_options);
} }
let seeMoreLink = `<a style="font-size: 12px;"> ${ this.$i18n.get('label_view_all') } </a>`; let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){ if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink; this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;
@ -226,7 +226,7 @@
this.options.splice(j--, 1); this.options.splice(j--, 1);
} }
if (i == this.options.length - 1) if (i == this.options.length - 1)
this.options[i].seeMoreLink = `<a style="font-size: 12px;"> ${ this.$i18n.get('label_view_all') } </a>`; this.options[i].seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
} }
this.selectedValues(); this.selectedValues();

View File

@ -226,13 +226,13 @@
padding: 10px 25px; padding: 10px 25px;
.label { .label {
font-size: 14px; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
margin-left: 15px; margin-left: 15px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.metadata-type { .metadata-type {
font-size: 13px; font-size: 0.8125rem;
font-weight: 400; font-weight: 400;
color: $gray3; color: $gray3;
top: -0.2em; top: -0.2em;