Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ultra components #541

Merged
merged 17 commits into from
Oct 20, 2022
Merged

Add ultra components #541

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
a906a9e
Set up basic button
twalton83 Sep 9, 2022
cac4435
Fix large button
twalton83 Sep 9, 2022
599ccfa
Merge branch 'stream-labs:master' into add-ultra-components
twalton83 Sep 13, 2022
f1120a0
Clean up button styling
twalton83 Sep 13, 2022
dba0c55
Add border
twalton83 Sep 13, 2022
d5d57ee
Revert prime removals
twalton83 Sep 13, 2022
50e9f3c
Add back prime classes
twalton83 Sep 13, 2022
7e5852d
Remove unneeded space
twalton83 Sep 13, 2022
68a86e4
Update title
twalton83 Sep 15, 2022
7395c64
Update button color scheme
twalton83 Oct 13, 2022
c89d572
Fix border
twalton83 Oct 13, 2022
8132d74
Add ultra badge
twalton83 Oct 14, 2022
7637fd9
Update button
twalton83 Oct 14, 2022
e247815
Merge branch 'master' into add-ultra-components
twalton83 Oct 14, 2022
130c979
Update button design
twalton83 Oct 17, 2022
b869d48
Fix ultra button styles on day mode
twalton83 Oct 20, 2022
8f0c741
Merge master
twalton83 Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions src/components/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -829,26 +829,30 @@ export default class Button extends Vue {
.s-button--ultra {
border: 0px solid transparent;
color: @ultra-black;
// .btn-variant(@white, @ultra-gradient);
background: @ultra-gradient;

&::before {
background: @ultra-gradient;
}
border-radius: 8px;

//TODO: add border for regular buttons

.icon-ultra {
.icon-ultra-solid(@ultra-black);
}

&.s-button--large {
border-radius: 32px;
background: @ultra-gradient;
border: 0;
border: none;
padding: 0px 64px;

.icon-ultra {
.icon-ultra-solid();
}
&::before {
border-radius: 32px;
border: none;
}
}

&.s-button-square {
Expand Down Expand Up @@ -1056,8 +1060,7 @@ export default class Button extends Vue {

.s-button--ultra {
background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.16) 100%),
linear-gradient(123.53deg, #2DE8B0 25.56%, #CBE953 60.27%, #FFAB48 79.52%, #FF5151 96.69%);
// .night-btn-variant(@ultra-gradient, @ultra-black);
linear-gradient(123.53deg, #2DE8B0 25.56%, #CBE953 60.27%, #FFAB48 79.52%, #FF5151 96.69%);
color: @ultra-black;
border-radius: 8px;
.icon-ultra {
Expand Down