Skip to content

Commit

Permalink
Add feature #8
Browse files Browse the repository at this point in the history
  • Loading branch information
Waren Gonzaga committed Nov 24, 2020
1 parent 9fd5f03 commit ed2ef40
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 17 deletions.
2 changes: 1 addition & 1 deletion demo/assets/css/fork-corner.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

72 changes: 72 additions & 0 deletions dist/fork-corner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,75 @@ html, body {

.fork-corner.fc-theme-bitbucket + div {
background-color: #205081; }

.fork-corner.fc-size-small.fc-pos-tr {
top: 12.5px !important;
right: 12.5px !important; }
.fork-corner.fc-size-small.fc-pos-tr + div {
top: -75px !important;
right: -75px !important; }

.fork-corner.fc-size-small.fc-pos-tl {
top: 12.5px !important;
left: 12.5px !important; }
.fork-corner.fc-size-small.fc-pos-tl + div {
top: -75px !important;
left: -75px !important; }

.fork-corner.fc-size-small.fc-theme-default > i,
.fork-corner.fc-size-small.fc-theme-github > i,
.fork-corner.fc-size-small.fc-theme-gitlab > i,
.fork-corner.fc-size-small.fc-theme-bitbucket > i {
font-size: 37.5px !important; }

.fork-corner.fc-size-small + div {
width: 150px !important;
height: 150px !important; }

.fork-corner.fc-size-medium.fc-pos-tr {
top: 20.83333px !important;
right: 20.83333px !important; }
.fork-corner.fc-size-medium.fc-pos-tr + div {
top: -125px !important;
right: -125px !important; }

.fork-corner.fc-size-medium.fc-pos-tl {
top: 20.83333px !important;
left: 20.83333px !important; }
.fork-corner.fc-size-medium.fc-pos-tl + div {
top: -125px !important;
left: -125px !important; }

.fork-corner.fc-size-medium.fc-theme-default > i,
.fork-corner.fc-size-medium.fc-theme-github > i,
.fork-corner.fc-size-medium.fc-theme-gitlab > i,
.fork-corner.fc-size-medium.fc-theme-bitbucket > i {
font-size: 62.5px !important; }

.fork-corner.fc-size-medium + div {
width: 250px !important;
height: 250px !important; }

.fork-corner.fc-size-large.fc-pos-tr {
top: 25px !important;
right: 25px !important; }
.fork-corner.fc-size-large.fc-pos-tr + div {
top: -150px !important;
right: -150px !important; }

.fork-corner.fc-size-large.fc-pos-tl {
top: 25px !important;
left: 25px !important; }
.fork-corner.fc-size-large.fc-pos-tl + div {
top: -150px !important;
left: -150px !important; }

.fork-corner.fc-size-large.fc-theme-default > i,
.fork-corner.fc-size-large.fc-theme-github > i,
.fork-corner.fc-size-large.fc-theme-gitlab > i,
.fork-corner.fc-size-large.fc-theme-bitbucket > i {
font-size: 75px !important; }

.fork-corner.fc-size-large + div {
width: 300px !important;
height: 300px !important; }
2 changes: 1 addition & 1 deletion dist/fork-corner.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

142 changes: 128 additions & 14 deletions source/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ html, body {

.fork-corner + div {
position: absolute;
width: $corner-size;
height: $corner-size;
width: $default-corner-size;
height: $default-corner-size;
z-index: 100;
}

.fork-corner {
// top right controller
&.fc-pos-tr {
top: $corner-size/12;
right: $corner-size/12;
top: $default-corner-size/12;
right: $default-corner-size/12;

&.fc-animate-default {
transition: 0.5s;
Expand All @@ -31,14 +31,14 @@ html, body {
}
// top right element
&.fc-pos-tr + div {
top: ($corner-size/2) - $corner-size;
right: ($corner-size/2) - $corner-size;
top: ($default-corner-size/2) - $default-corner-size;
right: ($default-corner-size/2) - $default-corner-size;
transform: rotate(45deg);
}
// top left controller
&.fc-pos-tl {
top: $corner-size/12;
left: $corner-size/12;
top: $default-corner-size/12;
left: $default-corner-size/12;

&.fc-animate-default {
transition: 0.5s;
Expand All @@ -50,8 +50,8 @@ html, body {
}
// top left element
&.fc-pos-tl + div {
top: ($corner-size/2) - $corner-size;
left: ($corner-size/2) - $corner-size;
top: ($default-corner-size/2) - $default-corner-size;
left: ($default-corner-size/2) - $default-corner-size;
transform: rotate(45deg);
}
}
Expand All @@ -61,7 +61,7 @@ html, body {
&.fc-theme-default {
text-decoration: none;
> i {
font-size: $corner-size/4;
font-size: $default-corner-size/4;
color: $default-icon-color;
}
}
Expand All @@ -75,7 +75,7 @@ html, body {
&.fc-theme-github {
text-decoration: none;
> i {
font-size: $corner-size/4;
font-size: $default-corner-size/4;
color: $github-icon-color;
}
}
Expand All @@ -89,7 +89,7 @@ html, body {
&.fc-theme-gitlab {
text-decoration: none;
> i {
font-size: $corner-size/4;
font-size: $default-corner-size/4;
color: $gitlab-icon-color;
}
}
Expand All @@ -103,11 +103,125 @@ html, body {
&.fc-theme-bitbucket {
text-decoration: none;
> i {
font-size: $corner-size/4;
font-size: $default-corner-size/4;
color: $bitbucket-icon-color;
}
}
&.fc-theme-bitbucket + div {
background-color: $bitbucket-bg-color;
}
}

// small corner size
.fork-corner {
&.fc-size-small {
// top right controller
&.fc-pos-tr {
top: $small-corner-size/12 !important;
right: $small-corner-size/12 !important;

& + div {
top: ($small-corner-size/2) - $small-corner-size !important;
right: ($small-corner-size/2) - $small-corner-size !important;
}
}
// top left controller
&.fc-pos-tl {
top: $small-corner-size/12 !important;
left: $small-corner-size/12 !important;

& + div {
top: ($small-corner-size/2) - $small-corner-size !important;
left: ($small-corner-size/2) - $small-corner-size !important;
}
}
// corner theme
&.fc-theme-default > i,
&.fc-theme-github > i,
&.fc-theme-gitlab > i,
&.fc-theme-bitbucket > i {
font-size: $small-corner-size/4 !important;
}
// corner element
& + div {
width: $small-corner-size !important;
height: $small-corner-size !important;
}
}
}

// medium corner size
.fork-corner {
&.fc-size-medium {
// top right controller
&.fc-pos-tr {
top: $medium-corner-size/12 !important;
right: $medium-corner-size/12 !important;

& + div {
top: ($medium-corner-size/2) - $medium-corner-size !important;
right: ($medium-corner-size/2) - $medium-corner-size !important;
}
}
// top left controller
&.fc-pos-tl {
top: $medium-corner-size/12 !important;
left: $medium-corner-size/12 !important;

& + div {
top: ($medium-corner-size/2) - $medium-corner-size !important;
left: ($medium-corner-size/2) - $medium-corner-size !important;
}
}
// corner theme
&.fc-theme-default > i,
&.fc-theme-github > i,
&.fc-theme-gitlab > i,
&.fc-theme-bitbucket > i {
font-size: $medium-corner-size/4 !important;
}
// corner element
& + div {
width: $medium-corner-size !important;
height: $medium-corner-size !important;
}
}
}

// large corner size
.fork-corner {
&.fc-size-large {
// top right controller
&.fc-pos-tr {
top: $large-corner-size/12 !important;
right: $large-corner-size/12 !important;

& + div {
top: ($large-corner-size/2) - $large-corner-size !important;
right: ($large-corner-size/2) - $large-corner-size !important;
}
}
// top left controller
&.fc-pos-tl {
top: $large-corner-size/12 !important;
left: $large-corner-size/12 !important;

& + div {
top: ($large-corner-size/2) - $large-corner-size !important;
left: ($large-corner-size/2) - $large-corner-size !important;
}
}
// corner theme
&.fc-theme-default > i,
&.fc-theme-github > i,
&.fc-theme-gitlab > i,
&.fc-theme-bitbucket > i {
font-size: $large-corner-size/4 !important;
}
// corner element
& + div {
width: $large-corner-size !important;
height: $large-corner-size !important;
}
}
}
5 changes: 4 additions & 1 deletion source/_vars.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
$corner-size: 200px;
$default-corner-size: 200px;
$small-corner-size: 150px;
$medium-corner-size: 250px;
$large-corner-size: 300px;
$default-icon-color: #ffffff;
$default-bg-color: #f34f29;
$github-icon-color: #ffffff;
Expand Down

0 comments on commit ed2ef40

Please sign in to comment.