Revize 0218d5c7
Přidáno uživatelem Adam Mištera před asi 4 roky(ů)
resources/sass/_custom.scss | ||
---|---|---|
853 | 853 |
margin-bottom: 3rem; |
854 | 854 |
} |
855 | 855 |
|
856 |
// books component |
|
857 |
.books-component { |
|
858 |
|
|
859 |
.book-area { |
|
860 |
.card-cus-bottom { |
|
861 |
|
|
862 |
display: flex; |
|
863 |
justify-content: space-between; |
|
864 |
align-items: baseline; |
|
865 |
|
|
866 |
.book-arrow { |
|
867 |
&:after { |
|
868 |
content: ''; |
|
869 |
bottom: 3rem; |
|
870 |
position: absolute; |
|
871 |
border-top: 1.25rem solid transparent; |
|
872 |
border-bottom: 1.25rem solid transparent; |
|
873 |
} |
|
874 |
} |
|
875 |
|
|
876 |
.book-arrow-left { |
|
877 |
&:after { |
|
878 |
left: 25%; |
|
879 |
border-right: 1.25rem solid $theme-color-two; |
|
880 |
} |
|
881 |
} |
|
882 |
|
|
883 |
.book-arrow-right { |
|
884 |
&:after { |
|
885 |
right: 25%; |
|
886 |
border-left: 1.25rem solid $theme-color-two; |
|
887 |
} |
|
888 |
} |
|
889 |
|
|
890 |
.likes { |
|
891 |
display: flex; |
|
892 |
flex-direction: column; |
|
893 |
align-items: center; |
|
894 |
|
|
895 |
.inter_like, .inter_like_filled { |
|
896 |
margin: 0 auto; |
|
897 |
&:before { |
|
898 |
margin-right: 0; |
|
899 |
height: 5rem; |
|
900 |
width: 5rem; |
|
901 |
} |
|
902 |
} |
|
903 |
|
|
904 |
.artefact-likes { |
|
905 |
font-size: 12pt; |
|
906 |
padding: 0; |
|
907 |
} |
|
908 |
} |
|
909 |
} |
|
910 |
} |
|
911 |
|
|
912 |
.info-area { |
|
913 |
color: $theme-color-two; |
|
914 |
margin-top: 0.625rem; |
|
915 |
padding-left: 5rem; |
|
916 |
|
|
917 |
/* could be use to hide overflowing notes |
|
918 |
max-height: 80vh; |
|
919 |
overflow-y: scroll; |
|
920 |
scrollbar-width: none; |
|
921 |
-ms-overflow-style: none; |
|
922 |
|
|
923 |
&::-webkit-scrollbar { |
|
924 |
width: 0 !important |
|
925 |
} */ |
|
926 |
|
|
927 |
h3 { |
|
928 |
font-weight: $font-weight-two; |
|
929 |
} |
|
930 |
|
|
931 |
.switch-view { |
|
932 |
float: right; |
|
933 |
color: $theme-color-one; |
|
934 |
cursor: pointer; |
|
935 |
} |
|
936 |
|
|
937 |
.artefact-notes { |
|
938 |
display: none; |
|
939 |
color: $theme-color-two; |
|
940 |
|
|
941 |
.pin-horizontal { |
|
942 |
border-bottom: .042rem solid $theme-color-two; |
|
943 |
display: inline-block; |
|
944 |
margin: 2.75rem 2rem 0 0; |
|
945 |
|
|
946 |
&:after { |
|
947 |
content: ''; |
|
948 |
background-color: #ddd1b9; |
|
949 |
position: relative; |
|
950 |
height: .5rem; |
|
951 |
width: .5rem; |
|
952 |
border-radius: 50%; |
|
953 |
display: block; |
|
954 |
margin-left: auto; |
|
955 |
top: .25rem; |
|
956 |
} |
|
957 |
|
|
958 |
.metadata { |
|
959 |
position: relative; |
|
960 |
display: flex; |
|
961 |
align-items: baseline; |
|
962 |
|
|
963 |
span { |
|
964 |
font-size: 12pt; |
|
965 |
font-weight: $font-weight-two; |
|
966 |
} |
|
967 |
|
|
968 |
.arrow-down { |
|
969 |
position: relative; |
|
970 |
top: 0; |
|
971 |
right: 0; |
|
972 |
width: 0; |
|
973 |
height: 0; |
|
974 |
border-left: 0.25rem solid transparent; |
|
975 |
border-right: 0.25rem solid transparent; |
|
976 |
border-top: 0.25rem solid $theme-color-two; |
|
977 |
margin: 0 0.5rem 0 0.5rem; |
|
978 |
} |
|
979 |
} |
|
980 |
} |
|
981 |
|
|
982 |
.white-pin { |
|
983 |
color: $theme-color-one; |
|
984 |
border-bottom: .042rem solid $theme-color-one; |
|
985 |
|
|
986 |
&:before { |
|
987 |
content: ''; |
|
988 |
background-color: $theme-color-one; |
|
989 |
} |
|
990 |
|
|
991 |
.metadata { |
|
992 |
.arrow-down { |
|
993 |
border-top: 0.25rem solid $theme-color-one; |
|
994 |
} |
|
995 |
} |
|
996 |
} |
|
997 |
|
|
998 |
.metadata-text { |
|
999 |
font-size: 12pt; |
|
1000 |
color: $theme-color-one; |
|
1001 |
padding-top: 10px; |
|
1002 |
padding-left: 25px; |
|
1003 |
padding-right: 25px; |
|
1004 |
|
|
1005 |
.inter_like { |
|
1006 |
|
|
1007 |
&:before { |
|
1008 |
background-image: url(../images/interface/Heart_Empty.svg); |
|
1009 |
width: 5rem; |
|
1010 |
height: 5rem; |
|
1011 |
} |
|
1012 |
|
|
1013 |
&:hover, &:focus, &:active { |
|
1014 |
background-color: transparent !important; |
|
1015 |
border-color: transparent !important; |
|
1016 |
outline: none !important; |
|
1017 |
box-shadow: none !important; |
|
1018 |
} |
|
1019 |
} |
|
1020 |
|
|
1021 |
.inter_like_filled { |
|
1022 |
|
|
1023 |
&:before { |
|
1024 |
background-image: url(../images/interface/Heart_Filled.svg); |
|
1025 |
width: 5rem; |
|
1026 |
height: 5rem; |
|
1027 |
} |
|
1028 |
|
|
1029 |
&:hover, &:focus, &:active { |
|
1030 |
background-color: transparent !important; |
|
1031 |
border-color: transparent !important; |
|
1032 |
outline: none !important; |
|
1033 |
box-shadow: none !important; |
|
1034 |
} |
|
1035 |
} |
|
1036 |
} |
|
1037 |
} |
|
1038 |
|
|
1039 |
.inter_info { |
|
1040 |
|
|
1041 |
float: right; |
|
1042 |
color: $theme-color-one; |
|
1043 |
padding-right: 1rem; |
|
1044 |
|
|
1045 |
&:before { |
|
1046 |
background-image: url(../images/interface/Button_Info_White.svg); |
|
1047 |
width: 1.875rem; |
|
1048 |
height: 1.875rem; |
|
1049 |
} |
|
1050 |
|
|
1051 |
&:hover, &:focus, &:active { |
|
1052 |
background-color: transparent !important; |
|
1053 |
border-color: transparent !important; |
|
1054 |
outline: none !important; |
|
1055 |
box-shadow: none !important; |
|
1056 |
} |
|
1057 |
} |
|
1058 |
} |
|
1059 |
} |
|
1060 |
|
|
856 | 1061 |
@media screen and (max-height: 450px) { |
857 | 1062 |
.sidenav a { |
858 | 1063 |
font-size: 18px; |
... | ... | |
912 | 1117 |
color: $theme-color-five; |
913 | 1118 |
background-color: $theme-color-one; |
914 | 1119 |
} |
1120 |
.books-component { |
|
1121 |
.info-area{ |
|
1122 |
padding-left: 1.5625rem; |
|
1123 |
} |
|
1124 |
} |
|
915 | 1125 |
} |
916 | 1126 |
|
917 | 1127 |
@media only screen and (max-width: 540px) { |
Také k dispozici: Unified diff
Issue #8050 @3h
[+] Vytvoření komponenty pro knihy na desktop
[+] Stylování komponenty a testování napojení na controller