Skip to content

fix(button): moving transparent modificator to theme scss file #256

Merged
merged 5 commits into from
Sep 26, 2019
Merged

fix(button): moving transparent modificator to theme scss file #256

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a8ee087
fix(button): moving transparent modificator to theme scss file
Sep 23, 2019
b92a146
improved selector and example
Sep 26, 2019
1a6c312
Merge remote-tracking branch 'upstream/master' into bugfix/UIM-162-mo…
Sep 26, 2019
3a54ebf
fix(button): resolve conflict
Sep 26, 2019
0b555e1
fix(button): moving transparent modificator
Sep 26, 2019
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
45 changes: 24 additions & 21 deletions packages/mosaic-dev/button/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,27 +59,6 @@

<br><br>

<button mc-button color="second" class="mc-button mc-button_transparent" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="second" class="mc-button mc-button_transparent"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;


<br><br>

<button mc-button color="second" class="mc-progress mc-button mc-button_transparent" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="second" class="mc-progress mc-button mc-button_transparent"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-progress mc-hover mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-progress mc-active mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="mc-progress cdk-keyboard-focused mc-button mc-button_transparent" mc-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>




<button mc-button color="primary" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="primary"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
Expand All @@ -96,6 +75,14 @@

<br><br>

<button mc-button color="primary" class="mc-button_transparent" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="primary" class="mc-button_transparent"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-button_transparent mc-hover" mc-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-button_transparent mc-active" mc-button color="primary"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="mc-button_transparent cdk-keyboard-focused" mc-button color="primary"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br><br>

<button mc-button color="second" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="second"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
Expand All @@ -112,6 +99,14 @@

<br><br>

<button mc-button color="second" class="mc-button_transparent" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="second" class="mc-button_transparent"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-button_transparent mc-hover" mc-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-button_transparent mc-active" mc-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="mc-button_transparent cdk-keyboard-focused" mc-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br><br>

<button mc-button color="error" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="error"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
Expand All @@ -125,4 +120,12 @@
<button class="mc-hover mc-progress" mc-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br><br>

<button mc-button color="error" class="mc-button_transparent" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-button color="error" class="mc-button_transparent"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-button_transparent mc-hover" mc-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-button_transparent mc-active" mc-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="mc-button_transparent cdk-keyboard-focused" mc-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
</div>
17 changes: 17 additions & 0 deletions packages/mosaic/button/_button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,23 @@
.mc-button,
.mc-icon-button {
@include _mc-button-theme-color($theme);

&.mc-button_transparent {
border-color: transparent;
background-color: transparent;

&.mc-disabled,
&[disabled] {
border-color: transparent;
}

&:active,
&.mc-active {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
}
}
}

Expand Down
20 changes: 0 additions & 20 deletions packages/mosaic/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,6 @@
@extend %mc-button-base;

@include mc-button-size($mc-button-padding, $mc-button-line-height, $mc-button-font);

&_transparent {
&.mc-primary,
&.mc-second {
border-color: transparent;
background-color: transparent;

&.mc-disabled,
&[disabled] {
border-color: transparent;
}

&:active,
&.mc-active {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
}
}
}

.mc-light-button {
Expand Down