Skip to content

Commit

Permalink
feat(link): Новые стили в links (#183685) (#127)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lskramarov @pimenovoleg
lskramarov authored and pimenovoleg committed Jun 7, 2019
1 parent a024473 commit 31d6b87
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 84 deletions.
4 changes: 2 additions & 2 deletions packages/mosaic-dev/link/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';

//@import '../../mosaic/core/theming/prebuilt/default-theme';
@import '../../mosaic/core/theming/prebuilt/dark-theme';
@import '../../mosaic/core/theming/prebuilt/default-theme';
//@import '../../mosaic/core/theming/prebuilt/dark-theme';
28 changes: 28 additions & 0 deletions packages/mosaic-dev/link/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,32 @@
</a>
</td>
</tr>
<tr>
<td><a class="mc-link mc-link_underlined" [disabled]="true" href="">
<i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
<span class="mc-link__text">В западной традиции рыбой выступает фрагмент латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке.</span>
<i mc-icon="mc-angle-down-L_16" class="mc-link__icon"></i>
</a>
</td>
<td><a class="mc-link mc-link_underlined" >
<i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
<span class="mc-link__text">В западной традиции рыбой выступает фрагмент латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке.</span>
<i mc-icon="mc-angle-down-L_16" class="mc-link__icon"></i>
</a>
</td>
</tr>
<tr>
<td><a class="mc-link mc-link_dashed" [disabled]="true" href="">
<i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
<span class="mc-link__text">В западной традиции рыбой выступает фрагмент латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке.</span>
<i mc-icon="mc-angle-down-L_16" class="mc-link__icon"></i>
</a>
</td>
<td><a class="mc-link mc-link_dashed" >
<i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
<span class="mc-link__text">В западной традиции рыбой выступает фрагмент латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником еще в XVI веке.</span>
<i mc-icon="mc-angle-down-L_16" class="mc-link__icon"></i>
</a>
</td>
</tr>
</table>
73 changes: 36 additions & 37 deletions packages/mosaic/link/_link-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,76 +3,75 @@
@import '../core/styles/typography/typography-utils';


@mixin _mc-link-dashes_mixin($color, $percentage: 66%) {
background: linear-gradient(90deg, $color, $percentage, transparent 0) repeat-x;
background-size: 5px 1px;
// 1.29em это меньше line-height что бы было видно подчеркивание
background-position: 0 1.29em;
}

@mixin mc-link-theme($theme) {
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);

$is-dark: map-get($theme, is-dark);

$main-color: mc-color($primary);
$main-color_hover: mc-color($primary, if($is-dark, lighter, darker));
$disabled-color: mc-color($foreground, disabled-text);
$color: mc-color($primary);
$color_hover: mc-color($primary, if($is-dark, lighter, darker));
$color_disabled: mc-color($foreground, disabled-text);

.mc-link {
color: $main-color;
color: $color;

&:visited {
color: $main-color;
color: $color;
}

&:hover {
color: $main-color_hover;
color: $color_hover;
}

&.cdk-keyboard-focused {
border-color: $main-color;
box-shadow: 0 0 0 2px $main-color;
box-shadow: 0 0 0 2px $color;
}

&[disabled] {
color: $disabled-color;
&.mc-link_underlined .mc-link__text {
border-bottom-style: solid;
border-bottom-color: rgba($color, .32);
}

&.mc-link_underlined {
& > .mc-link__text {
@include _mc-link-dashes_mixin($main-color, 100%);
}
&.mc-link_dashed .mc-link__text {
border-bottom-style: dashed;
}

&:visited > .mc-link__text {
@include _mc-link-dashes_mixin($main-color, 100%);
}
&.mc-link_dashed .mc-link__text {
border-bottom-width: 1px;
border-bottom-color: rgba($color, .5);

&:hover > .mc-link__text {
@include _mc-link-dashes_mixin($main-color_hover, 100%);
&:visited {
border-bottom-color: rgba($color, .5);
}

&[disabled] > .mc-link__text {
@include _mc-link-dashes_mixin($disabled-color, 100%);
&:hover {
border-bottom-color: rgba($color_hover, .5);
}
}

&.mc-link_dashed {
& > .mc-link__text {
@include _mc-link-dashes_mixin($main-color);
&.mc-link_underlined .mc-link__text {
border-bottom-width: 1px;
border-bottom-color: rgba($color, .32);

&:visited {
border-bottom-color: rgba($color, .32);
}

&:visited > .mc-link__text {
@include _mc-link-dashes_mixin($main-color);
&:hover {
border-bottom-color: rgba($color_hover, .32);
}
}

&[disabled] {
color: $color_disabled;

&:hover > .mc-link__text {
@include _mc-link-dashes_mixin($main-color_hover);
&.mc-link_underlined .mc-link__text {
border-bottom-color: rgba($color_disabled, .64);
}

&[disabled] > .mc-link__text {
@include _mc-link-dashes_mixin($disabled-color);
&.mc-link_dashed .mc-link__text {
border-bottom-color: $color_disabled;
}
}
}
Expand Down
56 changes: 11 additions & 45 deletions packages/mosaic/link/link.scss
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,18 @@
$link-border-radius: 3px;
$link-padding: 2px 0;
$link-padding: 4px 8px;


@mixin base-transition($args...) {
transition-property: $args;
transition-duration: 0.33s;
transition-timing-function: ease-out;
}

@mixin hover-transition($args...) {
@include base-transition($args);

&:hover {
transition: none;
}
}

@mixin focus-transition($args...) {
@include base-transition($args);

&:focus {
transition: none;
}
}

.mc-link {
display: inline-flex;
display: inline-block;

align-items: center;
outline: none;

padding: $link-padding;

text-decoration: none !important;
text-decoration: none;

cursor: pointer;

outline: none;

@include focus-transition(color);
@include hover-transition(color);

&.mc-focused,
&:focus {
border-radius: $link-border-radius;
}

&[disabled] {
pointer-events: none;
cursor: default;
}

& > .mc-link__icon {
color: inherit;
}
Expand All @@ -62,10 +25,13 @@ $link-padding: 2px 0;
margin-right: 4px;
}

&.mc-link_underlined,
&.mc-link_dashed {
@include focus-transition(background, color);
@include hover-transition(background, color);
&.cdk-keyboard-focused {
border-radius: $link-border-radius;
}

&[disabled] {
pointer-events: none;
cursor: default;
}
}

Expand Down

0 comments on commit 31d6b87

Please sign in to comment.