Round off buttons 'pill style' like on the website

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2018-10-19 16:19:37 +02:00
parent 171fe69db7
commit b04ebd8553
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
6 changed files with 25 additions and 16 deletions

View File

@ -693,9 +693,6 @@ table.dragshadow td.size {
.app-files .actions .button.new {
position: relative;
}
.app-files .actions .button.new .icon {
margin-bottom: 2px;
}
.breadcrumb .canDrop > a,
#filestable tbody tr.canDrop {

View File

@ -35,6 +35,7 @@
--color-border-dark: $color-border-dark;
--border-radius: $border-radius;
--border-radius-large: $border-radius-large;
--border-radius-pill: $border-radius-pill;
--font-face: $font-face;
}

View File

@ -184,7 +184,7 @@ a.button {
margin: 5px;
padding: 11px 10px 9px;
outline: none;
border-radius: 3px;
border-radius: 3px; /* --border-radius */
-webkit-appearance: none;
}
input[type='submit'],
@ -201,6 +201,7 @@ select {
font-weight: bold;
color: #555;
border: none;
border-radius: 100px; /* --border-radius-pill */
cursor: pointer;
}
input[type='text'],
@ -233,13 +234,19 @@ input.update-continue {
padding: 10px 20px;
color: #666 !important;
display: inline-block;
border-radius: 3px;
border-radius: 100px; /* --border-radius-pill */
margin: 15px 5px;
}
.updateAnyways a.updateAnywaysButton:hover {
color: #222 !important;
}
/* Get rid of the inside dotted line in Firefox */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
}
input.primary,
button.primary,
a.primary {
@ -397,7 +404,7 @@ form .warning input[type='checkbox']+label {
.two-factor-provider {
display: flex;
border-radius: 3px;
border-radius: 3px; /* --border-radius */
margin: 12px 0;
border: 1px solid transparent;
text-align: left;
@ -432,7 +439,7 @@ form .warning input[type='checkbox']+label {
width: 100%;
padding: 10px;
margin: 0 0 5px 0;
border-radius: 3px;
border-radius: 100px; /* --border-radius-pill */
font-size: 20px;
}
.two-factor-primary {
@ -489,7 +496,7 @@ form .warning input[type='checkbox']+label {
box-sizing: border-box;
background-color: #0082c9;
color: white;
border-radius: 3px;
border-radius: 100px; /* --border-radius-pill */
}
/* fixes for update page TODO should be fixed some time in a proper way */
@ -575,7 +582,7 @@ form #selectDbType label.ui-state-active {
color: #fff;
text-align: left;
word-wrap: break-word;
border-radius: 10px;
border-radius: 10px; /* --border-radius-large */
cursor: default;
-moz-user-select: text;
-webkit-user-select: text;

View File

@ -81,7 +81,7 @@
.header-right > div > .menu {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: 0 0 3px 3px;
border-radius: 0 0 var(--border-radius) var(--border-radius);
box-sizing: border-box;
z-index: 2000;
position: absolute;
@ -615,7 +615,7 @@ nav[role='navigation'] {
background-color: transparent;
color: var(--color-primary-text);
border: 0;
border-radius: var(--border-radius);
border-radius: var(--border-radius-pill);
height: 34px;
width: 0;
cursor: pointer;

View File

@ -14,7 +14,7 @@
/* Specifically override browser styles */
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
font-family: var(--font-face)
font-family: var(--font-face);
}
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
font-family: var(--font-face) !important;
@ -174,7 +174,9 @@ input[type='button'],
input[type='submit'],
input[type='reset'] {
font-weight: bold;
/* Get rid of the ugly firefox dotted line */
border-radius: var(--border-radius-pill);
/* Get rid of the inside dotted line in Firefox */
&::-moz-focus-inner {
border: 0;
}
@ -662,7 +664,7 @@ input {
border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
border-radius: var(--border-radius);
height: 34px;
/* tag wrapper */
.multiselect__tags-wrap {
@ -692,7 +694,7 @@ input {
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
border-radius: var(--border-radius);
/* require to override the default width
and force the tag to shring properly */
min-width: 0;

View File

@ -73,7 +73,9 @@ $color-border: nc-darken($color-main-background, 7%) !default;
// darker border like inputs or very visible elements
$color-border-dark: nc-darken($color-main-background, 14%) !default;
$border-radius: 3px !default;
$border-radius-large: 10px;
$border-radius-large: 10px !default;
// Pill-style button, value is large so big buttons also have correct roundness
$border-radius-pill: 100px !default;
$font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;