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
parent
171fe69db7
commit
b04ebd8553
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue