Revize 863ca316
Přidáno uživatelem Martin Sebela před více než 3 roky(ů)
website/public/css/style.scss | ||
---|---|---|
734 | 734 |
bottom: -30px; |
735 | 735 |
} |
736 | 736 |
|
737 |
.next, .prev, .play, .pause, .lock-date {
|
|
737 |
.next-btn, .prev-btn, .animate-btn, .lock-btn {
|
|
738 | 738 |
display: inline-block; |
739 | 739 |
width: 42px; |
740 | 740 |
height: 42px; |
... | ... | |
762 | 762 |
} |
763 | 763 |
} |
764 | 764 |
|
765 |
.play, .pause {
|
|
765 |
.animate-btn {
|
|
766 | 766 |
width: 57px; |
767 | 767 |
height: 57px; |
768 | 768 |
opacity: 1; |
... | ... | |
780 | 780 |
height: 16px; |
781 | 781 |
top: calc(50% - 8px); |
782 | 782 |
} |
783 |
} |
|
784 |
|
|
785 |
.play:after { |
|
786 |
left: calc(50% - 2px); |
|
787 |
background: url($images-dir + 'btn-play.svg') no-repeat; |
|
788 |
} |
|
789 | 783 |
|
790 |
.pause:after { |
|
791 |
left: calc(50% - 4px); |
|
792 |
background: url($images-dir + 'btn-pause.png') no-repeat; |
|
784 |
&.play:after { |
|
785 |
left: calc(50% - 3px); |
|
786 |
background: url($images-dir + 'btn-play.svg') no-repeat; |
|
787 |
} |
|
788 |
|
|
789 |
&.pause:after { |
|
790 |
left: calc(50% - 5px); |
|
791 |
background: url($images-dir + 'btn-pause.png') no-repeat; |
|
792 |
} |
|
793 | 793 |
} |
794 | 794 |
|
795 |
.next { |
|
795 |
.next-btn {
|
|
796 | 796 |
@include media-breakpoint-down(md) { |
797 | 797 |
order: 3; |
798 | 798 |
} |
... | ... | |
806 | 806 |
} |
807 | 807 |
} |
808 | 808 |
|
809 |
.prev { |
|
809 |
.prev-btn {
|
|
810 | 810 |
@include media-breakpoint-down(md) { |
811 | 811 |
order: 2; |
812 | 812 |
} |
... | ... | |
816 | 816 |
} |
817 | 817 |
} |
818 | 818 |
|
819 |
.datetime {
|
|
819 |
.timeline-wrapper {
|
|
820 | 820 |
display: flex; |
821 | 821 |
|
822 | 822 |
@media (max-width: 390px) { |
... | ... | |
836 | 836 |
border-radius: 15px; |
837 | 837 |
cursor: pointer; |
838 | 838 |
background: rgba(11, 21, 90, .7); |
839 |
//box-shadow: 0 0 0 2px rgba(11, 21, 90, .7); |
|
840 |
//border: 1px solid transparent; |
|
839 |
|
|
841 | 840 |
@media (max-width: 390px) { |
842 | 841 |
margin-right: 0; |
843 | 842 |
} |
844 | 843 |
|
845 |
span {
|
|
846 |
padding: 3px 6px 4px 12px;
|
|
844 |
&:hover .lock-btn:after {
|
|
845 |
background-position: 0 0;
|
|
847 | 846 |
} |
847 |
|
|
848 | 848 |
&.lock { |
849 | 849 |
background: rgba(11, 21, 90, 1); |
850 |
//border-color: $primary-text-color; |
|
851 |
//box-shadow: 0 0 0 2px $secondary-bg-color; |
|
852 |
.lock-date { |
|
853 |
border: 0px; |
|
850 |
|
|
851 |
&:hover .lock-btn:after { |
|
852 |
background-position: -8px 0; |
|
853 |
} |
|
854 |
|
|
855 |
.lock-btn { |
|
856 |
border: 0; |
|
854 | 857 |
box-shadow: none; |
858 |
|
|
855 | 859 |
&:after { |
856 | 860 |
background-position: 0 0; |
857 | 861 |
} |
858 |
|
|
859 |
&:hover:after { |
|
860 |
background-position: -8px 0; |
|
861 |
} |
|
862 | 862 |
} |
863 | 863 |
} |
864 |
.lock-date { |
|
864 |
|
|
865 |
span { |
|
866 |
padding: 3px 6px 4px 12px; |
|
867 |
} |
|
868 |
|
|
869 |
.lock-btn { |
|
865 | 870 |
width: 26px; |
866 | 871 |
height: 26px; |
867 | 872 |
margin-right: 2px; |
868 | 873 |
opacity: 1; |
869 | 874 |
border: 1px solid $primary-text-color; |
870 |
/* box-shadow: 0 0 0 2px $secondary-bg-color; */ |
|
871 |
&:after{ |
|
872 |
background-position: -8px 0; |
|
873 |
} |
|
874 |
&:hover { |
|
875 |
/* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */ |
|
876 |
background: rgba(11, 21, 90, .2); |
|
877 |
|
|
878 |
&:after { |
|
879 |
background-position: 0 0; |
|
880 |
} |
|
881 |
} |
|
882 | 875 |
|
883 | 876 |
&:after { |
884 | 877 |
content: ''; |
... | ... | |
888 | 881 |
background: url($images-dir + 'btn-lock.svg') no-repeat -8px 0; |
889 | 882 |
background-size: cover; |
890 | 883 |
} |
884 |
|
|
885 |
&:hover:after { |
|
886 |
background-position: 0 0; |
|
887 |
} |
|
891 | 888 |
} |
892 | 889 |
} |
893 | 890 |
|
... | ... | |
1118 | 1115 |
margin-top: auto; |
1119 | 1116 |
margin-bottom: auto; |
1120 | 1117 |
|
1121 |
&:nth-child(3), &:last-child{
|
|
1118 |
&:nth-child(3) {
|
|
1122 | 1119 |
border: 0; |
1123 | 1120 |
} |
1124 | 1121 |
|
1125 |
.btn-secondary { |
|
1126 |
display: flex; |
|
1127 |
justify-content: center; |
|
1128 |
align-items: center; |
|
1129 |
outline: none; |
|
1130 |
border-radius: 50px; |
|
1131 |
height: 40px; |
|
1132 |
width: 40px; |
|
1133 |
margin-left: 10px; |
|
1134 |
transition: all 0.2s ease-out; |
|
1135 |
color: $primary-bg-color; |
|
1136 |
background: rgba(255, 255, 255, 1); |
|
1137 |
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17); |
|
1138 |
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17); |
|
1139 |
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17); |
|
1122 |
&:last-child { |
|
1123 |
margin-top: 0; |
|
1124 |
margin-bottom: 0; |
|
1125 |
border-left: 1px solid #1C6CC0; |
|
1126 |
background: #0057be; |
|
1140 | 1127 |
|
1141 | 1128 |
@include media-breakpoint-down(md) { |
1142 |
width: 100%; |
|
1143 |
border-radius: .25rem; |
|
1144 |
margin-left: 0px; |
|
1145 |
margin-top: 10px; |
|
1146 |
margin-bottom: -10px; |
|
1129 |
margin: 10px 5px 0 5px; |
|
1130 |
border: 0; |
|
1147 | 1131 |
} |
1148 | 1132 |
|
1149 |
&:after { |
|
1150 |
padding-bottom: 4px; |
|
1151 |
content: '↺'; |
|
1152 |
font-weight: 400; |
|
1153 |
font-size: 30px; |
|
1154 |
transform: rotateZ(0); |
|
1155 |
transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); |
|
1133 |
&:hover { |
|
1134 |
background: $primary-bg-color-darker; |
|
1156 | 1135 |
} |
1136 |
} |
|
1157 | 1137 |
|
1158 |
&:hover {
|
|
1159 |
color: $primary-bg-color;
|
|
1160 |
background: rgba(255, 255, 255, 1) !important;
|
|
1161 |
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
|
|
1162 |
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
|
|
1163 |
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
|
|
1138 |
// TLAČÍTKO PRO ODESLÁNÍ FORMULÁŘE PRO ZMĚNU PARAMETRŮ HEATMAPY
|
|
1139 |
.btn-secondary {
|
|
1140 |
display: inline-block;
|
|
1141 |
outline: none;
|
|
1142 |
padding: 0 30px;
|
|
1143 |
background: url($images-dir + 'btn-refresh.svg') no-repeat center center;
|
|
1164 | 1144 |
|
1165 |
&:after { |
|
1166 |
transform: rotateZ(-90deg); |
|
1167 |
transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); |
|
1168 |
} |
|
1145 |
&:hover { |
|
1146 |
background: url($images-dir + 'btn-refresh.svg') no-repeat center center !important; |
|
1169 | 1147 |
} |
1170 | 1148 |
|
1171 |
&:active, &:focus {
|
|
1172 |
background: rgba(240, 240, 240, 1) !important;
|
|
1173 |
color: $primary-bg-color !important;
|
|
1149 |
@include media-breakpoint-down(md) {
|
|
1150 |
width: 100%;
|
|
1151 |
padding: 20px;
|
|
1174 | 1152 |
} |
1175 | 1153 |
} |
1176 | 1154 |
|
Také k dispozici: Unified diff
Re #8159 - new, fixed buttons, CSS improvements, refactoring