Skip to content

feat(link): Новые стили в links (#183685) #127

Merged
merged 5 commits into from
Jun 6, 2019
Merged

feat(link): Новые стили в links (#183685) #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96c9106
feat(link): Новые стили в links (#183685)
May 27, 2019
bc39942
feat(link): border opacity fix
May 30, 2019
33dbe6e
fixed underline in multiline links
Jun 4, 2019
09a98aa
fixed paddings
Jun 4, 2019
af49ba9
fixed paddings
Jun 6, 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
4 changes: 2 additions & 2 deletions packages/mosaic-dev/link/styles.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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