moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move button scss

This commit is contained in:
Alex Gleason 2020-06-03 01:10:53 -05:00
parent 9cc9065efd
commit 39f011619e
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
app/styles/basics.scss
View File

@ -190,124 +190,6 @@ body {
}
}
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.button {
background-color: var(--brand-color);
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: 500;
height: 36px;
letter-spacing: 0;
line-height: 36px;
overflow: hidden;
padding: 0 16px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
transition: 0.2s;
&:active,
&:focus,
&:hover {
background-color: var(--brand-color-hicontrast);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&--small {
font-size: 13px;
height: auto;
line-height: normal;
padding: 4px 8px;
}
&:disabled,
&.disabled {
background-color: var(--brand-color-med);
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: var(--primary-text-color);
background: var(--brand-color);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color);
}
}
&.button-alternative-2 {
background: var(--brand-color-med);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color-faint);
}
}
&.button-secondary {
color: var(--primary-text-color-faint);
background: transparent;
padding: 3px 15px;
border: 1px solid var(--brand-color);
&:active,
&:focus,
&:hover {
border-color: var(--brand-color);
color: var(--primary-text-color);
}
&:disabled {
opacity: 0.5;
}
}
&.button--block {
display: block;
width: 100%;
}
}
noscript {
text-align: center;

118
app/styles/components/buttons.scss
View File

@ -1,3 +1,121 @@
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.button {
background-color: var(--brand-color);
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: 500;
height: 36px;
letter-spacing: 0;
line-height: 36px;
overflow: hidden;
padding: 0 16px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
transition: 0.2s;
&:active,
&:focus,
&:hover {
background-color: var(--brand-color-hicontrast);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&--small {
font-size: 13px;
height: auto;
line-height: normal;
padding: 4px 8px;
}
&:disabled,
&.disabled {
background-color: var(--brand-color-med);
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: var(--primary-text-color);
background: var(--brand-color);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color);
}
}
&.button-alternative-2 {
background: var(--brand-color-med);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color-faint);
}
}
&.button-secondary {
color: var(--primary-text-color-faint);
background: transparent;
padding: 3px 15px;
border: 1px solid var(--brand-color);
&:active,
&:focus,
&:hover {
border-color: var(--brand-color);
color: var(--primary-text-color);
}
&:disabled {
opacity: 0.5;
}
}
&.button--block {
display: block;
width: 100%;
}
}
button,
a.button {
&.standard {