Merge pull request #11943 from nextcloud/buttons-round
Round off buttons 'pill style' like on the website
This commit is contained in:
commit
ae94c5a94c
|
@ -693,9 +693,6 @@ table.dragshadow td.size {
|
||||||
.app-files .actions .button.new {
|
.app-files .actions .button.new {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.app-files .actions .button.new .icon {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb .canDrop > a,
|
.breadcrumb .canDrop > a,
|
||||||
#filestable tbody tr.canDrop {
|
#filestable tbody tr.canDrop {
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
--color-border-dark: $color-border-dark;
|
--color-border-dark: $color-border-dark;
|
||||||
--border-radius: $border-radius;
|
--border-radius: $border-radius;
|
||||||
--border-radius-large: $border-radius-large;
|
--border-radius-large: $border-radius-large;
|
||||||
|
--border-radius-pill: $border-radius-pill;
|
||||||
|
|
||||||
--font-face: $font-face;
|
--font-face: $font-face;
|
||||||
}
|
}
|
||||||
|
|
|
@ -184,7 +184,7 @@ a.button {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 11px 10px 9px;
|
padding: 11px 10px 9px;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px; /* --border-radius */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
input[type='submit'],
|
input[type='submit'],
|
||||||
|
@ -201,6 +201,7 @@ select {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #555;
|
color: #555;
|
||||||
border: none;
|
border: none;
|
||||||
|
border-radius: 100px; /* --border-radius-pill */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
input[type='text'],
|
input[type='text'],
|
||||||
|
@ -233,13 +234,19 @@ input.update-continue {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
color: #666 !important;
|
color: #666 !important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 3px;
|
border-radius: 100px; /* --border-radius-pill */
|
||||||
margin: 15px 5px;
|
margin: 15px 5px;
|
||||||
}
|
}
|
||||||
.updateAnyways a.updateAnywaysButton:hover {
|
.updateAnyways a.updateAnywaysButton:hover {
|
||||||
color: #222 !important;
|
color: #222 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Get rid of the inside dotted line in Firefox */
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
input.primary,
|
input.primary,
|
||||||
button.primary,
|
button.primary,
|
||||||
a.primary {
|
a.primary {
|
||||||
|
@ -397,7 +404,7 @@ form .warning input[type='checkbox']+label {
|
||||||
|
|
||||||
.two-factor-provider {
|
.two-factor-provider {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 3px;
|
border-radius: 3px; /* --border-radius */
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -432,7 +439,7 @@ form .warning input[type='checkbox']+label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 0 5px 0;
|
margin: 0 0 5px 0;
|
||||||
border-radius: 3px;
|
border-radius: 100px; /* --border-radius-pill */
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.two-factor-primary {
|
.two-factor-primary {
|
||||||
|
@ -489,7 +496,7 @@ form .warning input[type='checkbox']+label {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #0082c9;
|
background-color: #0082c9;
|
||||||
color: white;
|
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 */
|
/* 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;
|
color: #fff;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
border-radius: 10px;
|
border-radius: 10px; /* --border-radius-large */
|
||||||
cursor: default;
|
cursor: default;
|
||||||
-moz-user-select: text;
|
-moz-user-select: text;
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
|
|
|
@ -81,7 +81,7 @@
|
||||||
.header-right > div > .menu {
|
.header-right > div > .menu {
|
||||||
background-color: var(--color-main-background);
|
background-color: var(--color-main-background);
|
||||||
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
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;
|
box-sizing: border-box;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -615,7 +615,7 @@ nav[role='navigation'] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--color-primary-text);
|
color: var(--color-primary-text);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius-pill);
|
||||||
height: 34px;
|
height: 34px;
|
||||||
width: 0;
|
width: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
/* Specifically override browser styles */
|
/* Specifically override browser styles */
|
||||||
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
|
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 {
|
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
|
||||||
font-family: var(--font-face) !important;
|
font-family: var(--font-face) !important;
|
||||||
|
@ -174,7 +174,9 @@ input[type='button'],
|
||||||
input[type='submit'],
|
input[type='submit'],
|
||||||
input[type='reset'] {
|
input[type='reset'] {
|
||||||
font-weight: bold;
|
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 {
|
&::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
@ -662,7 +664,7 @@ input {
|
||||||
border: 1px solid var(--color-border-dark);
|
border: 1px solid var(--color-border-dark);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 3px;
|
border-radius: var(--border-radius);
|
||||||
height: 34px;
|
height: 34px;
|
||||||
/* tag wrapper */
|
/* tag wrapper */
|
||||||
.multiselect__tags-wrap {
|
.multiselect__tags-wrap {
|
||||||
|
@ -692,7 +694,7 @@ input {
|
||||||
border: 1px solid var(--color-border-dark);
|
border: 1px solid var(--color-border-dark);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 3px;
|
border-radius: var(--border-radius);
|
||||||
/* require to override the default width
|
/* require to override the default width
|
||||||
and force the tag to shring properly */
|
and force the tag to shring properly */
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
|
@ -3,10 +3,13 @@ form fieldset {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form fieldset > p {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
#password {
|
#password {
|
||||||
margin-right: 0 !important;
|
margin: 5px 0;
|
||||||
border-top-right-radius: 0;
|
padding-right: 45px;
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
height: 45px;
|
height: 45px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
@ -16,13 +19,10 @@ form fieldset {
|
||||||
|
|
||||||
input[type='submit'],
|
input[type='submit'],
|
||||||
input[type='submit'].icon-confirm {
|
input[type='submit'].icon-confirm {
|
||||||
width: 45px;
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: -5px;
|
||||||
|
width: 45px !important;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
margin-left: 0 !important;
|
background-color: transparent !important;
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset > p {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -73,7 +73,9 @@ $color-border: nc-darken($color-main-background, 7%) !default;
|
||||||
// darker border like inputs or very visible elements
|
// darker border like inputs or very visible elements
|
||||||
$color-border-dark: nc-darken($color-main-background, 14%) !default;
|
$color-border-dark: nc-darken($color-main-background, 14%) !default;
|
||||||
$border-radius: 3px !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;
|
$font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue