From 5f120a86f331e27d5f549b08c7080a1a700d1949 Mon Sep 17 00:00:00 2001 From: tso Date: Wed, 16 Dec 2015 18:25:02 -0500 Subject: [PATCH] Convert language statistics styles to less, use different class names --- public/css/language_statistics.css | 111 ++++++++++++++++++ public/less/_language_statistics.less | 125 ++++++++++++++++++++ templates/repo/language_statistics.tmpl | 146 ++---------------------- 3 files changed, 248 insertions(+), 134 deletions(-) create mode 100644 public/css/language_statistics.css create mode 100644 public/less/_language_statistics.less diff --git a/public/css/language_statistics.css b/public/css/language_statistics.css new file mode 100644 index 000000000..014723036 --- /dev/null +++ b/public/css/language_statistics.css @@ -0,0 +1,111 @@ +.statistics { + position: relative; + height: 2.6667em; + border: 1px solid #dedede; + border-radius: 5px; + background: #fff; + /** + * 3D box effect technique + * + * http://codepen.io/rachsmith/pen/cojza + */ +} +.statistics .box3d { + perspective: 1000px; + overflow: hidden; + border-radius: 5px 5px 0 0; + padding: 0 1.5em; +} +.statistics .box3d .toppanel, +.statistics .box3d .bottompanel { + transform-origin: 50% 0; + transition-delay: 125ms; + /** + * this timing function from + * http://codepen.io/sbchewitt/pen/KpPZMx + */ + transition: all 0.5s cubic-bezier(0.57, -0.42, 0.46, 1.4); +} +.statistics .box3d .toppanel { + position: relative; + transform-style: preserve-3d; + background: #fff; +} +.statistics .box3d .bottompanel { + transform: rotateX(-90deg) translateZ(0); + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 100%; + background: #999; +} +.statistics .box3d.focusstate .toppanel { + transform: rotateX(90deg) translateY(-22px); + transition-delay: 0s; +} +.statistics .box3d.focusstate .bottompanel { + background: #fff; + transition-delay: 0s; +} +.statistics .box3d .navbar { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-around; + padding: 0.5em; +} +.statistics .box3d .navbar .navitem { + flex: 0 1 auto; +} +.statistics .box3d .navbar .navitem a { + color: #222; + text-decoration: none; +} +.statistics .box3d .repo .navitem:hover a { + color: #4183c4; +} +.statistics .box3d .lang .navitem::before { + background-color: currentColor; + content: ''; + display: inline-block; + width: 0.75em; + height: 0.75em; + border-radius: 50%; + vertical-align: middle; + margin: 0 0.25em 2px 0; + cursor: pointer; +} +.statistics .box3d .lang .navitem::after { + content: attr(data-percent); + margin-left: 0.5em; + color: #555; +} +.statistics .underbar { + position: absolute; + left: 0; + padding-top: 5px; + height: 8px; + width: 100%; + bottom: 0; + display: flex; + cursor: pointer; + border-radius: 0 0 5px 5px; + overflow: hidden; + opacity: 0.6; + transition: all 0.5s cubic-bezier(0.57, -0.42, 0.46, 1.4); +} +.statistics .underbar:hover { + opacity: 0.8; +} +.statistics .underbar span { + font-size: 0; + background-color: currentColor; +} +.statistics .box3d.focusstate ~ .underbar, +.statistics .underbar:hover { + opacity: 1; + padding: 0; + padding-top: 3px; +} diff --git a/public/less/_language_statistics.less b/public/less/_language_statistics.less new file mode 100644 index 000000000..99c8626ce --- /dev/null +++ b/public/less/_language_statistics.less @@ -0,0 +1,125 @@ +.statistics { + position: relative; + height: 2.6667em; + border: 1px solid #dedede; + border-radius: 5px; + background: #fff; + + /** + * 3D box effect technique + * + * http://codepen.io/rachsmith/pen/cojza + */ + .box3d { + perspective: 1000px; + overflow: hidden; + border-radius: 5px 5px 0 0; + padding: 0 1.5em; + + .toppanel, .bottompanel { + transform-origin: 50% 0; + transition-delay: 125ms; + + /** + * this timing function from + * http://codepen.io/sbchewitt/pen/KpPZMx + */ + transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4); + } + .toppanel { + position: relative; + transform-style: preserve-3d; + background: #fff; + } + .bottompanel { + transform: rotateX(-90deg) translateZ(0); + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 100%; + background: #999; + } + + &.focusstate { + .toppanel { + transform: rotateX(90deg) translateY(-22px); + transition-delay: 0s; + } + .bottompanel { + background: #fff; + transition-delay: 0s; + } + } + + .navbar { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-around; + padding: 0.5em; + + .navitem { + flex: 0 1 auto; + } + .navitem a { + color: #222; + text-decoration: none; + } + } + .repo .navitem:hover a { + color: #4183c4; + } + + .lang { + .navitem { + &::before { + background-color: currentColor; + content: ''; + display: inline-block; + width: 0.75em; + height: 0.75em; + border-radius: 50%; + vertical-align: middle; + margin: 0 0.25em 2px 0; + cursor: pointer; + } + &::after { + content: attr(data-percent); + margin-left: 0.5em; + color: #555; + } + } + } + } + + .underbar { + position: absolute; + left: 0; + bottom: 0; + padding-top: 5px; + height: 8px; + width: 100%; + bottom: 0; + display: flex; + cursor: pointer; + border-radius: 0 0 5px 5px; + overflow: hidden; + opacity: 0.6; + transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4); + &:hover { + opacity: 0.8; + } + span { + font-size: 0; + background-color: currentColor; + } + } + + .box3d.focusstate ~ .underbar, .underbar:hover { + opacity: 1; + padding: 0; + padding-top: 3px; + } +} diff --git a/templates/repo/language_statistics.tmpl b/templates/repo/language_statistics.tmpl index 04f439524..70d800f45 100644 --- a/templates/repo/language_statistics.tmpl +++ b/templates/repo/language_statistics.tmpl @@ -1,30 +1,29 @@ +
-
-
-
    -
  • +
    +
    + -
    -
      +
      +
        {{range $Lang := .LanguageStats}} -
      • +
      • {{$Lang.Name}}
        • {{end}} @@ -39,130 +38,9 @@ however browsers do not support this yet and JavaScript cannot target ::before, ::after --> -
        +
        {{range $Lang := .LanguageStats}} {{$Lang.Name}} {{end}}
        - -