mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-07-04 06:06:24 +00:00
Code Issues Releases Wiki Activity

Using global CSS and shadow DOM CSSs as well

Browse Source
This commit is contained in:
Gabor PEK
2018-03-05 15:02:02 +01:00
parent 10cf9907d2
commit a3ab5f52b6
7 changed files with 224 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/assets/scss/shared/_buttons.scss Normal file
View File

@ -0,0 +1,47 @@
.tao-btn-primary {
color: $tao-blue-500;
font-size: $font-size-base;
padding: 6px 19px;
border-radius: 100px !important;
background-color: transparent;
border: 1px solid $tao-blue-500;
outline: none !important;
transition: all 0.18s ease-out 0.18s;
cursor: pointer;
&.large {
font-size: $font-size-h3;
padding: 10px 32px;
}
&.hidden {
visibility: hidden;
}
&.medium {
font-size: $font-size-h4;
padding: 8px 24px;
}
&:hover {
background-color: transparent;
color: $tao-blue-500;
box-shadow: inset 0 0 0 1px $tao-blue-500;
}
}
.tao-btn-rainbow {
@extend .tao-btn-primary;
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
transition: all 2s ease;
color: white;
border: none;
text-decoration: none !important;
&:hover {
box-shadow: none;
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
color: white;
}
}